Feat/privatesketch

client/modules/IDE/components/Header/MobileNav.jsx

@@ -249,11 +249,9 @@
   const userIsOwner = user?.username === project.owner?.username;
   const Logo = AsteriskIcon;
 
-  const showPrivacyToggle =
-    project?.owner && title === project.name && userIsOwner;
   const showOwner = project?.owner && title === project.name && !userIsOwner;
 
   const toggleVisibility = (e) => {
     try {
       const isChecked = e.target.checked;
       dispatch(
@@ -274,17 +272,6 @@
       </LogoContainer>
       <Title>
         <h1>{title === project?.name ? <ProjectName /> : title}</h1>
-        {showPrivacyToggle && (
-          <main className="toolbar__makeprivate">
-            <p>Private</p>
-            <input
-              className="toolbar__togglevisibility"
-              type="checkbox"
-              onChange={toggleVisibility}
-              defaultChecked={project.visibility === 'Private'}
-            />
-          </main>
-        )}
         {showOwner && <h5>by {project?.owner?.username}</h5>}
       </Title>
 

client/modules/IDE/components/Header/Toolbar.jsx

@@ -1,4 +1,4 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -122,7 +122,6 @@
           </div>
         )}
 
-        {/* ✅ Still show owner if not you */}
         {project?.owner && !userIsOwner && (
           <p className="toolbar__project-owner">
             {t('Toolbar.By')}{' '}

client/modules/IDE/components/SketchListRowBase.jsx

@@ -125,7 +125,7 @@ const SketchListRowBase = ({
       <th scope="row">{name}</th>
       <td>{formatDateCell(sketch.createdAt, mobile)}</td>
       <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
-      <td hidden={!userIsOwner}>
+      <td hidden={!userIsOwner || mobile}>
         <VisibilityDropdown
           sketch={sketch}
           onVisibilityChange={handleVisibilityChange}

client/styles/components/_console.scss

@@ -57,6 +57,13 @@
 		& path {
 			fill: getThemifyVariable('secondary-text-color');
 		}
+		&:hover {
+			& g,
+			& polygon,
+			& path {
+				fill: getThemifyVariable('logo-color');
+			}
+		}
 	}
 	.preview-console--collapsed & {
 		display: none;
@@ -72,6 +79,13 @@
 		& path {
 			fill: getThemifyVariable('secondary-text-color');
 		}
+		&:hover {
+			& g,
+			& polygon,
+			& path {
+				fill: getThemifyVariable('logo-color');
+			}
+		}
 	}
 	display: none;
 	.preview-console--collapsed & {

client/styles/components/_visibility-dropdown.scss

@@ -45,7 +45,7 @@
 
   @include themify() {
     border-bottom: 1px solid getThemifyVariable("modal-border-color");
-    background-color: white;
+    background-color: getThemifyVariable("modal-background-color");
   }
 
   &:last-child {
@@ -54,14 +54,20 @@
 
   &:hover {
     @include themify() {
-      background-color: getThemifyVariable("table-row-stripe-color") !important; 
+      background-color: getThemifyVariable("file-selected-color") !important; 
     }
   }
 
   &.selected {
     @include themify() {
-      background-color: getThemifyVariable("search-background-color");
+      background-color: getThemifyVariable("table-row-stripe-color");
     }
+
+    // &:hover {
+    //   @include themify() {
+    //     background-color: getThemifyVariable("table-row-stripe-color") !important;
+    //   }
+    // }
   }
 }
 

contributor_docs/README.md

@@ -1,4 +1,4 @@
-# Contributor Documentatation
+# Contributor Documentation
 This folder contains guides for contributing to the p5.js Web Editor. You don't need to know everything to get started—explore at your own pace! To begin, we highly recommend starting with the [Contribution Guide](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md)!
 
 These guides aren't exhaustive, and do not cover all the possible ways you can contribute to a project. If you have an idea for how you'd like to help and don't see a guide for it here, you're welcome to add it to the "Documents to Create" list below by opening an issue!

contributor_docs/s3_configuration.md

@@ -1,5 +1,5 @@
 # S3 Bucket Configuration
-1. [Create an S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket-overview.html), with any name
+1. [Create an S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket-overview.html), with any name.
 2. Navigate to the S3 bucket permissions and add the following CORS policy. This is for development only, as it allows CORS from any origin.
 ```
 [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.17.1",
+  "version": "2.17.2",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",