feat: OPTIC-1197: rearrange data manager tabs and toolbar (#6503)

Co-authored-by: carly-bartel <[email protected]>
Co-authored-by: yyassi-heartex <[email protected]>

Author: carly-bartel

Diff for: web/libs/datamanager/src/components/App/App.scss

@@ -9,6 +9,7 @@
   padding: 12px 16px;
   background-color: var(--sand_0);
   justify-content: space-between;
+  border-bottom: 1px solid var(--sand_300);
 
   &_newUI {
     padding: 8px;

Diff for: web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss

@@ -9,7 +9,7 @@
   height: var(--height);
   border-radius: var(--radius);
   padding: var(--padding);
-  background: linear-gradient(0deg, var(--black_5), var(--black_5)), #FFF;
+  background: var(--sand_100);
   box-shadow: inset 0 1px 0 var(--black_5), inset 0 0 0 1px var(--black_5);
 
   &__buttons {
@@ -43,6 +43,10 @@
       opacity: 0.3;
       cursor: not-allowed;
     }
+
+    & input{
+      cursor: pointer;
+    }
   }
 
   &__input {

Diff for: web/libs/datamanager/src/components/Common/Resizer/Resizer.scss

@@ -15,12 +15,12 @@
 
   &__handle {
     top: 0;
-    left: 100%;
     height: 100%;
-    padding: 0 5px;
     position: absolute;
     cursor: col-resize;
     z-index: 100;
+    right: -12px;
+    padding: 0 5px;
 
     &::before {
       top: 0;

Diff for: web/libs/datamanager/src/components/Common/Tabs/Tabs.scss

@@ -119,5 +119,14 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    position: absolute; 
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    right: 0;
+    left: 0;
+    background: var(--sand_200);
+    border-top: 1px solid var(--sand_300);
+    padding: .625rem 1rem;
   }
 }

Diff for: web/libs/datamanager/src/components/DataManager/DataManager.jsx

@@ -45,7 +45,7 @@ const switchInjector = inject(({ store }) => {
 
 const ProjectSummary = summaryInjector((props) => {
   return (
-    <Space size="large" style={{ paddingRight: "1em", color: "rgba(0,0,0,0.3)" }}>
+    <Space size="large" style={{ paddingRight: "1em" }}>
       {props.cloudSync && (
         <Space size="small" style={{ fontSize: 12, fontWeight: 400, opacity: 0.8 }}>
           Storage sync

Diff for: web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx

@@ -16,7 +16,6 @@ const injector = inject(({ store }) => {
 export const OrderButton = injector(({ size, ordering, view, ...rest }) => {
   return (
     <Space style={{ fontSize: 12 }}>
-      Order
       <Button.Group collapsed {...rest}>
         <FieldsButton
           size={size}

Diff for: web/libs/datamanager/src/components/DataManager/Toolbar/RefreshButton.jsx

@@ -17,7 +17,7 @@ export const RefreshButton = injector(({ store, needsDataFetch, projectFetch, si
   return (
     <Button
       size={size}
-      look={needsDataFetch && "primary"}
+      look={needsDataFetch}
       waiting={projectFetch}
       onClick={async () => {
         await store.fetchProject({ force: true, interaction: "refresh" });

Diff for: web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx

@@ -17,7 +17,7 @@ import { RefreshButton } from "./RefreshButton";
 import { ViewToggle } from "./ViewToggle";
 
 const style = {
-  minWidth: "110px",
+  minWidth: "80px",
   justifyContent: "space-between",
 };
 

Diff for: web/libs/datamanager/src/components/MainView/DataView/Table.scss

@@ -4,6 +4,7 @@
   overflow: hidden;
   flex-direction: column;
   background: var(--sand_0);
+  margin-bottom: 2.5rem;
 }
 
 .no-results {