search styling updates

openml · Jun 18, 2023 · b1b193e · b1b193e
1 parent ad791d7
commit b1b193e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js
@@ -75,7 +75,7 @@ const FilterTab = styled(Tab)`
   }
 `;
 
-let alignment = "left";
+let alignment = "list";
 const handleAlignment = (event, newAlignment) => {
   alignment = newAlignment;
 };
@@ -142,10 +142,10 @@ const ViewToggle = () => (
       ml: 2,
     }}
   >
-    <ToggleButton value="left">
+    <ToggleButton value="list">
       <FontAwesomeIcon icon={faList} />
     </ToggleButton>
-    <ToggleButton value="right">
+    <ToggleButton value="table">
       <FontAwesomeIcon icon={faTable} />
     </ToggleButton>
   </ToggleButtonGroup>

diff --git a/app/src/layouts/Dashboard.js b/app/src/layouts/Dashboard.js
@@ -27,8 +27,7 @@ const Drawer = styled.div`
   }
 `;
 
-const AppContent = styled.div`
-  flex: 1;
+const AppContent = styled(Box)`
   display: flex;
   flex-direction: column;
   max-width: 100%;
@@ -90,7 +89,12 @@ const Dashboard = ({ children }) => {
           />
         </Box>
       </Drawer>
-      <AppContent>
+      <AppContent
+        sx={{
+          flexGrow: 1,
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+        }}
+      >
         <Navbar onDrawerToggle={handleDrawerToggle} ecolor={ecolor} />
         <MainContent>{children}</MainContent>
         {/*<Footer />*/}

diff --git a/app/src/theme/variants.js b/app/src/theme/variants.js
@@ -128,7 +128,7 @@ const defaultVariant = {
       color: grey[200],
       background: "#233044",
       brand: {
-        color: customBlue[500],
+        color: "rgba(0, 0, 0, 0.5)",
       },
     },
     footer: {
@@ -164,6 +164,13 @@ const darkVariant = merge(defaultVariant, {
     entity: openmlColors,
     icon: openmlIcons,
   },
+  sidebar: {
+    header: {
+      brand: {
+        color: "rgba(255, 255, 255, 0.5)",
+      },
+    },
+  },
   header: {
     color: grey[300],
     background: "#1B2635",
@@ -244,7 +251,7 @@ const indigoVariant = merge(defaultVariant, {
       color: "#FFF",
       background: indigo[800],
       brand: {
-        color: "#FFFFFF",
+        color: "rgba(0, 0, 0, 0.5)",
       },
     },
     footer: {