From cf1857e8986deeefc993e5d60190f9439b75814b Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Fri, 2 Jul 2021 11:19:59 +1000
Subject: [PATCH] update caption text style

---
 www/src/Themes.tsx                                          | 4 ++--
 www/src/components/Navigation/Breadcrumbs.tsx               | 2 +-
 www/src/components/SideDrawer/Form/FieldWrapper.tsx         | 2 +-
 www/src/components/Table/ColumnHeader.tsx                   | 6 +++---
 www/src/components/Table/Filters/index.tsx                  | 5 +++++
 www/src/components/Wizards/Column.tsx                       | 2 +-
 www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx | 2 +-
 www/src/components/Wizards/ImportWizard/Step1Columns.tsx    | 2 +-
 www/src/components/Wizards/ImportWizard/Step2Rename.tsx     | 2 +-
 www/src/pages/Home.tsx                                      | 6 ++----
 10 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/www/src/Themes.tsx b/www/src/Themes.tsx
index 3065f618..a7074333 100644
--- a/www/src/Themes.tsx
+++ b/www/src/Themes.tsx
@@ -83,9 +83,9 @@ export const themeBase = {
     },
     subtitle2: {
       fontFamily: HEADING_FONT,
-      fontSize: toRem(16),
+      fontSize: toRem(14),
       fontWeight: "bold",
-      letterSpacing: toEm(0.4, 16),
+      letterSpacing: toEm(0.4, 14),
       lineHeight: 1.5,
     },
     body1: {
diff --git a/www/src/components/Navigation/Breadcrumbs.tsx b/www/src/components/Navigation/Breadcrumbs.tsx
index 2546dd8f..660a87b1 100644
--- a/www/src/components/Navigation/Breadcrumbs.tsx
+++ b/www/src/components/Navigation/Breadcrumbs.tsx
@@ -84,7 +84,7 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
         // If it’s the first breadcrumb, show with specific style
         const crumbProps = {
           key: index,
-          variant: index === 0 ? "h6" : "caption",
+          variant: index === 0 ? "h6" : "subtitle2",
           component: index === 0 ? "h2" : "div",
           color: index === 0 ? "textPrimary" : "textSecondary",
         } as const;
diff --git a/www/src/components/SideDrawer/Form/FieldWrapper.tsx b/www/src/components/SideDrawer/Form/FieldWrapper.tsx
index 0990c362..82e5eb2a 100644
--- a/www/src/components/SideDrawer/Form/FieldWrapper.tsx
+++ b/www/src/components/SideDrawer/Form/FieldWrapper.tsx
@@ -72,7 +72,7 @@ export default function FieldWrapper({
           {type === "debug" ? <DebugIcon /> : getFieldProp("icon", type)}
         </Grid>
         <Grid item xs>
-          <Typography variant="caption">{label}</Typography>
+          <Typography variant="subtitle2">{label}</Typography>
         </Grid>
         {disabled && (
           <Grid item>
diff --git a/www/src/components/Table/ColumnHeader.tsx b/www/src/components/Table/ColumnHeader.tsx
index ce79eb57..78346d65 100644
--- a/www/src/components/Table/ColumnHeader.tsx
+++ b/www/src/components/Table/ColumnHeader.tsx
@@ -186,7 +186,7 @@ export default function DraggableHeaderRenderer<R>({
       <Tooltip
         title={
           <>
-            <Typography variant="caption" component="p">
+            <Typography variant="subtitle2" component="p">
               {column.key as string}
             </Typography>
             <Typography variant="body2" component="p">
@@ -209,7 +209,7 @@ export default function DraggableHeaderRenderer<R>({
 
       <Grid item xs className={classes.columnNameContainer}>
         <Tooltip
-          title={<Typography variant="caption">{column.name}</Typography>}
+          title={<Typography variant="subtitle2">{column.name}</Typography>}
           enterDelay={1000}
           placement="bottom-start"
           PopperProps={{
@@ -226,7 +226,7 @@ export default function DraggableHeaderRenderer<R>({
           classes={{ tooltip: classes.columnNameTooltip }}
         >
           <Typography
-            variant="caption"
+            variant="subtitle2"
             noWrap
             className={classes.columnName}
             component="div"
diff --git a/www/src/components/Table/Filters/index.tsx b/www/src/components/Table/Filters/index.tsx
index 3ee32e00..f8a5fdc1 100644
--- a/www/src/components/Table/Filters/index.tsx
+++ b/www/src/components/Table/Filters/index.tsx
@@ -108,6 +108,10 @@ const useStyles = makeStyles((theme) =>
       marginLeft: -1,
       borderColor: theme.palette.action.disabled,
     },
+    filterChipLabel: {
+      ...theme.typography.subtitle2,
+      lineHeight: 1,
+    },
     filterChipDelete: {
       color: theme.palette.primary.main,
       "&:hover": { color: theme.palette.primary.dark },
@@ -363,6 +367,7 @@ const Filters = () => {
             onDelete={() => handleUpdateFilters([])}
             classes={{
               root: classes.filterChip,
+              label: classes.filterChipLabel,
               deleteIcon: classes.filterChipDelete,
             }}
             variant="outlined"
diff --git a/www/src/components/Wizards/Column.tsx b/www/src/components/Wizards/Column.tsx
index 386c5ccc..e6321d1b 100644
--- a/www/src/components/Wizards/Column.tsx
+++ b/www/src/components/Wizards/Column.tsx
@@ -94,7 +94,7 @@ export default function Column({
         <Typography
           component={Grid}
           item
-          variant="caption"
+          variant="subtitle2"
           noWrap
           className={classes.columnName}
         >
diff --git a/www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx b/www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
index 3066db4b..dee9e507 100644
--- a/www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
+++ b/www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) =>
       border: `1px solid ${theme.palette.divider}`,
       borderRadius: 0,
 
-      ...theme.typography.caption,
+      ...theme.typography.subtitle2,
       color: theme.palette.text.secondary,
       transition: theme.transitions.create("color", {
         duration: theme.transitions.duration.short,
diff --git a/www/src/components/Wizards/ImportWizard/Step1Columns.tsx b/www/src/components/Wizards/ImportWizard/Step1Columns.tsx
index a984dd2f..dc6b9131 100644
--- a/www/src/components/Wizards/ImportWizard/Step1Columns.tsx
+++ b/www/src/components/Wizards/ImportWizard/Step1Columns.tsx
@@ -126,7 +126,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
                 />
               }
               label={
-                <Typography variant="caption" color="textSecondary">
+                <Typography variant="subtitle2" color="textSecondary">
                   Select all
                 </Typography>
               }
diff --git a/www/src/components/Wizards/ImportWizard/Step2Rename.tsx b/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
index d0ac32a3..515bbe8e 100644
--- a/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
+++ b/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) =>
       boxShadow: `0 0 0 1px inset ${theme.palette.divider}`,
       backgroundColor: theme.palette.background.default + " !important",
 
-      ...theme.typography.caption,
+      ...theme.typography.subtitle2,
     },
     inputHiddenLabel: {
       paddingTop: theme.spacing(14 / 8) + 1,
diff --git a/www/src/pages/Home.tsx b/www/src/pages/Home.tsx
index 01e21c55..e4f8d5d0 100644
--- a/www/src/pages/Home.tsx
+++ b/www/src/pages/Home.tsx
@@ -50,8 +50,6 @@ const useStyles = makeStyles((theme) =>
     },
     sectionHeader: {
       color: theme.palette.text.secondary,
-      textTransform: "uppercase",
-      letterSpacing: `${2 / 13}em`,
     },
     divider: { margin: theme.spacing(1, 0, 3) },
 
@@ -236,7 +234,7 @@ export default function HomePage() {
           {favs.length !== 0 && (
             <section id="favorites" className={classes.section}>
               <Typography
-                variant="subtitle2"
+                variant="h6"
                 component="h1"
                 className={classes.sectionHeader}
               >
@@ -264,7 +262,7 @@ export default function HomePage() {
                 className={classes.section}
               >
                 <Typography
-                  variant="subtitle2"
+                  variant="h6"
                   component="h1"
                   className={classes.sectionHeader}
                 >