reduce padding and fontsizes & update side bar

Datawheel · Jul 18, 2024 · 0e7f235 · 0e7f235
1 parent 890eeb6
commit 0e7f235
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 44 deletions.
diff --git a/src/components/Explorer.tsx b/src/components/Explorer.tsx
@@ -201,7 +201,24 @@ export function ExplorerComponent(props: {
             "[data-state='expanded']": {
               width: 350
             }
-          })
+          }),
+          components: {
+            Text: {
+              styles: theme => ({
+                root: {
+                  fontSize: theme.fontSizes.sm // Apply small font size to Text component
+                }
+              })
+            }
+            // Add other component customizations here
+          },
+          fontSizes: {
+            xs: "0.75rem",
+            sm: "0.875rem",
+            md: "1rem",
+            lg: "1.125rem",
+            xl: "1.25rem"
+          }
         }}
       >
         {content}

diff --git a/src/components/Results.tsx b/src/components/Results.tsx
@@ -134,20 +134,13 @@ export const useStyles = createStyles(theme => ({
   link: {
     ...theme.fn.focusStyles(),
     WebkitTapHighlightColor: "transparent",
-    borderLeft: `${rem(1)} solid ${
-      theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3]
-    }`,
     outline: 0,
     display: "block",
     textDecoration: "none",
     color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
     paddingLeft: rem(23),
-    paddingRight: theme.spacing.md,
-    marginLeft: rem(7),
     height: rem(44),
     lineHeight: rem(44),
-    borderTopRightRadius: theme.radius.sm,
-    borderBottomRightRadius: theme.radius.sm,
     fontSize: theme.fontSizes.md,
     cursor: "pointer",
     "&:hover": {
@@ -159,7 +152,6 @@ export const useStyles = createStyles(theme => ({
   },
 
   linkActive: {
-    // borderLeftColor: theme.colors.blue[7],
     backgroundColor:
       theme.colorScheme === "dark"
         ? theme.fn.rgba(theme.colors.blue[9], 0.45)

diff --git a/src/components/SelectCubes.tsx b/src/components/SelectCubes.tsx
@@ -169,8 +169,6 @@ function getCube(items: AnnotatedCube[], table: string, subtopic: string, locale
 }
 
 function useBuildGraph(items, locale, graph, setGraph) {
-  // const [graph, setGraph] = useState<Graph>(new Graph());
-
   useEffect(() => {
     const graph = new Graph();
     items.map(item => {

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -65,7 +65,7 @@ function SideBar(props: PropsWithChildren<SidebarProps>) {
 
   return (
     <Box
-      p="md"
+      p="sm"
       sx={t => ({
         height: "calc(100vh - 90px)",
         border: "1px solid",

diff --git a/src/components/TableView.tsx b/src/components/TableView.tsx
@@ -278,32 +278,32 @@ export function useTable({
         },
         Header: ({column}) => {
           return (
-            <Box mb={rem(10)}>
+            <Box mb={rem(5)}>
               <Flex justify="center" align="center">
                 <Box sx={{flexGrow: 1}}>
-                  <Flex gap={rem(10)}>
+                  <Flex gap="xs" align="center">
                     {getActionIcon(entityType)}
-                    <Text size="md" color="black" fs={rem(16)}>
+                    <Text size="md" color="black">
                       {column.columnDef.header}
                     </Text>
                     <ActionIcon
                       key={`sort-${column.columnDef.header}`}
                       size={22}
-                      ml={rem(8)}
+                      ml={rem(5)}
                       onClick={column.getToggleSortingHandler()}
                     >
                       {getSortIcon(column.getIsSorted(), entityType)}
                     </ActionIcon>
                   </Flex>
-                  <Text ml={rem(35)} size="sm" color="dimmed" fw="normal">
+                  <Text ml={rem(30)} size="sm" color="dimmed" fw="normal">
                     {getEntityText(entityType)}
                   </Text>
                 </Box>
                 <ActionIcon
                   disabled={!showTrashIcon(finalKeys, entityType)}
                   key={`remove-${column.columnDef.header}`}
                   size={25}
-                  ml={rem(8)}
+                  ml={rem(5)}
                   onClick={() => removeColumn(actions, entity, measures, drilldowns)}
                 >
                   <IconTrash />
@@ -324,20 +324,20 @@ export function useTable({
           return item[columnKey];
         },
         // not needed in headless implementation. possibly remove.
-        mantineTableHeadCellProps: {
-          sx: theme => ({
-            // backgroundColor: getEntityColor(column.entityType, theme),
-            align: isNumeric ? "right" : "left",
-            height: 140,
-            paddingBottom: 15,
-            "& .mantine-TableHeadCell-Content": {
-              justifyContent: "space-between",
-              "& .mantine-Indicator-root": {
-                display: "none"
-              }
-            }
-          })
-        },
+        // mantineTableHeadCellProps: {
+        //   sx: theme => ({
+        //     // backgroundColor: getEntityColor(column.entityType, theme),
+        //     align: isNumeric ? "right" : "left",
+        //     height: 100,
+        //     paddingBottom: 15,
+        //     "& .mantine-TableHeadCell-Content": {
+        //       justifyContent: "space-between",
+        //       "& .mantine-Indicator-root": {
+        //         display: "none"
+        //       }
+        //     }
+        //   })
+        // },
         Cell: isNumeric
           ? ({cell}) => formatter(cell.getValue<number>())
           : ({renderedCellValue}) => {
@@ -480,14 +480,7 @@ export function TableView({table}: TableView) {
               }}
             >
               {table.getHeaderGroups().map(headerGroup => (
-                <Box
-                  component="tr"
-                  key={headerGroup.id}
-                  sx={{
-                    height: 140,
-                    paddingBottom: 15
-                  }}
-                >
+                <Box component="tr" key={headerGroup.id}>
                   {headerGroup.headers.map(header => {
                     const column = table.getColumn(header.id);
                     if (column.id !== "mrt-row-numbers") {
@@ -498,11 +491,10 @@ export function TableView({table}: TableView) {
                           key={header.id}
                           sx={theme => ({
                             backgroundColor: theme.colors.gray[0],
-                            // backgroundColor: "white",
                             align: isNumeric ? "right" : "left",
-                            height: 140,
-                            paddingBottom: 15,
-                            width: 350,
+                            height: 60,
+                            paddingBottom: 10,
+                            width: 300,
                             position: "sticky",
                             top: 0,
                             display: "table-cell"