From 82ffee28d91b746f81907e8888c5cc645df66054 Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Sat, 16 Nov 2024 16:13:16 +0100
Subject: [PATCH] better align undo/redo buttons with the top buttons

---
 src/editor/components/components/Logo/Logo.component.jsx  | 2 +-
 .../components/components/UndoRedo/UndoRedo.component.jsx | 2 ++
 src/editor/components/scenegraph/Toolbar.js               | 8 +++++---
 .../components/viewport/CameraToolbar/CameraToolbar.scss  | 6 +++---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/editor/components/components/Logo/Logo.component.jsx b/src/editor/components/components/Logo/Logo.component.jsx
index 5cfdad60..b4464404 100644
--- 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
index 8e5d01ac..2bf99e49 100644
--- 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
index afee9633..b07d2379 100644
--- 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
index 5de47c9c..084d9518 100644
--- 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;