UI changes

Author: vivekbopaliya

client/common/icons.jsx

@@ -25,8 +25,6 @@ import CircleInfo from '../images/circle-info.svg';
 import Add from '../images/add.svg';
 import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
-import Lock from '../images/lock.svg';
-import UnLock from '../images/unlock.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -104,5 +102,3 @@ export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
 export const AddIcon = withLabel(Add);
 export const FilterIcon = withLabel(Filter);
-export const LockIcon = withLabel(Lock);
-export const UnlockIcon = withLabel(UnLock);

client/images/lock.svg

@@ -411,7 +411,7 @@ export function deleteProject(id) {
   };
 }
 
-export function changeVisibility(projectId, visibility) {
+export function changeVisibility(projectId, projectName, visibility) {
   return (dispatch) =>
     apiClient
       .patch('/project/visibility', { projectId, visibility })
@@ -423,7 +423,7 @@ export function changeVisibility(projectId, visibility) {
           payload: { visibility: response.data.visibility }
         });
 
-        dispatch(setToastText(`Sketch is ${newVisibility}`));
+        dispatch(setToastText(`The ${projectName} is now ${newVisibility}!`));
         dispatch(showToast(2000));
       })
       .catch((error) => {

client/images/lockgif.gif

@@ -35,6 +35,7 @@ import { setLanguage } from '../../actions/preferences';
 import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
+import { changeVisibility } from '../../actions/project';
 
 const Nav = styled(NavBar)`
   background: ${prop('MobilePanel.default.background')};
@@ -75,6 +76,13 @@ const Title = styled.div`
     margin: 0;
   }
 
+  > section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+  }
+
   > h5 {
     font-size: ${remSize(13)};
     font-weight: normal;
@@ -203,6 +211,7 @@ const LanguageSelect = styled.div`
 const MobileNav = () => {
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
+  const dispatch = useDispatch();
 
   const { t } = useTranslation();
 
@@ -228,19 +237,53 @@ const MobileNav = () => {
   }
 
   const title = useMemo(resolveTitle, [pageName, project.name]);
+  const userIsOwner = user?.username === project.owner?.username;
 
   const Logo = AsteriskIcon;
+
+  const toggleVisibility = (e) => {
+    try {
+      const isChecked = e.target.checked;
+
+      dispatch(
+        changeVisibility(
+          project.id,
+          project.name,
+          isChecked ? 'Private' : 'Public'
+        )
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <Nav>
       <LogoContainer>
         <Logo />
       </LogoContainer>
       <Title>
-        <h1>{title === project.name ? <ProjectName /> : title}</h1>
-        {project?.owner && title === project.name && (
-          <h5>by {project?.owner?.username}</h5>
-        )}
+        <h1>{title === project?.name ? <ProjectName /> : title}</h1>
+        {(() => {
+          if (project?.owner && title === project.name && userIsOwner) {
+            return (
+              <main className="toolbar__makeprivate">
+                <p>Private</p>
+                <input
+                  className="toolbar__togglevisibility"
+                  type="checkbox"
+                  onChange={toggleVisibility}
+                  defaultChecked={project.visibility === 'Private'}
+                />
+              </main>
+            );
+          }
+          if (project?.owner && title === project.name) {
+            return <h5>by {project?.owner?.username}</h5>;
+          }
+          return null;
+        })()}
       </Title>
+
       {/* check if the user is in login page */}
       {pageName === 'login' || pageName === 'signup' ? (
         // showing the CrossIcon

client/images/unlock.svg

@@ -21,8 +21,8 @@ import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import { changeVisibility } from '../../actions/project';
-import IconButton from '../../../../common/IconButton';
-import { LockIcon, UnlockIcon } from '../../../../common/icons';
+// import IconButton from '../../../../common/IconButton';
+// import { LockIcon, UnlockIcon } from '../../../../common/icons';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -33,17 +33,17 @@ const Toolbar = (props) => {
   const autorefresh = useSelector((state) => state.preferences.autorefresh);
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const [visibility, setVisibility] = React.useState(
-    project.visibility || 'Public'
-  );
+
   const userIsOwner = user?.username === project.owner?.username;
-  const toggleVisibility = () => {
+  const toggleVisibility = (e) => {
     try {
-      setVisibility((prev) => (prev === 'Public' ? 'Private' : 'Public'));
+      const isChecked = e.target.checked;
+
       dispatch(
         changeVisibility(
           project.id,
-          visibility === 'Public' ? 'Private' : 'Public'
+          project.name,
+          isChecked ? 'Private' : 'Public'
         )
       );
     } catch (error) {
@@ -119,7 +119,20 @@ const Toolbar = (props) => {
       <div className="toolbar__project-name-container">
         <ProjectName />
         {(() => {
-          if (project.owner) {
+          if (project?.owner && userIsOwner) {
+            return (
+              <main className="toolbar__makeprivate">
+                <p>Private</p>
+                <input
+                  type="checkbox"
+                  className="toolbar__togglevisibility"
+                  defaultChecked={project.visibility === 'Private'}
+                  onChange={toggleVisibility}
+                />
+              </main>
+            );
+          }
+          if (project?.owner && !userIsOwner) {
             return (
               <p className="toolbar__project-project.owner">
                 {t('Toolbar.By')}{' '}
@@ -131,15 +144,6 @@ const Toolbar = (props) => {
           }
           return null;
         })()}
-        {userIsOwner && project.owner && (
-          <section>
-            {visibility !== 'Private' ? (
-              <IconButton icon={UnlockIcon} onClick={toggleVisibility} />
-            ) : (
-              <IconButton icon={LockIcon} onClick={toggleVisibility} />
-            )}
-          </section>
-        )}
       </div>
       <button
         className={preferencesButtonClass}