made more responsive, minor accessibility tweaks

HannahGuo · Aug 11, 2021 · bac647a · bac647a
1 parent f22ab03
commit bac647a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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