Font Adjustments (nebari-dev#359)

* Add typography letter spacing and font size theme configs. * Add new build. * Update to render headings with typography component. * Update remaining headings with typography components. Misc refactoring.
jbouder · Jun 25, 2024 · 0602d92 · 0602d92
1 parent 508864a
commit 0602d92
Show file tree

Hide file tree

Showing 14 changed files with 134 additions and 79 deletions.
diff --git a/jhub_apps/static/css/index.css b/jhub_apps/static/css/index.css
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -44,7 +44,6 @@ import {
   currentUser as defaultUser,
 } from '../../store';
 import { StyledFormSection } from '../../styles/styled-form-section';
-import { StyledFormSectionHeading } from '../../styles/styled-form-section-heading';
 import './app-form.css';
 
 export interface AppFormProps {
@@ -385,7 +384,9 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
       noValidate
     >
       <StyledFormSection>
-        <StyledFormSectionHeading>App Info</StyledFormSectionHeading>
+        <Typography component="h2" variant="subtitle1">
+          App Info
+        </Typography>
         <Controller
           name="display_name"
           control={control}
@@ -478,9 +479,10 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
           )}
         />
       </StyledFormSection>
-
       <StyledFormSection>
-        <StyledFormSectionHeading>Configuration</StyledFormSectionHeading>
+        <Typography component="h2" variant="subtitle1">
+          Configuration
+        </Typography>
         <Controller
           name="framework"
           control={control}
@@ -625,16 +627,18 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
         </Box>
       </StyledFormSection>
       <StyledFormSection>
-        <StyledFormSectionHeading>
+        <Typography component="h2" variant="subtitle1">
           Environment Variables
-        </StyledFormSectionHeading>
+        </Typography>
         <EnvironmentVariables
           variables={variables}
           setVariables={setVariables}
         />
       </StyledFormSection>
       <StyledFormSection>
-        <StyledFormSectionHeading>Sharing</StyledFormSectionHeading>
+        <Typography component="h2" variant="subtitle1">
+          Sharing
+        </Typography>
         <AppSharing
           url={formData?.url}
           permissions={formData?.user_options?.share_with}
@@ -645,7 +649,9 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
         />
       </StyledFormSection>
       <StyledFormSection sx={{ pb: '36px' }}>
-        <StyledFormSectionHeading>Custom Thumbnail</StyledFormSectionHeading>
+        <Typography component="h2" variant="subtitle1">
+          Custom Thumbnail
+        </Typography>
         <Controller
           name="thumbnail"
           control={control}

