Merge pull request #95 from stanleyowen/design

Improve App Design
stanleyowen · Sep 20, 2021 · c1f48cb · c1f48cb
2 parents b53df21 + 2287792
commit c1f48cb
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lofi-player",
-  "version": "0.2.5",
+  "version": "0.3.2-beta",
   "private": true,
   "author": "Stanley Owen <stanleyowen06@gmail.com>",
   "dependencies": {
@@ -11,7 +11,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/node": "^16.9.2",
+    "@types/node": "^16.9.4",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.9",

diff --git a/src/App.css b/src/App.css
@@ -2,8 +2,9 @@
 	--black: 0 0 0;
 	--white: 255 255 255;
 	--gray: 205 205 205;
-	--light-gray: 244 244 244;
 	--dark-gray: 56 56 56;
+	--light-gray: 244 244 244;
+	--blue: 25 118 210;
 }
 
 body {
@@ -13,7 +14,10 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
-h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
+h1, h2, h3, h4, h5, h6, p {
+	margin: 0;
+	padding: 0;
+}
 
 /* App Background */
 .backdrop {
@@ -98,7 +102,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
 	display: flex;
 	flex-direction: column;
 }
-#tabs .active { background: rgb(var(--gray) / 60%) }
+#tabs .active { background: rgb(var(--blue) / 15%) }
 #tabs :nth-child(3) { margin-top: auto }
 .tab {
 	font-weight: 525;
@@ -109,7 +113,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
 /* Navbar */
 .navbar {
 	z-index: 99;
-	height: 80px;
+	height: 75px;
 	padding: 15px;
 	display: flex;
 	overflow: auto;
@@ -129,8 +133,8 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
 }
 .base {
 	overflow: auto;
-	margin-top: 80px;
-	height: calc(100% - 80px);
+	margin-top: 75px;
+	height: calc(100% - 75px);
 }
 .app-ui { height: calc(100% - 95px) }
 .card {
@@ -276,7 +280,7 @@ button {
 
 /* Controller */
 .footer {
-	padding: 10px 20px;
+	padding: 10px 15px;
 	overflow: auto;
 	background: rgb(var(--white) / 60%);
 	color: rgb(var(--black));

diff --git a/src/components/controls.component.tsx b/src/components/controls.component.tsx
@@ -1,3 +1,4 @@
+import { Slider, IconButton } from '@mui/material'
 import React, { useState, useEffect } from 'react'
 import { Audio, MutedAudio, SkipNext, SkipPrevious } from '../lib/icons.component'
 
@@ -53,14 +54,14 @@ const Controls = ({ song, handleSong }: any) => {
                 </div>
                 <div className="playback-bar">
                     <div className="progress-time center-align" id="current-duration">00:00</div>
-                    <input type="range" className="progress-bar rounded-corner" max="100" value={property.progress} readOnly />
+                    <Slider className="mrl-5" size="small" defaultValue={property.volume} value={property.progress} disableSwap={true} />
                     <div className="progress-time center-align">{parseTime(property.duration ? property.duration : 0)}</div>
                 </div>
             </div>
             <div className="w-30 flex center-flex">
                 <div className="w-50 audio">
                     <button onClick={() => handleChange('muted', !property.muted)}>{property.muted || property.volume === 0 ? MutedAudio() : Audio()}</button>
-                    <input type="range" className="progress-bar rounded-corner m-10" max="100" value={property.volume} onChange={e => handleChange('volume', Number(e.target.value))} />
+                    <Slider className="m-10" size="small" defaultValue={property.volume} value={property.volume} onChange={(_, value) => handleChange('volume', value)} />
                 </div>
             </div>
         </div>

diff --git a/src/components/navbar.component.tsx b/src/components/navbar.component.tsx
@@ -21,17 +21,17 @@ const Navbar = ({ properties, handleChange }: any) => {
     return (
         <div className="navbar">
             <div className="m-10-auto">
-                <Tooltip title="Go Back"><span>
+                <Tooltip title="Go Back" enterDelay={500} enterNextDelay={500}><div>
                     <IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
-                </span></Tooltip>
+                </div></Tooltip>
             </div>
             <div className="m-10-auto">
-                <Tooltip title="Go Forward"><span>
+                <Tooltip title="Go Forward" enterDelay={500} enterNextDelay={500}><div>
                     <IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
-                </span></Tooltip>
+                </div></Tooltip>
             </div>
             <div className="mrl-10">
-                <Tooltip title="View on GitHub" arrow>
+                <Tooltip title="View on GitHub" enterDelay={500} enterNextDelay={500}>
                     <IconButton href="https://github.com/stanleyowen/lofi-player" className="p-10" target="_blank"><GitHub /></IconButton>
                 </Tooltip>
             </div>

diff --git a/src/components/search.component.tsx b/src/components/search.component.tsx
@@ -65,11 +65,8 @@ const Search = ({ songData }: any) => {
     return (
         <div className="m-10">
             <div className="flex">
-                <TextField label="Search" variant="outlined" className="search" value={keyword} onChange={e => setKeyword(e.target.value)} id="search-query" autoFocus />
-                <IconButton
-                    className={(keyword ? null : 'none') + " p-10 close-btn"}
-                    onClick={ClearQuery}
-                    size="large">{Close()}</IconButton>
+                <TextField label="Search (Artists or Songs)" variant="outlined" className="search" value={keyword} onChange={e => setKeyword(e.target.value)} id="search-query" autoFocus autoComplete="off" />
+                <IconButton className={(keyword ? null : 'none') + " p-10 close-btn"} onClick={ClearQuery} size="large">{Close()}</IconButton>
             </div>
             <div className="mt-30 col-4" id="playlist">{items}</div>
         </div>

diff --git a/src/components/sidebar.component.tsx b/src/components/sidebar.component.tsx
@@ -7,7 +7,7 @@ const SideBar = ({ handleChange, properties }: any) => {
 
     useEffect(() => {
         document.getElementById('tabs')?.childNodes.forEach(tab =>
-            (tab.childNodes[0] as HTMLElement).innerText.toLowerCase() === properties.activeTab ?
+            (tab.childNodes[1] as HTMLElement).innerText.toLowerCase() === properties.activeTab ?
                 (tab as HTMLElement).classList.add('active') :
                 (tab as HTMLElement).classList.remove('active')
         )

diff --git a/src/lib/icons.component.tsx b/src/lib/icons.component.tsx
@@ -41,7 +41,7 @@ export function Close() {
     return <svg width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z" fill="currentColor"></path></svg>
 }
 export function GitHub() {
-    return <svg width="1.2em" height="1.2em" viewBox="0 0 1200 1200"><path d="M600 0C268.629 0 0 268.629 0 600s268.629 600 600 600s600-268.629 600-600S931.371 0 600 0zm0 65.332c295.289 0 534.668 239.379 534.668 534.668S895.289 1134.668 600 1134.668S65.332 895.289 65.332 600S304.711 65.332 600 65.332zM334.644 221.924c-15.228 44.26-20.507 92.298-6.885 134.253c-16.457 18.264-29.235 39.243-38.379 62.988c-24.371 77.026-18.418 175.425 34.937 234.961c18.743 20.548 44.172 37.441 76.172 50.684c31.999 13.241 73.127 21.688 123.413 25.343c-33.751 15.771-57.543 25.406-65.846 60.277c-37.646 25.156-83.427 19.153-116.602-8.203c-26.217-19.143-38.094-53.164-67.163-65.771c-1.828-1.826-7.539-3.188-17.139-4.103c-9.6-.913-17.146 1.811-22.632 8.203c-2.743 2.739-2.541 5.666.659 8.862c22.006 17.897 43.187 36.867 55.591 59.619c11.886 24.657 24.188 42.711 36.987 54.126c35.507 23.993 83.126 36.476 124.806 21.24c-4.86 29.329 8.252 75.13-1.393 101.367c-3.658 7.306-8.89 13.71-15.747 19.188c-6.111 5.962-25.06 13.42-21.24 22.56c1.828 4.108 8.219 6.631 19.189 7.544c24.151-.616 48.193-10.382 62.402-29.443c5.028-6.85 7.544-15.774 7.544-26.733V846.607c0-12.785 2.717-21.913 8.203-27.394c5.484-5.479 11.471-9.16 17.87-10.985v147.948c0 12.785-1.155 23.753-3.441 32.886c-2.286 9.134-4.324 15.536-6.152 19.189c-4.197 7.039-12.221 13.535-12.378 21.899c0 2.738 1.635 4.305 4.834 4.761c24.021-1.042 51.889-15.133 61.67-34.938c7.771-16.438 11.646-33.736 11.646-52.002V802.734h30.176v145.238c0 18.266 4.149 35.563 12.378 52.002s21.962 27.002 41.162 31.567c10.057 2.74 16.85 3.826 20.508 3.369c3.657-.457 5.291-2.021 4.834-4.761c-2.202-8.299-6.791-15.397-11.646-21.899c-6.4-8.219-9.596-25.591-9.596-52.075V808.229c6.4 1.825 12.588 5.507 18.53 10.985c5.942 5.479 8.862 14.607 8.862 27.394v112.279c0 10.959 2.515 19.885 7.544 26.733c15.283 19.437 38.314 29.297 62.401 29.443c10.973-.913 17.361-3.436 19.189-7.544c1.828-4.109.47-7.516-4.102-10.255s-10.281-6.824-17.14-12.305c-6.857-5.479-12.09-11.884-15.747-19.188c-4.104-47.109-.104-97.608-3.441-145.239c-6.589-51.979-26.597-69.079-66.504-88.989c47.543-3.653 86.633-12.376 117.261-26.074c91.558-44.484 116.875-113.258 117.261-205.443c-1.444-59.33-18.57-111.086-57.642-150.732c5.484-21.004 7.12-42.867 4.834-65.698c-2.286-22.831-7.115-43.405-14.43-61.67c-33.824 1.826-62.174 8.635-85.033 20.508c-22.857 11.873-39.31 21.957-49.365 30.176c-81.016-18.393-167.743-18.503-245.436 2.71c-39.748-32.517-89.018-50.632-135.784-53.396z" fill="currentColor"></path></svg>
+    return <svg width="1.1em" height="1.1em" viewBox="0 0 1200 1200"><path d="M600 0C268.629 0 0 268.629 0 600s268.629 600 600 600s600-268.629 600-600S931.371 0 600 0zm0 65.332c295.289 0 534.668 239.379 534.668 534.668S895.289 1134.668 600 1134.668S65.332 895.289 65.332 600S304.711 65.332 600 65.332zM334.644 221.924c-15.228 44.26-20.507 92.298-6.885 134.253c-16.457 18.264-29.235 39.243-38.379 62.988c-24.371 77.026-18.418 175.425 34.937 234.961c18.743 20.548 44.172 37.441 76.172 50.684c31.999 13.241 73.127 21.688 123.413 25.343c-33.751 15.771-57.543 25.406-65.846 60.277c-37.646 25.156-83.427 19.153-116.602-8.203c-26.217-19.143-38.094-53.164-67.163-65.771c-1.828-1.826-7.539-3.188-17.139-4.103c-9.6-.913-17.146 1.811-22.632 8.203c-2.743 2.739-2.541 5.666.659 8.862c22.006 17.897 43.187 36.867 55.591 59.619c11.886 24.657 24.188 42.711 36.987 54.126c35.507 23.993 83.126 36.476 124.806 21.24c-4.86 29.329 8.252 75.13-1.393 101.367c-3.658 7.306-8.89 13.71-15.747 19.188c-6.111 5.962-25.06 13.42-21.24 22.56c1.828 4.108 8.219 6.631 19.189 7.544c24.151-.616 48.193-10.382 62.402-29.443c5.028-6.85 7.544-15.774 7.544-26.733V846.607c0-12.785 2.717-21.913 8.203-27.394c5.484-5.479 11.471-9.16 17.87-10.985v147.948c0 12.785-1.155 23.753-3.441 32.886c-2.286 9.134-4.324 15.536-6.152 19.189c-4.197 7.039-12.221 13.535-12.378 21.899c0 2.738 1.635 4.305 4.834 4.761c24.021-1.042 51.889-15.133 61.67-34.938c7.771-16.438 11.646-33.736 11.646-52.002V802.734h30.176v145.238c0 18.266 4.149 35.563 12.378 52.002s21.962 27.002 41.162 31.567c10.057 2.74 16.85 3.826 20.508 3.369c3.657-.457 5.291-2.021 4.834-4.761c-2.202-8.299-6.791-15.397-11.646-21.899c-6.4-8.219-9.596-25.591-9.596-52.075V808.229c6.4 1.825 12.588 5.507 18.53 10.985c5.942 5.479 8.862 14.607 8.862 27.394v112.279c0 10.959 2.515 19.885 7.544 26.733c15.283 19.437 38.314 29.297 62.401 29.443c10.973-.913 17.361-3.436 19.189-7.544c1.828-4.109.47-7.516-4.102-10.255s-10.281-6.824-17.14-12.305c-6.857-5.479-12.09-11.884-15.747-19.188c-4.104-47.109-.104-97.608-3.441-145.239c-6.589-51.979-26.597-69.079-66.504-88.989c47.543-3.653 86.633-12.376 117.261-26.074c91.558-44.484 116.875-113.258 117.261-205.443c-1.444-59.33-18.57-111.086-57.642-150.732c5.484-21.004 7.12-42.867 4.834-65.698c-2.286-22.831-7.115-43.405-14.43-61.67c-33.824 1.826-62.174 8.635-85.033 20.508c-22.857 11.873-39.31 21.957-49.365 30.176c-81.016-18.393-167.743-18.503-245.436 2.71c-39.748-32.517-89.018-50.632-135.784-53.396z" fill="currentColor"></path></svg>
 }
 export function PrivacyPolicy() {
     return <svg width="1.5em" height="1.5em" viewBox="0 0 48 48"><path d="M6 8.256L24.009 3L42 8.256v10.778A26.316 26.316 0 0 1 24.003 44h0A26.32 26.32 0 0 1 6 19.029V8.256z" stroke="currentColor" strokeWidth="4" strokeLinejoin="round" fill="none" fillRule="evenodd"></path></svg>

diff --git a/yarn.lock b/yarn.lock
@@ -2645,7 +2645,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^16.9.2":
+"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.2.tgz#81f5a039d6ed1941f8cc57506c74e7c2b8fc64b9"
   integrity sha512-ZHty/hKoOLZvSz6BtP1g7tc7nUeJhoCf3flLjh8ZEv1vFKBWHXcnMbJMyN/pftSljNyy0kNW/UqI3DccnBnZ8w==
@@ -2655,6 +2655,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.17.tgz#4ec7b71bbcb01a4e55455b60b18b1b6a783fe31d"
   integrity sha512-niAjcewgEYvSPCZm3OaM9y6YQrL2SEPH9PymtE6fuZAvFiP6ereCcvApGl2jKTq7copTIguX3PBvfP08LN4LvQ==
 
+"@types/node@^16.9.4":
+  version "16.9.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.4.tgz#a12f0ee7847cf17a97f6fdf1093cb7a9af23cca4"
+  integrity sha512-KDazLNYAGIuJugdbULwFZULF9qQ13yNWEBFnfVpqlpgAAo6H/qnM9RjBgh0A0kmHf3XxAKLdN5mTIng9iUvVLA==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"