Changed Dashboard Styling And Other Minor Changes

Ifechukwudaniel · Dec 15, 2023 · 9f9a4bc · 9f9a4bc
1 parent 102e078
commit 9f9a4bc
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 10 deletions.
diff --git a/packages/nextjs/components/dashboard/DashboardLayout.tsx b/packages/nextjs/components/dashboard/DashboardLayout.tsx
@@ -13,7 +13,7 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
 
       <div className="flex flex-col flex-1">
         <Header />
-        <main className="px-12 py-8 bg-black min-h-full h-full overflow-y-auto pb-32">{children}</main>
+        <main className="px-12 py-8 bg-black min-h-full h-full overflow-y-auto pb-20">{children}</main>
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/dashboard/Sidebar.tsx b/packages/nextjs/components/dashboard/Sidebar.tsx
@@ -9,19 +9,13 @@ const Sidebar: React.FC = () => {
       </Link>
       <ul className="ml-6 bg-[#00011e] h-[100%] py-12">
         <li className="mb-8">
-          <Link href="/dashboard/artists">Your Artists</Link>
-        </li>
-        <li className="mb-8">
-          <Link href="/search">Discover</Link>
+          <Link href="/search"> Discovery </Link>
         </li>
         <li className="mb-8">
-          <Link href="#">Followers</Link>
-        </li>
-        <li className="mb-8">
-          <Link href="#">Rewards</Link>
+          <Link href="/dashboard/artists">Your Artists</Link>
         </li>
         <li className="mb-8">
-          <Link href="#">Messages</Link>
+          <Link href="/playlists"> Your Playlists</Link>
         </li>
       </ul>
     </div>

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -24,6 +24,7 @@
     "daisyui": "^2.31.0",
     "dotenv": "^16.1.4",
     "ethers": "^5.0.0",
+    "html-react-parser": "^5.0.7",
     "lodash": "^4.17.21",
     "neverthrow": "^6.1.0",
     "next": "^13.1.6",

diff --git a/packages/nextjs/styles/PlayerBar.module.css b/packages/nextjs/styles/PlayerBar.module.css
@@ -0,0 +1,28 @@
+.player {
+  width: 60%;
+  -webkit-appearance: none;
+  background-color: #535353;
+  height: 4px;
+  border-radius: 3px;
+  -webkit-transition: 0.2s;
+  transition: all 0.2s;
+}
+
+.player::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  -webkit-appearance: none;
+  cursor: pointer;
+  background: #fff;
+}
+
+.player::-moz-range-thumb {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 100%;
+  background: #fff;
+  cursor: pointer;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3690,6 +3690,7 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     ethers: ^5.0.0
+    html-react-parser: ^5.0.7
     lodash: ^4.17.21
     neverthrow: ^6.1.0
     next: ^13.1.6
@@ -8118,6 +8119,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "domelementtype@npm:2.3.0"
+  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
+  languageName: node
+  linkType: hard
+
+"domhandler@npm:5.0.3, domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
+"domutils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "domutils@npm:3.1.0"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+  checksum: e5757456ddd173caa411cfc02c2bb64133c65546d2c4081381a3bafc8a57411a41eed70494551aa58030be9e58574fcc489828bebd673863d39924fb4878f416
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.0.0, dotenv@npm:^16.0.3, dotenv@npm:^16.1.4":
   version: 16.1.4
   resolution: "dotenv@npm:16.1.4"
@@ -8302,6 +8341,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0, entities@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -11119,6 +11165,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-dom-parser@npm:5.0.4":
+  version: 5.0.4
+  resolution: "html-dom-parser@npm:5.0.4"
+  dependencies:
+    domhandler: 5.0.3
+    htmlparser2: 9.0.0
+  checksum: fd2747752dd3cebc9c4c1d6cf148eed3cc788ea0665c10572363b226b654f41af9169374f5418afe9173bcbbaed384dd28362e21ad2001050fb87645fb59f4de
+  languageName: node
+  linkType: hard
+
+"html-react-parser@npm:^5.0.7":
+  version: 5.0.7
+  resolution: "html-react-parser@npm:5.0.7"
+  dependencies:
+    domhandler: 5.0.3
+    html-dom-parser: 5.0.4
+    react-property: 2.0.2
+    style-to-js: 1.1.10
+  peerDependencies:
+    react: 0.14 || 15 || 16 || 17 || 18
+  checksum: 44ed21eaa2b650573fe48bdf359685fc8a04c7c13f97cbb73dc99b71230820f2dbf69eb89e92ec64a964388c5d90865535a8de085e7c4d603736d07a5f86e942
+  languageName: node
+  linkType: hard
+
+"htmlparser2@npm:9.0.0":
+  version: 9.0.0
+  resolution: "htmlparser2@npm:9.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+    domutils: ^3.1.0
+    entities: ^4.5.0
+  checksum: a234c3add821cae8308ca61ce4b8ad3e88af83cf9c3c2003059adc89c46a06ffc39cc2a92b39af8d16c3705e1055df6769d80877acb6529983867f0d7e74098d
+  languageName: node
+  linkType: hard
+
 "http-basic@npm:^8.1.1":
   version: 8.1.3
   resolution: "http-basic@npm:8.1.3"
@@ -11362,6 +11444,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-parser@npm:0.2.2":
+  version: 0.2.2
+  resolution: "inline-style-parser@npm:0.2.2"
+  checksum: 698893d6542d4e7c0377936a1c7daec34a197765bd77c5599384756a95ce8804e6b79347b783aa591d5e9c6f3d33dae74c6d4cad3a94647eb05f3a785e927a3f
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:^8.2.1":
   version: 8.2.5
   resolution: "inquirer@npm:8.2.5"
@@ -15477,6 +15566,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-property@npm:2.0.2":
+  version: 2.0.2
+  resolution: "react-property@npm:2.0.2"
+  checksum: c67fb2590dad9102239b2e574fbc078b472e227b66c3d64e1949426e33889d78c2ac5369cc4c740bb8fe61665505940e39a78d113261ac52410f7538089fe367
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -17134,6 +17230,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-to-js@npm:1.1.10":
+  version: 1.1.10
+  resolution: "style-to-js@npm:1.1.10"
+  dependencies:
+    style-to-object: 1.0.5
+  checksum: 2db181d838b0076161f1ac0959e64841efd91ad9f03d80aabd11769e88f7d979a6b4d73c59810dfb47a2e87543fb02693447a03c385dda86d8750e8cf1802d62
+  languageName: node
+  linkType: hard
+
+"style-to-object@npm:1.0.5":
+  version: 1.0.5
+  resolution: "style-to-object@npm:1.0.5"
+  dependencies:
+    inline-style-parser: 0.2.2
+  checksum: 6201063204b6a94645f81b189452b2ca3e63d61867ec48523f4d52609c81e96176739fa12020d97fbbf023efb57a6f7ec3a15fb3a7fb7eb3ffea0b52b9dd6b8c
+  languageName: node
+  linkType: hard
+
 "style-to-object@npm:^0.4.1":
   version: 0.4.1
   resolution: "style-to-object@npm:0.4.1"