From bac647ab2dc403e93b4b4f8b62d3499b7453932f Mon Sep 17 00:00:00 2001
From: HannahGuo <hguo2102@gmail.com>
Date: Tue, 10 Aug 2021 22:32:39 -0400
Subject: [PATCH] made more responsive, minor accessibility tweaks

---
 client/public/manifest.json | 10 -----
 client/src/App.css          |  1 +
 client/src/Dashboard.css    | 77 ++++++++++++++++++++++++++++---------
 client/src/Dashboard.js     |  3 +-
 4 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/client/public/manifest.json b/client/public/manifest.json
index 080d6c7..1f2f141 100644
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/client/src/App.css b/client/src/App.css
index 41358e7..d3fe180 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'Cabin';
   src: local('Cabin'), url("../src/static/Cabin/Cabin-Regular.ttf") format('truetype');
+  font-display: swap;
 }
 
 * {
diff --git a/client/src/Dashboard.css b/client/src/Dashboard.css
index 6aa4ad8..5e4bfad 100644
--- a/client/src/Dashboard.css
+++ b/client/src/Dashboard.css
@@ -21,28 +21,72 @@
     flex: 5;
 }
 
-#createRP {
-    border-radius: 5em;
-    flex: 2;
-    background-color: white;
-    color: black;
+.ui.selection.active.dropdown > .menu {
+    border-radius: 0em 0em 1.5em 1.5em;
 }
 
+    
 #createRP:hover {
     background: black;
     color: #1DD05D;
     transition: all 0.4s ease;
 }
 
-.ui.selection.active.dropdown > .menu {
-    border-radius: 0em 0em 1.5em 1.5em;
-}
-
-#action-bar {
-    width: 40em;
-    margin: 2em 0em;
-    display: flex;
-    justify-content: space-between;
+@media only screen and (min-width: 1000px) {
+    #action-bar {
+        width: 40em;
+        margin: 2em 0em;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    #createRP {
+        border-radius: 5em;
+        flex: 2;
+        background-color: white;
+        color: black;
+    } 
+
+    #footer-links button {
+        margin: 0 10px;
+        display: flex;
+    }    
+}
+
+@media only screen and (max-width: 999px) {
+    #action-bar {
+        width: 20em;
+        margin: 2em 0em;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .ui.button {
+        margin: 0em;
+    }
+
+    #createRP {
+        border-radius: 5em;
+        width: 100%;
+        margin-top: 1em;
+        flex: 2;
+        background-color: white;
+        color: black;
+    }    
+
+    #footer-links button {
+        margin: 0 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }    
+
+    #footer-links button i {
+        margin: 0px;
+        margin-bottom: 0.5em;
+    }    
 }
 
 #action-bar > div {
@@ -81,11 +125,6 @@
     margin: 20px auto;
 }
 
-#footer-links button {
-    margin: 0 10px;
-    display: flex;
-}
-
 #footer-links a {
     text-decoration: none;
 }
diff --git a/client/src/Dashboard.js b/client/src/Dashboard.js
index 9feb6d3..eed1371 100644
--- a/client/src/Dashboard.js
+++ b/client/src/Dashboard.js
@@ -599,7 +599,7 @@ export default function Dashboard({code}) {
             <div id="greenGradiant"></div>
             <h1>Ranked Records</h1>
             <div id="header-desc">Find all the Spotify songs by your favourite artists, ranked by popularity
-                <Popup trigger={<Button circular basic inverted id="popButton" icon='question circle'/>}>
+                <Popup trigger={<Button circular basic inverted id="popButton" icon='question circle' aria-label="about-popularity"/>}>
                     <Popup.Content>
                     <b>From the Spotify Web API: </b>
                     <p>The popularity of a track is a value between 0 and 100, with 100 being the most popular.</p>
@@ -631,6 +631,7 @@ export default function Dashboard({code}) {
                     selectOnNavigation={false}
                     searchQuery={searchValue}
                     value={defaultDropVal}
+                    label={"search-artists"}
                     />
                 
                 <Modal closeIcon