refactor: Minimal improvements in styles

mecies · May 2, 2021 · 166b4f2 · 166b4f2
1 parent 769362b
commit 166b4f2
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll --verbose",
     "eject": "react-scripts eject",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "lint:fix": "yarn lint --fix"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,8 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
+  <meta name="theme-color" content="#424242" />
+  <meta name="description" content="Find artists and their releases" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>React App</title>
+  <title>Musical artists</title>
 </head>
 
 <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Musical artists",
+  "name": "Find artists and their releases",
   "icons": [
     {
       "src": "favicon.ico",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#424242",
   "background_color": "#ffffff"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -63,14 +63,14 @@ const App: FC = () => {
           </Switch>
         </Grid>
         {isDesktop && (
-          <Grid item md={2} className={classes.dividerWrapper}>
-            <Divider className={classes.divider} orientation="vertical" variant="middle" light />
-          </Grid>
-        )}
-        {isDesktop && (
-          <Grid item md={5} className={classes.container}>
-            <FavouriteArtists className={classes.favourites} />
-          </Grid>
+          <>
+            <Grid item md={2} className={classes.dividerWrapper}>
+              <Divider className={classes.divider} orientation="vertical" variant="middle" light />
+            </Grid>
+            <Grid item md={5} className={classes.container}>
+              <FavouriteArtists className={classes.favourites} />
+            </Grid>
+          </>
         )}
       </Router>
     </Grid>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -28,11 +28,14 @@ const useStyles = makeStyles((theme) => ({
   iconButton: {
     color: theme.palette.text.secondary,
   },
-  drawer: {
-    minWidth: 200,
+  drawerPaper: {
     backgroundColor: theme.palette.background.default,
     padding: theme.spacing(2),
   },
+  drawerContent: {
+    minWidth: 200,
+    maxWidth: 300,
+  },
   infoText: {
     color: theme.palette.text.secondary,
     margin: theme.spacing(4),
@@ -76,8 +79,8 @@ const Header = () => {
             <IconButton onClick={toggleDrawer} className={classes.iconButton}>
               {hasFavouriteArtists ? <Favorite /> : <FavoriteBorder />}
             </IconButton>
-            <Drawer classes={{ paper: classes.drawer }} anchor="right" open={isDrawerOpen} onClose={toggleDrawer}>
-              <FavouriteArtists />
+            <Drawer classes={{ paper: classes.drawerPaper }} anchor="right" open={isDrawerOpen} onClose={toggleDrawer}>
+              <FavouriteArtists className={classes.drawerContent} />
             </Drawer>
           </>
         )}

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     display: 'flex',
+    alignItems: 'center',
     width: '100%',
     height: '100%',
   },