From 3637950824142272ea12f17ad8cda020fb7926f3 Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Fri, 11 Oct 2024 10:52:37 -0400
Subject: [PATCH 1/4] rearrange data manager tabs and toolbar

---
 .../src/components/Common/RadioGroup/RadioGroup.scss     | 9 ++++++++-
 .../src/components/Common/Resizer/Resizer.scss           | 4 ++--
 .../datamanager/src/components/Common/Tabs/Tabs.scss     | 9 +++++++++
 .../src/components/DataManager/DataManager.jsx           | 2 +-
 .../src/components/DataManager/Toolbar/OrderButton.jsx   | 1 -
 .../src/components/DataManager/Toolbar/RefreshButton.jsx | 2 +-
 .../src/components/DataManager/Toolbar/ViewToggle.jsx    | 4 ++--
 .../src/components/DataManager/Toolbar/instruments.jsx   | 2 +-
 .../src/components/MainView/DataView/Table.scss          | 1 +
 web/libs/datamanager/src/sdk/dm-sdk.js                   | 2 +-
 10 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss b/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
index f216651fe6dd..aee51c2c9bc4 100644
--- a/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
+++ b/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
@@ -3,7 +3,7 @@
   --height: 40px;
   --padding: 4px;
   --font-size: 16px;
-  --button-padding: 0 10px;
+  --button-padding: 0 4px;
   --button-checked-shadow: 0px 1px 0px var(--black_10), 0px 0px 0px 1px var(--black_2), 0px 5px 10px var(--black_15);
 
   height: var(--height);
@@ -37,12 +37,19 @@
       opacity: 1;
       background-color: var(--white);
       box-shadow: var(--button-checked-shadow);
+      & svg {
+        color: var(--grape_500);
+      }
     }
 
     &_disabled {
       opacity: 0.3;
       cursor: not-allowed;
     }
