better align undo/redo buttons with the top buttons

3DStreet · Nov 16, 2024 · 82ffee2 · 82ffee2
1 parent 991eda2
commit 82ffee2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/src/editor/components/components/Logo/Logo.component.jsx b/src/editor/components/components/Logo/Logo.component.jsx
@@ -9,7 +9,7 @@ import styles from './Logo.module.scss';
  * @category Components
  */
 const Logo = ({ onToggleEdit, isEditor }) => (
-  <div className="flex items-center space-x-2">
+  <div className="flex items-center gap-2">
     <div className={styles.logo} id="logoImg">
       <img src="ui_assets/3D-St-stacked-128.png" alt="3DStreet Logo" />
     </div>

diff --git a/src/editor/components/components/UndoRedo/UndoRedo.component.jsx b/src/editor/components/components/UndoRedo/UndoRedo.component.jsx
@@ -37,6 +37,7 @@ export const UndoRedo = () => {
     <>
       <Button
         variant="toolbtn"
+        className="min-w-[105px]"
         onClick={handleUndoClick}
         leadingIcon={<AwesomeIcon icon={faRotateLeft} />}
         disabled={undoDisabled}
@@ -45,6 +46,7 @@ export const UndoRedo = () => {
       </Button>
       <Button
         variant="toolbtn"
+        className="min-w-[105px]"
         onClick={handleRedoClick}
         leadingIcon={<AwesomeIcon icon={faRotateRight} />}
         disabled={redoDisabled}

diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js
@@ -313,7 +313,7 @@ export default class Toolbar extends Component {
     const isEditor = !!this.state.inspectorEnabled;
     return (
       <div id="toolbar" className="m-4 justify-center">
-        <div className="grid grid-flow-dense grid-cols-5 justify-between">
+        <div className="grid grid-flow-dense grid-cols-5">
           <div className="col-span-2">
             <Logo onToggleEdit={this.toggleEdit} isEditor={isEditor} />
           </div>
@@ -322,7 +322,7 @@ export default class Toolbar extends Component {
               <div className="col-span-1 flex items-center justify-center">
                 <CameraToolbar />
               </div>
-              <div className="col-span-2 flex items-center justify-end space-x-2">
+              <div className="col-span-2 flex items-center justify-end gap-2">
                 <Button
                   leadingIcon={<Edit24Icon />}
                   onClick={this.newHandler}
@@ -390,6 +390,7 @@ export default class Toolbar extends Component {
                     leadingIcon={<Upload24Icon />}
                     onClick={() => Events.emit('openscenesmodal')}
                     variant="toolbtn"
+                    className="min-w-[105px]"
                   >
                     <div>Open</div>
                   </Button>
@@ -401,6 +402,7 @@ export default class Toolbar extends Component {
                     Events.emit('openscreenshotmodal');
                   }}
                   variant="toolbtn"
+                  className="min-w-[105px]"
                 >
                   <div>Share</div>
                 </Button>
@@ -419,7 +421,7 @@ export default class Toolbar extends Component {
           )}
         </div>
         {isEditor && (
-          <div className="mr-14 mt-2 flex justify-end space-x-2">
+          <div className="mr-2 mt-2 flex justify-end gap-2 pr-[43px]">
             <UndoRedo />
           </div>
         )}

diff --git a/src/editor/components/viewport/CameraToolbar/CameraToolbar.scss b/src/editor/components/viewport/CameraToolbar/CameraToolbar.scss
@@ -3,10 +3,10 @@
 #cameraToolbar {
   align-items: center;
   display: flex;
-  column-gap: 12px;
+  column-gap: 0.5rem;
   background: rgba(55, 55, 55, 0.4);
   border-radius: 16px;
-  padding: 8px 12px;
+  padding: 6px 8px;
   transition: 0.2s ease-in-out;
   &:hover {
     background: rgba(55, 55, 55, 0.6);
@@ -21,7 +21,7 @@
     border-radius: 11px;
     transition: all 0.3s;
     font-size: 16px;
-    line-height: 19.2px;
+    line-height: 19px;
     font-weight: 400;
     &:hover {
       cursor: pointer;