update toolbar arrangement and styling

raclim · raclim · commit be8d50a848ac · 2025-08-15T18:26:12.000-04:00
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -35,7 +35,6 @@ 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(Menubar)`
   background: ${prop('MobilePanel.default.background')};
@@ -220,7 +219,6 @@ const MobileMenuItem = ({ children, ...props }) => (
 const MobileNav = () => {
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
-  const dispatch = useDispatch();
 
   const { t } = useTranslation();
 
@@ -251,20 +249,6 @@ const MobileNav = () => {
 
   const showOwner = project?.owner && title === project.name && !userIsOwner;
 
-  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>
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -92,6 +92,7 @@ const Toolbar = (props) => {
       >
         <StopIcon focusable="false" aria-hidden="true" />
       </button>
+
       <div className="toolbar__autorefresh">
         <input
           id="autorefresh"
@@ -112,29 +113,31 @@ const Toolbar = (props) => {
 
       <div className="toolbar__project-name-container">
         <ProjectName />
+      </div>
 
-        {showVisibilityDropdown && (
-          <div className="toolbar__visibility">
-            <VisibilityDropdown
-              sketch={project}
-              onVisibilityChange={handleVisibilityChange}
-            />
-          </div>
-        )}
+      <div style={{ flex: 1 }} />
 
-        {project?.owner && !userIsOwner && (
-          <p className="toolbar__project-owner">
-            {t('Toolbar.By')}{' '}
-            <Link to={`/${project.owner.username}/sketches`}>
-              {project.owner.username}
-            </Link>
-          </p>
-        )}
+      {showVisibilityDropdown && (
+        <div className="toolbar__visibility">
+          <VisibilityDropdown
+            sketch={project}
+            onVisibilityChange={handleVisibilityChange}
+            location="toolbar"
+          />
+        </div>
+      )}
 
-        <VersionIndicator />
-      </div>
+      {/* Still show owner if not you */}
+      {project?.owner && !userIsOwner && (
+        <p className="toolbar__project-owner">
+          {t('Toolbar.By')}{' '}
+          <Link to={`/${project.owner.username}/sketches`}>
+            {project.owner.username}
+          </Link>
+        </p>
+      )}
 
-      <div style={{ flex: 1 }} />
+      <VersionIndicator />
 
       <button
         className={preferencesButtonClass}
diff --git a/client/modules/User/components/VisibilityDropdown.jsx b/client/modules/User/components/VisibilityDropdown.jsx
@@ -2,10 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LockIcon from '../../../images/lock.svg';
 import EarthIcon from '../../../images/earth.svg';
-import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import CheckmarkIcon from '../../../images/checkmark.svg';
 
-const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
+const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -56,15 +55,16 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
   return (
     <div className="visibility-dropdown" ref={dropdownRef}>
       <button
-        className="visibility-dropdown__trigger"
+        className={`visibility-dropdown__trigger ${
+          location === 'toolbar' ? 'visibility-dropdown__trigger-toolbar' : ''
+        }`}
         onClick={() => setIsOpen(!isOpen)}
         aria-haspopup="true"
         aria-expanded={isOpen}
         aria-label={`Change visibility. Currently ${currentVisibility.label}`}
       >
         {currentVisibility.icon}
         <span className="visibility-label">{currentVisibility.label}</span>
-        <DownArrowIcon focusable="false" aria-hidden="true" />
       </button>
 
       {isOpen && (
@@ -87,7 +87,11 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
                   <CheckmarkIcon focusable="false" aria-hidden="true" />
                 )}
               </div>
-              <div className="visibility-option__description">
+              <div
+                className={`visibility-option__description ${
+                  option.value === sketch.visibility ? 'selected' : ''
+                }`}
+              >
                 {option.description}
               </div>
             </div>
@@ -98,13 +102,18 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
   );
 };
 
+VisibilityDropdown.defaultProps = {
+  location: 'sketchlist'
+};
+
 VisibilityDropdown.propTypes = {
   sketch: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     visibility: PropTypes.string.isRequired
   }).isRequired,
-  onVisibilityChange: PropTypes.func.isRequired
+  onVisibilityChange: PropTypes.func.isRequired,
+  location: PropTypes.string
 };
 
 export default VisibilityDropdown;
diff --git a/client/styles/components/_visibility-dropdown.scss b/client/styles/components/_visibility-dropdown.scss
@@ -8,31 +8,53 @@
 .visibility-dropdown__trigger {
   display: flex;
   align-items: center;
-  gap: #{math.div(8, $base-font-size)}rem;
-  padding: #{math.div(8, $base-font-size)}rem #{math.div(12, $base-font-size)}rem;
+  gap: #{math.div(3, $base-font-size)}rem;
+  margin-right: 0.5rem;
+  padding: 0.5rem 0.7rem;
+  border-radius: #{math.div(15, $base-font-size)}rem;
   cursor: pointer;
   font-size: #{math.div(14, $base-font-size)}rem;
   transition: all 0.2s ease;
-  min-width: #{math.div(120, $base-font-size)}rem;
+}
 
+.visibility-dropdown__trigger-toolbar {
   @include themify() {
-    color: getThemifyVariable("primary-text-color");
+    color: getThemifyVariable("toolbar-button-color");
+    background-color: getThemifyVariable("toolbar-button-background-color");
+
+    & g,
+    & path {
+      fill: getThemifyVariable('toolbar-button-color');
+    }
+  }
+
+  &:hover {
+    @include themify() {
+      background-color: getThemifyVariable("button-background-hover-color") !important;
+      color: getThemifyVariable("button-hover-color") !important;
+
+    & g,
+      & path {
+        fill: getThemifyVariable('button-hover-color') !important;
+      }
+    }
   }
 }
 
 .visibility-dropdown__menu {
   position: absolute;
   top: 100%;
-  left: 0;
   right: 0;
   z-index: 10000000;
   margin-top: #{math.div(4, $base-font-size)}rem;
   min-width: #{math.div(233, $base-font-size)}rem;
   overflow: hidden;
+  border-radius: #{math.div(6, $base-font-size)}rem;
 
   @include themify() {
     border: 1px solid getThemifyVariable("modal-border-color");
-    box-shadow: 0 #{math.div(4, $base-font-size)}rem #{math.div(12, $base-font-size)}rem rgba(0, 0, 0, 0.15);
+    color: getThemifyVariable("primary-text-color");
+    background-color: getThemifyVariable("modal-background-color");
   }
 }
 
@@ -54,20 +76,19 @@
 
   &:hover {
     @include themify() {
-      background-color: getThemifyVariable("file-selected-color") !important; 
+      background-color: getThemifyVariable("button-background-hover-color") !important;
+      color: getThemifyVariable("button-hover-color") !important;
+
+    & g {
+        fill: getThemifyVariable('button-hover-color') !important;
+      }
     }
   }
 
   &.selected {
     @include themify() {
       background-color: getThemifyVariable("table-row-stripe-color");
     }
-
-    // &:hover {
-    //   @include themify() {
-    //     background-color: getThemifyVariable("table-row-stripe-color") !important;
-    //   }
-    // }
   }
 }
 
@@ -87,16 +108,13 @@
 .visibility-option__description {
   font-size: #{math.div(12, $base-font-size)}rem;
   margin-left: #{math.div(20, $base-font-size)}rem;
-
-  @include themify() {
-    color: getThemifyVariable("inactive-text-color");
-  }
 }
 
 .visibility-icon {
   width: #{math.div(16, $base-font-size)}rem;
   height: #{math.div(16, $base-font-size)}rem;
   flex-shrink: 0;
+  padding-bottom: 1px;
 }
 
 .dropdown-arrow {
