Merge pull request #497 from Irev-Dev/franknoirot/style-tweaks

minor style tweaks to editor

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -26,7 +26,7 @@ const EditorMenu = () => {
   return (
     <div className="flex justify-between bg-ch-gray-760 text-gray-100">
       <div className="flex items-center h-9 w-full cursor-grab">
-        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-1.5 h-full flex items-center">
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
         <div className="grid grid-flow-col-dense gap-6 px-5">

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -102,9 +102,9 @@ const IdeHeader = ({
               <TopButton
                 onClick={onClick}
                 name="Save Project Image"
-                className=" bg-ch-gray-300 bg-opacity-70 hover:bg-opacity-90 text-ch-gray-900"
+                className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
               >
-                <Svg name="camera" className="w-6 h-6" />
+                <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
               </TopButton>
             )}
           />

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -4,17 +4,17 @@ import Svg from 'src/components/Svg/Svg'
 const IdeSideBar = () => {
   return (
     <div className="h-full flex flex-col justify-between">
-      <div className="w-16 h-16 flex items-center justify-center bg-ch-gray-900">
+      <div className="w-14 h-16 flex items-center justify-center bg-ch-gray-900">
         <Link to={routes.home()}>
-          <Svg className="w-12" name="favicon" />
+          <Svg className="w-12 p-0.5" name="favicon" />
         </Link>
       </div>
       <button
-        className="text-gray-300 p-2 pb-4 flex justify-center cursor-not-allowed"
+        className="text-gray-300 p-3 pb-6 flex justify-center cursor-not-allowed"
         aria-label="IDE settings"
         disabled
       >
-        <Svg name="big-gear" />
+        <Svg name="gear" />
       </button>
     </div>
   )

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -25,7 +25,7 @@ const IdeWrapper = ({ cadPackage }: Props) => {
 
   return (
     <div className="h-full flex">
-      <div className="w-16 bg-ch-gray-700 flex-shrink-0">
+      <div className="w-14 bg-ch-gray-700 flex-shrink-0">
         <IdeSideBar />
       </div>
       <div className="h-full flex flex-grow flex-col">

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -20,7 +20,7 @@ const menuOptions: {
 const NavPlusButton: React.FC = () => {
   return (
     <Popover className="relative outline-none w-full h-full">
-      <Popover.Button className="h-full w-full outline-none">
+      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
         <Svg name="plus" className="text-gray-200" />
       </Popover.Button>
 

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -23,10 +23,10 @@ const PanelToolbar = ({
           aria-label={`${panelName} settings`}
           disabled
         >
-          <Svg name="gear" className="w-7 p-px" />
+          <Svg name="gear" className="w-7 p-0.5" />
         </button>
         {mosaicWindowActions.connectDragSource(
-          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-1.5 h-full flex items-center">
             <Svg name="drag-grid" className="w-4 p-px" />
           </div>
         )}