cleaned up first attempt remove tss-react

SeedCompany · Sep 14, 2022 · 1f396fb · 1f396fb
1 parent 981538d
commit 1f396fb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 43 deletions.
diff --git a/src/components/LanguageListItemCard/LanguageListItemCard.tsx b/src/components/LanguageListItemCard/LanguageListItemCard.tsx
@@ -16,40 +16,6 @@ import { Sensitivity } from '../Sensitivity';
 import { TogglePinButton } from '../TogglePinButton';
 import { LanguageListItemFragment } from './LanguageListItem.graphql';
 
-const classes = {
-  root: {
-    width: '100%',
-    maxWidth: 400,
-    position: 'relative',
-  },
-  name: {
-    marginBottom: 2,
-  },
-  bottomSection: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
-  },
-  leftContent: {
-    flex: 1,
-  },
-  rightContent: {
-    marginLeft: 2,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    textAlign: 'right',
-  },
-  sensitivity: {
-    marginTop: 1,
-  },
-  pin: {
-    position: 'absolute',
-    top: 10,
-    right: 10,
-  },
-};
-
 export interface LanguageListItemCardProps {
   className?: string;
   language?: LanguageListItemFragment;
@@ -63,15 +29,27 @@ export const LanguageListItemCard = ({
   const population = language?.population.value;
 
   return (
-    <Card className={className} sx={classes.root}>
+    <Card
+      className={className}
+      sx={{
+        width: '100%',
+        maxWidth: 400,
+        position: 'relative',
+      }}
+    >
       <CardActionAreaLink
         disabled={!language}
         to={`/languages/${language?.id}`}
       >
         <CardContent>
           <Grid container spacing={1}>
             <Grid item xs={language ? undefined : true}>
-              <Typography variant="h4" sx={classes.name}>
+              <Typography
+                variant="h4"
+                sx={{
+                  marginBottom: 2,
+                }}
+              >
                 {!language ? (
                   <Skeleton width="50%" variant="text" />
                 ) : (
@@ -89,8 +67,14 @@ export const LanguageListItemCard = ({
               </Grid>
             )}
           </Grid>
-          <Box sx={classes.bottomSection}>
-            <Box sx={classes.leftContent}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-end',
+            }}
+          >
+            <Box sx={{ flex: 1 }}>
               <DisplaySimpleProperty
                 LabelProps={{ color: 'textSecondary' }}
                 label="Ethnologue Code"
@@ -108,10 +92,18 @@ export const LanguageListItemCard = ({
               <Sensitivity
                 value={language?.sensitivity}
                 loading={!language}
-                sx={classes.sensitivity}
+                sx={{ marginTop: 1 }}
               />
             </Box>
-            <Box sx={classes.rightContent}>
+            <Box
+              sx={{
+                marginLeft: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+                textAlign: 'right',
+              }}
+            >
               {!language || population ? (
                 <>
                   <Typography variant="body2" color="textSecondary">
@@ -137,7 +129,11 @@ export const LanguageListItemCard = ({
         listFilter={(args: PartialDeep<LanguagesQueryVariables>) =>
           args.input?.filter?.pinned ?? false
         }
-        sx={classes.pin}
+        sx={{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+        }}
       />
     </Card>
   );

diff --git a/src/components/Sensitivity/Sensitivity.tsx b/src/components/Sensitivity/Sensitivity.tsx
@@ -1,9 +1,10 @@
 import { VerifiedUserOutlined } from '@mui/icons-material';
-import { Box, Chip, Skeleton, SxProps, Theme, Typography } from '@mui/material';
+import { Box, Chip, Skeleton, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import { meanBy } from 'lodash';
 import { makeStyles } from 'tss-react/mui';
 import { Sensitivity as SensitivityType } from '~/api/schema.graphql';
+import { Sx } from '~/common';
 
 const possible: SensitivityType[] = ['Low', 'Medium', 'High'];
 const avgLength = Math.round(meanBy(possible, (s) => s.length));
@@ -59,7 +60,7 @@ export interface SensitivityProps {
   value?: SensitivityType;
   loading?: boolean;
   className?: string;
-  sx?: SxProps<Theme>;
+  sx?: Sx;
 }
 
 export const Sensitivity = ({