+
+    & span {
+      display: flex;
+    }
   }
 
   &__input {
diff --git a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
index 9467852f2681..a67a271f22d6 100644
--- a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
+++ b/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 0 0 5px;
 
     &::before {
       top: 0;
diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss
index faf57b453fe6..117ae57be847 100644
--- a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss
+++ b/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 --git a/web/libs/datamanager/src/components/DataManager/DataManager.jsx b/web/libs/datamanager/src/components/DataManager/DataManager.jsx
index 7db811663a79..4aa40b1df2b3 100644
--- a/web/libs/datamanager/src/components/DataManager/DataManager.jsx
+++ b/web/libs/datamanager/src/components/DataManager/DataManager.jsx
@@ -43,7 +43,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 --git a/web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx
index 0de0585ae9dd..151a2ea2faf8 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx
+++ b/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 --git a/web/libs/datamanager/src/components/DataManager/Toolbar/RefreshButton.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/RefreshButton.jsx
index d4218b629d03..b3f7c23eb2d8 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/RefreshButton.jsx
+++ b/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 --git a/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
index 688d0b2537e2..bfaf94a1fb57 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
+++ b/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
@@ -15,10 +15,10 @@ export const ViewToggle = viewInjector(
     return (
       <RadioGroup size={size} value={view.type} onChange={(e) => view.setType(e.target.value)} {...rest}>
         <RadioGroup.Button value="list">
-          <Tooltip title="List view">{isDatasetsFF ? <LsList /> : <span>List</span>}</Tooltip>
+          <Tooltip title="List view">{isDatasetsFF ? <LsList /> : <span><LsList/></span>}</Tooltip>
         </RadioGroup.Button>
         <RadioGroup.Button value="grid">
-          <Tooltip title="Grid view">{isDatasetsFF ? <LsGrid /> : <span>Grid</span>}</Tooltip>
+          <Tooltip title="Grid view">{isDatasetsFF ? <LsGrid /> : <span><LsGrid/></span>}</Tooltip>
         </RadioGroup.Button>
       </RadioGroup>
     );
diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx
index e0fa2c979481..2f6769fbea7d 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx
+++ b/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 --git a/web/libs/datamanager/src/components/MainView/DataView/Table.scss b/web/libs/datamanager/src/components/MainView/DataView/Table.scss
index 97e6386634a4..5f742378aa59 100644
--- a/web/libs/datamanager/src/components/MainView/DataView/Table.scss
+++ b/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 {
diff --git a/web/libs/datamanager/src/sdk/dm-sdk.js b/web/libs/datamanager/src/sdk/dm-sdk.js
index 9b6575da941e..213cc683da07 100644
--- a/web/libs/datamanager/src/sdk/dm-sdk.js
+++ b/web/libs/datamanager/src/sdk/dm-sdk.js
@@ -55,7 +55,7 @@ import { LSFWrapper } from "./lsf-sdk";
 import { taskToLSFormat } from "./lsf-utils";
 
 const DEFAULT_TOOLBAR =
-  "actions columns filters ordering label-button loading-possum error-box | refresh import-button export-button view-toggle";
+  "actions columns filters ordering loading-possum error-box | refresh view-toggle import-button export-button label-button";
 
 const prepareInstruments = (instruments) => {
   const result = Object.entries(instruments).map(([name, builder]) => [name, builder({ inject, observer })]);

From 5347d2b7bf4e81c93648781fba98712dd140299f Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Fri, 11 Oct 2024 11:01:44 -0400
Subject: [PATCH 2/4] resizer spacing fix

---
 .../datamanager/src/components/Common/Resizer/Resizer.scss   | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
index a67a271f22d6..3e87af04a180 100644
--- a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
+++ b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
@@ -8,11 +8,6 @@
     }
   }
 
-  &__content {
-    margin-left: -4px;
-    padding-inline: 4px;
-  }
-
   &__handle {
     top: 0;
     height: 100%;

From 7d5a3338102918a1c412a04b35a41d0854e5e4ed Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Fri, 15 Nov 2024 12:48:26 -0500
Subject: [PATCH 3/4] revert back some changes

---
 web/libs/datamanager/src/components/App/App.scss      |  1 +
 .../src/components/Common/RadioGroup/RadioGroup.scss  | 11 ++++-------
 .../datamanager/src/components/Common/Tabs/Tabs.scss  |  2 +-
 .../src/components/DataManager/Toolbar/ViewToggle.jsx |  4 ++--
 web/libs/datamanager/src/sdk/dm-sdk.js                |  2 +-
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/libs/datamanager/src/components/App/App.scss b/web/libs/datamanager/src/components/App/App.scss
index 748813cfbeb6..6e69443adbcd 100644
--- a/web/libs/datamanager/src/components/App/App.scss
+++ b/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 --git a/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss b/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
index aee51c2c9bc4..773067eaa6be 100644
--- a/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
+++ b/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
@@ -3,13 +3,13 @@
   --height: 40px;
   --padding: 4px;
   --font-size: 16px;
-  --button-padding: 0 4px;
+  --button-padding: 0 10px;
   --button-checked-shadow: 0px 1px 0px var(--black_10), 0px 0px 0px 1px var(--black_2), 0px 5px 10px var(--black_15);
 
   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 {
@@ -37,9 +37,6 @@
       opacity: 1;
       background-color: var(--white);
       box-shadow: var(--button-checked-shadow);
-      & svg {
-        color: var(--grape_500);
-      }
     }
 
     &_disabled {
@@ -47,8 +44,8 @@
       cursor: not-allowed;
     }
 
-    & span {
-      display: flex;
+    & input{
+      cursor: pointer;
     }
   }
 
diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss
index 117ae57be847..21d2f5a023cd 100644
--- a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss
+++ b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss
@@ -119,7 +119,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    position: absolute;
+    position: absolute; 
     bottom: 0;
     z-index: 1000;
     width: 100%;
diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
index bfaf94a1fb57..688d0b2537e2 100644
--- a/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
+++ b/web/libs/datamanager/src/components/DataManager/Toolbar/ViewToggle.jsx
@@ -15,10 +15,10 @@ export const ViewToggle = viewInjector(
     return (
       <RadioGroup size={size} value={view.type} onChange={(e) => view.setType(e.target.value)} {...rest}>
         <RadioGroup.Button value="list">
-          <Tooltip title="List view">{isDatasetsFF ? <LsList /> : <span><LsList/></span>}</Tooltip>
+          <Tooltip title="List view">{isDatasetsFF ? <LsList /> : <span>List</span>}</Tooltip>
         </RadioGroup.Button>
         <RadioGroup.Button value="grid">
-          <Tooltip title="Grid view">{isDatasetsFF ? <LsGrid /> : <span><LsGrid/></span>}</Tooltip>
+          <Tooltip title="Grid view">{isDatasetsFF ? <LsGrid /> : <span>Grid</span>}</Tooltip>
         </RadioGroup.Button>
       </RadioGroup>
     );
diff --git a/web/libs/datamanager/src/sdk/dm-sdk.js b/web/libs/datamanager/src/sdk/dm-sdk.js
index 213cc683da07..9b6575da941e 100644
--- a/web/libs/datamanager/src/sdk/dm-sdk.js
+++ b/web/libs/datamanager/src/sdk/dm-sdk.js
@@ -55,7 +55,7 @@ import { LSFWrapper } from "./lsf-sdk";
 import { taskToLSFormat } from "./lsf-utils";
 
 const DEFAULT_TOOLBAR =
-  "actions columns filters ordering loading-possum error-box | refresh view-toggle import-button export-button label-button";
+  "actions columns filters ordering label-button loading-possum error-box | refresh import-button export-button view-toggle";
 
 const prepareInstruments = (instruments) => {
   const result = Object.entries(instruments).map(([name, builder]) => [name, builder({ inject, observer })]);

From b2e10787be61710dec933479d5e1751ba1b6b423 Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Wed, 20 Nov 2024 11:27:24 -0500
Subject: [PATCH 4/4] resizer fix

---
 .../datamanager/src/components/Common/Resizer/Resizer.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
index 3e87af04a180..2e520d1ee3ed 100644
--- a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
+++ b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss
@@ -8,6 +8,11 @@
     }
   }
 
+  &__content {
+    margin-left: -4px;
+    padding-inline: 4px;
+  }
+
   &__handle {
     top: 0;
     height: 100%;
@@ -15,7 +20,7 @@
     cursor: col-resize;
     z-index: 100;
     right: -12px;
-    padding: 0 0 0 5px;
+    padding: 0 5px;
 
     &::before {
       top: 0;