STUD-292: Replace NEWM Typography with MUI for consistency (#704)

projectNEWM · Jul 31, 2024 · 10140f8 · 10140f8
1 parent bdeeb1e
commit 10140f8
Show file tree

Hide file tree

Showing 41 changed files with 159 additions and 160 deletions.
diff --git a/apps/studio/src/components/home/LogoutButton.tsx b/apps/studio/src/components/home/LogoutButton.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from "react";
-import { Button, Typography } from "@newm-web/elements";
+import { Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { logOut, selectSession } from "../../modules/session";
 import { useAppDispatch, useAppSelector } from "../../common";

diff --git a/apps/studio/src/components/invites/InvitesModal.tsx b/apps/studio/src/components/invites/InvitesModal.tsx
@@ -6,8 +6,9 @@ import {
   DialogContentText,
   DialogTitle,
   Stack,
+  Typography,
 } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Button } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import InvitesTable from "./InvitesTable";
 import {

diff --git a/apps/studio/src/components/library/IconStatus.tsx b/apps/studio/src/components/library/IconStatus.tsx
@@ -1,6 +1,5 @@
 import { FunctionComponent } from "react";
-import { Stack, Theme } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Stack, Theme, Typography } from "@mui/material";
 import theme from "@newm-web/theme";
 
 export interface IconStatusProps {
@@ -31,7 +30,7 @@ const IconStatus: FunctionComponent<IconStatusProps> = ({
   >
     { icon }
 
-    <Typography color={ fontColor } fontWeight={ 400 }>
+    <Typography color={ theme.colors[fontColor] } fontWeight={ 400 }>
       { status }
     </Typography>
   </Stack>

diff --git a/apps/studio/src/components/minting/ConfirmContract.tsx b/apps/studio/src/components/minting/ConfirmContract.tsx
@@ -1,8 +1,9 @@
-import { Box, Stack } from "@mui/material";
-import { CheckboxField, HorizontalLine, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography } from "@mui/material";
+import { CheckboxField, HorizontalLine } from "@newm-web/elements";
 import { Formik, FormikProps } from "formik";
 import { FunctionComponent, useEffect } from "react";
 import { artistAgreementPreview } from "@newm-web/assets";
+import theme from "@newm-web/theme";
 import { selectSong } from "../../modules/song";
 import { useAppSelector } from "../../common";
 import ViewPDF from "../ViewPDF";
@@ -82,7 +83,7 @@ const FormContent: FunctionComponent<FormContentProps> = ({
   return (
     <Box>
       <Stack direction="column" spacing={ 1 }>
-        <Typography color="grey100" fontWeight={ 500 }>
+        <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
           View your contract here
         </Typography>
 
@@ -98,13 +99,21 @@ const FormContent: FunctionComponent<FormContentProps> = ({
         <CheckboxField
           label={
             isCoCreator ? (
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 I confirm that I am the primary creator of{ " " }
                 <strong>{ songTitle }</strong> and all mentioned collaborators are
                 accurate.
               </Typography>
             ) : (
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 I confirm that I am the exclusive creator of{ " " }
                 <strong>{ songTitle }.</strong>
               </Typography>
@@ -130,10 +139,18 @@ const FormContent: FunctionComponent<FormContentProps> = ({
           name="agreesToContract"
         />
 
-        <Typography color="white" fontSize={ 12 } variant="subtitle1">
+        <Typography
+          color={ theme.colors.white }
+          fontSize={ 12 }
+          variant="subtitle1"
+        >
           <CheckboxField
             label={
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 By selecting &lsquo;Distribute & Mint&rsquo; you agree to
                 distribute this song to all current and future available stores
                 including digital downloads.
@@ -145,7 +162,11 @@ const FormContent: FunctionComponent<FormContentProps> = ({
 
         <HorizontalLine style={ { marginTop: "24px" } } />
 
-        <Typography color="white" fontSize={ 12 } variant="subtitle1">
+        <Typography
+          color={ theme.colors.white }
+          fontSize={ 12 }
+          variant="subtitle1"
+        >
           The distribution and minting process may take 3-15 days to complete.
         </Typography>
       </Stack>

diff --git a/apps/studio/src/components/minting/Creditors.tsx b/apps/studio/src/components/minting/Creditors.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, Stack, useTheme } from "@mui/material";
-import { Button, DropdownSelectField, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, DropdownSelectField } from "@newm-web/elements";
 import Details from "./Details";
 import {
   Creditor,
@@ -44,10 +44,10 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
   return (
     <Box>
       <Stack flexDirection="row" justifyContent="space-between" mb={ -0.5 }>
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           CREDITS TO SHOW ON SONG DETAIL
         </Typography>
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           ROLES
         </Typography>
       </Stack>
@@ -87,7 +87,7 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
                   placeholder="Select role"
                 />
               ) : (
-                <Typography color="white" fontWeight={ 500 }>
+                <Typography color={ theme.colors.white } fontWeight={ 500 }>
                   { creditor.role }
                 </Typography>
               ) }

diff --git a/apps/studio/src/components/minting/Owners.tsx b/apps/studio/src/components/minting/Owners.tsx
@@ -1,13 +1,14 @@
 import { FunctionComponent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import HelpIcon from "@mui/icons-material/Help";
-import { Box, IconButton, InputAdornment, Stack } from "@mui/material";
 import {
-  Button,
-  TextInputField,
-  Tooltip,
+  Box,
+  IconButton,
+  InputAdornment,
+  Stack,
   Typography,
-} from "@newm-web/elements";
+} from "@mui/material";
+import { Button, TextInputField, Tooltip } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import Details from "./Details";
 import { emptyProfile, useGetProfileQuery } from "../../modules/session";
@@ -53,7 +54,7 @@ const Owners: FunctionComponent<OwnersProps> = ({
     <Box>
       <Stack flexDirection="row" justifyContent="space-between">
         <Stack columnGap={ 1 } flexDirection="row" mt={ 1.5 }>
-          <Typography color="grey100" variant="h5">
+          <Typography color={ theme.colors.grey100 } variant="h5">
             ROYALTY SPLIT HOLDERS
           </Typography>
 
@@ -75,7 +76,7 @@ const Owners: FunctionComponent<OwnersProps> = ({
           </Tooltip>
         </Stack>
 
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           SPLITS
         </Typography>
       </Stack>

diff --git a/apps/studio/src/components/minting/SelectCoCreators.tsx b/apps/studio/src/components/minting/SelectCoCreators.tsx
@@ -1,11 +1,6 @@
-import { IconButton, Stack } from "@mui/material";
+import { IconButton, Stack, Typography } from "@mui/material";
 import HelpIcon from "@mui/icons-material/Help";
-import {
-  Button,
-  HorizontalLine,
-  Tooltip,
-  Typography,
-} from "@newm-web/elements";
+import { Button, HorizontalLine, Tooltip } from "@newm-web/elements";
 import { Formik, FormikProps } from "formik";
 import { FunctionComponent, useEffect, useState } from "react";
 import theme from "@newm-web/theme";
@@ -140,7 +135,7 @@ const FormContent: FunctionComponent<FormContentProps> = ({
         <>
           <HorizontalLine sx={ { my: 5 } } />
 
-          <Typography color="grey100" mb={ -0.5 } variant="h5">
+          <Typography color={ theme.colors.grey100 } mb={ -0.5 } variant="h5">
             FEATURED ARTISTS
           </Typography>
 

diff --git a/apps/studio/src/pages/createProfile/Begin.tsx b/apps/studio/src/pages/createProfile/Begin.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useEffect } from "react";
-import { Box, useTheme } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import { GradientTypography, Typography } from "@newm-web/elements";
+import { GradientTypography } from "@newm-web/elements";
 import { ResponsiveNEWMLogo } from "../../components";
 
 const Begin: FunctionComponent = () => {

diff --git a/apps/studio/src/pages/createProfile/Complete.tsx b/apps/studio/src/pages/createProfile/Complete.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box, Link, useTheme } from "@mui/material";
-import { Button, GradientTypography, Typography } from "@newm-web/elements";
+import { Box, Link, Typography, useTheme } from "@mui/material";
+import { Button, GradientTypography } from "@newm-web/elements";
 import { ResponsiveNEWMLogo } from "../../components";
 import {
   NEWM_PRIVACY_POLICY_URL,
@@ -46,7 +46,7 @@ const Complete: FunctionComponent = () => {
           Enter NEWM
         </Button>
 
-        <Typography color="grey200" variant="subtitle1">
+        <Typography color={ theme.colors.grey200 } variant="subtitle1">
           By clicking &apos;Enter NEWM&apos;, you agree to
           <br />
           NEWM&apos;s{ " " }

diff --git a/apps/studio/src/pages/forgotPassword/InitiateReset.tsx b/apps/studio/src/pages/forgotPassword/InitiateReset.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Button, TextInputField, Typography } from "@newm-web/elements";
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, TextInputField } from "@newm-web/elements";
 
 const InitiateReset: FunctionComponent = () => {
   const theme = useTheme();

diff --git a/apps/studio/src/pages/forgotPassword/ResetPassword.tsx b/apps/studio/src/pages/forgotPassword/ResetPassword.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useState } from "react";
 import { FormikValues, useFormikContext } from "formik";
-import { Box, Stack, useTheme } from "@mui/material";
-import { Button, PasswordInputField, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, PasswordInputField } from "@newm-web/elements";
 
 const ResetPassword: FunctionComponent = () => {
   const theme = useTheme();

diff --git a/apps/studio/src/pages/home/SideBar.tsx b/apps/studio/src/pages/home/SideBar.tsx
@@ -1,10 +1,17 @@
 import { FunctionComponent } from "react";
-import { Box, Drawer, IconButton, Link, Stack, useTheme } from "@mui/material";
+import {
+  Box,
+  Drawer,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import {
   ProfileImage,
   SideBarHeader,
   SideBarNavLink,
-  Typography,
 } from "@newm-web/elements";
 import { DiscordLogo, NEWMLogo } from "@newm-web/assets";
 import {

diff --git a/apps/studio/src/pages/home/library/Discography.tsx b/apps/studio/src/pages/home/library/Discography.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from "react";
-import { Typography } from "@newm-web/elements";
+import { Typography } from "@mui/material";
 import SongList from "./SongList";
 import { SearchBox } from "../../../components";
 import { useGetSongCountQuery } from "../../../modules/song";

diff --git a/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx b/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box, Stack } from "@mui/material";
-import { Button, Modal, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography } from "@mui/material";
+import { Button, Modal } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 
 interface EndSaleModalProps {

diff --git a/apps/studio/src/pages/home/library/NoSongsYet.tsx b/apps/studio/src/pages/home/library/NoSongsYet.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Stack, Table } from "@mui/material";
-import { Button, HorizontalLine, Typography } from "@newm-web/elements";
+import { Stack, Table, Typography } from "@mui/material";
+import { Button, HorizontalLine } from "@newm-web/elements";
 import { useNavigate } from "react-router-dom";
 import theme from "@newm-web/theme";
 import TableHead from "./Table/TableHead";

diff --git a/apps/studio/src/pages/home/library/SongInfo.tsx b/apps/studio/src/pages/home/library/SongInfo.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useParams } from "react-router";
 import { useWindowDimensions } from "@newm-web/utils";
 import {
@@ -8,7 +8,6 @@ import {
   SwitchInputField,
   TextAreaField,
   TextInputField,
-  Typography,
   UploadImageField,
 } from "@newm-web/elements";
 import theme from "@newm-web/theme";
@@ -114,7 +113,7 @@ const SongInfo = () => {
                 spacing={ 0.5 }
                 width="100%"
               >
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG
                 </Typography>
 
@@ -136,7 +135,7 @@ const SongInfo = () => {
                 spacing={ 0.5 }
                 width="100%"
               >
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG COVER ART
                 </Typography>
 

diff --git a/apps/studio/src/pages/home/owners/NoOwnersYet.tsx b/apps/studio/src/pages/home/owners/NoOwnersYet.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Box, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import { Owner } from "@newm-web/assets";
 import { useNavigate } from "react-router-dom";
 

diff --git a/apps/studio/src/pages/home/owners/OwnerModal.tsx b/apps/studio/src/pages/home/owners/OwnerModal.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
-import { DialogProps } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { DialogProps, Typography } from "@mui/material";
 import { ProfileModal, SocialsProps } from "@newm-web/components";
+import theme from "@newm-web/theme";
 
 interface OwnerModalProps extends Omit<DialogProps, "onClose"> {
   readonly biography?: string;
@@ -29,7 +29,7 @@ const OwnerModal: FunctionComponent<OwnerModalProps> = ({
       { role ? (
         <>
           <Typography variant="body1">MAIN ROLES</Typography>
-          <Typography color="white" mt={ 0.5 } variant="subtitle1">
+          <Typography color={ theme.colors.white } mt={ 0.5 } variant="subtitle1">
             { role }
           </Typography>
         </>
@@ -40,7 +40,7 @@ const OwnerModal: FunctionComponent<OwnerModalProps> = ({
           <Typography mt={ 2.5 } variant="body1">
             DESCRIPTION
           </Typography>
-          <Typography color="white" mt={ 0.5 } variant="subtitle1">
+          <Typography color={ theme.colors.white } mt={ 0.5 } variant="subtitle1">
             { biography }
           </Typography>
         </>

diff --git a/apps/studio/src/pages/home/owners/OwnersList.tsx b/apps/studio/src/pages/home/owners/OwnersList.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, useEffect, useState } from "react";
-import { Stack } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Stack, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import OwnersTable from "./OwnersTable";
 import {
   CollaborationStatus,

diff --git a/apps/studio/src/pages/home/owners/Songs.tsx b/apps/studio/src/pages/home/owners/Songs.tsx
@@ -1,8 +1,7 @@
 import { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useInView } from "react-intersection-observer";
-import { Grid, Stack } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Grid, Stack, Typography } from "@mui/material";
 import { SongCard } from "@newm-web/components";
 import { useHlsJs } from "@newm-web/utils";
 import { MintingStatus, PlayerState, Song, SortOrder } from "@newm-web/types";