diff --git a/ui/src/components/app-sharing/app-sharing.tsx b/ui/src/components/app-sharing/app-sharing.tsx
@@ -198,7 +198,7 @@ export const AppSharing = ({
               </Alert>
             </Item>
             <Item sx={{ pb: '8px' }}>
-              <Typography variant="subtitle1">
+              <Typography variant="subtitle1" sx={{ fontWeight: 400, pb: 0 }}>
                 Individuals and group access
               </Typography>
               <Box

diff --git a/ui/src/pages/create-app/create-app.tsx b/ui/src/pages/create-app/create-app.tsx
@@ -1,10 +1,9 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBackRounded';
-import { Box, Button, Stack } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { AppForm } from '@src/components';
 import { APP_BASE_URL } from '@src/utils/constants';
 import { navigateToUrl } from '@src/utils/jupyterhub';
 import React from 'react';
-import { StyledFormHeading } from '../../styles/styled-form-heading';
 import { StyledFormParagraph } from '../../styles/styled-form-paragraph';
 import { Item } from '../../styles/styled-item';
 
@@ -27,7 +26,9 @@ export const CreateApp = (): React.ReactElement => {
           </div>
         </Item>
         <Item>
-          <StyledFormHeading>Create a new app</StyledFormHeading>
+          <Typography component="h1" variant="h5">
+            Create a new app
+          </Typography>
           <StyledFormParagraph>
             Begin your project by entering the details below. For more
             information about creating an app,{' '}

diff --git a/ui/src/pages/edit-app/edit-app.tsx b/ui/src/pages/edit-app/edit-app.tsx
@@ -1,11 +1,10 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBackRounded';
-import { Box, Button, Stack } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { AppForm } from '@src/components';
 import { APP_BASE_URL } from '@src/utils/constants';
 import { navigateToUrl } from '@src/utils/jupyterhub';
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { StyledFormHeading } from '../../styles/styled-form-heading';
 import { StyledFormParagraph } from '../../styles/styled-form-paragraph';
 import { Item } from '../../styles/styled-item';
 
@@ -31,9 +30,9 @@ export const EditApp = (): React.ReactElement => {
           </div>
         </Item>
         <Item>
-          <StyledFormHeading className="form-heading">
+          <Typography component="h1" variant="h5">
             Edit app
-          </StyledFormHeading>
+          </Typography>
           <StyledFormParagraph>
             Edit your app details here. For more information on editing your
             app,{' '}

diff --git a/ui/src/pages/home/apps-section/apps-section.tsx b/ui/src/pages/home/apps-section/apps-section.tsx
@@ -2,7 +2,15 @@ import AddIcon from '@mui/icons-material/AddRounded';
 import SearchIcon from '@mui/icons-material/Search';
 import InputAdornment from '@mui/material/InputAdornment';
 
-import { Box, Button, Divider, Grid, Stack, TextField } from '@mui/material';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
 import { JhApp } from '@src/types/jupyterhub';
 import { UserState } from '@src/types/user';
 import axios from '@src/utils/axios';
@@ -137,7 +145,9 @@ export const AppsSection = (): React.ReactElement => {
             <Grid container spacing={2} alignItems="center">
               <Grid item xs={12} md={4} sx={{ padding: '0' }}>
                 <Item>
-                  <h2>App Library</h2>
+                  <Typography component="h2" variant="h6">
+                    App Library
+                  </Typography>
                 </Item>
               </Grid>
               <Grid

diff --git a/ui/src/pages/home/home.css b/ui/src/pages/home/home.css
@@ -1,12 +1,3 @@
-.h5 {
-  /* typography/h5 */
-  font-family: 'Inter', sans-serif;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 133.4%;
-}
-
 .card-dialog-body-wrapper {
   padding: 0px 24px;
 }

diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx
@@ -9,6 +9,7 @@ import {
   Grid,
   Snackbar,
   SvgIcon,
+  Typography,
 } from '@mui/material';
 import { ButtonGroup } from '@src/components';
 import { AppQueryDeleteProps, AppQueryPostProps } from '@src/types/api';
@@ -269,10 +270,12 @@ export const Home = (): React.ReactElement => {
 
   return (
     <Box sx={{ flexGrow: 1 }} className="container">
-      <Grid container spacing={2} paddingBottom="32px">
+      <Grid container spacing={2} paddingBottom="24px">
         <Grid item xs={12} md={2}>
           <Item>
-            <h1 className="h5">Home</h1>
+            <Typography component="h1" variant="h5">
+              Home
+            </Typography>
           </Item>
         </Grid>
       </Grid>

diff --git a/ui/src/pages/home/services-section/services-section.tsx b/ui/src/pages/home/services-section/services-section.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Grid, Stack } from '@mui/material';
+import { Box, Divider, Grid, Stack, Typography } from '@mui/material';
 import { JhApp, JhServiceApp, JhServiceFull } from '@src/types/jupyterhub';
 import { UserState } from '@src/types/user';
 import axios from '@src/utils/axios';
@@ -86,7 +86,9 @@ export const ServicesSection = (): React.ReactElement => {
           <Grid container spacing={2}>
             <Grid item xs={12} md={4}>
               <Item>
-                <h2>Quick Access</h2>
+                <Typography component="h2" variant="h6">
+                  Quick Access
+                </Typography>
               </Item>
             </Grid>
           </Grid>

diff --git a/ui/src/pages/server-types/server-types.tsx b/ui/src/pages/server-types/server-types.tsx
@@ -9,6 +9,7 @@ import {
   Radio,
   RadioGroup,
   Stack,
+  Typography,
 } from '@mui/material';
 import { AppProfileProps, AppQueryUpdateProps } from '@src/types/api';
 import { AppFormInput } from '@src/types/form';
@@ -23,7 +24,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { StyledFormHeading } from 'src/styles/styled-form-heading';
 import { StyledFormParagraph } from 'src/styles/styled-form-paragraph';
 import { StyledFormSection } from 'src/styles/styled-form-section';
 import { Item } from 'src/styles/styled-item';
@@ -221,7 +221,9 @@ export const ServerTypes = (): React.ReactElement => {
           </div>
         </Item>
         <Item>
-          <StyledFormHeading>Server Type</StyledFormHeading>
+          <Typography component="h1" variant="h5">
+            Server Type
+          </Typography>
           <StyledFormParagraph>
             Please select the appropriate server for your app. For more
             information on server types,{' '}

diff --git a/ui/src/styles/styled-form-heading.tsx b/ui/src/styles/styled-form-heading.tsx
diff --git a/ui/src/styles/styled-form-section-heading.tsx b/ui/src/styles/styled-form-section-heading.tsx
diff --git a/ui/src/theme/theme.tsx b/ui/src/theme/theme.tsx
@@ -69,6 +69,61 @@ declare module '@mui/material/styles' {
 const baseTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif',
+    h1: {
+      letterSpacing: '-1.5px',
+      fontSize: '96px',
+    },
+    h2: {
+      letterSpacing: '0.5px',
+      fontSize: '60px',
+    },
+    h3: {
+      letterSpacing: '0px',
+      fontSize: '48px',
+    },
+    h4: {
+      letterSpacing: '0.25px',
+      fontSize: '34px',
+    },
+    h5: {
+      letterSpacing: '0px',
+      fontSize: '24px',
+      fontWeight: 600,
+      paddingBottom: '16px',
+    },
+    h6: {
+      letterSpacing: '0.15px',
+      fontSize: '20px',
+      fontWeight: 700,
+      paddingBottom: '16px',
+    },
+    subtitle1: {
+      letterSpacing: '0.15px',
+      fontSize: '16px',
+      fontWeight: 600,
+      paddingBottom: '24px',
+    },
+    subtitle2: {
+      letterSpacing: '0.1px',
+      fontSize: '14px',
+      fontWeight: 500,
+      paddingBottom: '24px',
+    },
+    body1: {
+      letterSpacing: '0.15px',
+      fontSize: '16px',
+    },
+    body2: {
+      letterSpacing: '0.17px',
+      fontSize: '14px',
+    },
+    caption: {
+      letterSpacing: '0.4px',
+    },
+    overline: {
+      letterSpacing: '1px',
+      fontSize: '12px',
+    },
   },
   components: {
     MuiButtonBase: {