Merge pull request #110 from stanleyowen/ui

Improve App Layout
stanleyowen · Sep 27, 2021 · b3b3c0b · b3b3c0b
2 parents 322c3b0 + 7d8b4ea
commit b3b3c0b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lofi-player",
-  "version": "0.3.7",
+  "version": "0.4.5-beta",
   "private": true,
   "author": "Stanley Owen <stanleyowen06@gmail.com>",
   "dependencies": {

diff --git a/src/App.css b/src/App.css
@@ -103,6 +103,7 @@ h1, h2, h3, h4, h5, h6, p {
 }
 #tabs .active { background: rgb(var(--blue) / 15%) }
 #tabs :nth-child(3) { margin-top: auto }
+#tabs svg { font-size: 1.5em !important; }
 .tab {
 	font-weight: 525;
 	color: rgb(var(--black) / 70%) !important;
@@ -242,6 +243,9 @@ svg {
 	text-decoration: none;
 }
 #version a:hover { text-decoration: underline }
+#version svg { font-size: 1.2em !important }
+#version .MuiPaper-root:before{ display: none !important }
+
 .small { font-size: 12px; font-weight: normal !important; }
 button {
 	border: none;
@@ -310,16 +314,35 @@ button {
 /* Search */
 .search { width: 50% }
 
+/* Scroll Bar */
+::-webkit-scrollbar {
+	width: 15px;
+	background: transparent;
+}
+::-webkit-scrollbar-thumb {
+	background: rgb(var(--black) / 75%);
+	border-radius: 7px;
+	/* border-radius: calc(15px / 2); */
+	background-clip: content-box;
+	border: 4px solid transparent;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: rgb(var(--black));
+	background-clip: content-box;
+}
+
 @media only screen and (max-width: 1200px) {
 	.col-3 { grid-template-columns: 50% 50% }
 	#version .w-50 { width: 70% !important }
+	.w-50.audio { width: 70% !important }
 	.col-4 { grid-template-columns: 33.3% 33.3% 33.3% }
 	.search { width: 60% }
 }
 @media only screen and (max-width: 800px) {
 	.col-3 { grid-template-columns: 100% }
 	.col-4 { grid-template-columns: 50% 50% }
 	#version .w-50 { width: 90% !important }
+	.w-50.audio { width: 100% !important }
 }
 @media only screen and (max-width: 700px) {
 	.search { width: 100% }

diff --git a/src/components/about.component.tsx b/src/components/about.component.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Accordion, AccordionSummary } from '@mui/material'
 
 import { version } from '../../package.json'
-import { Themes, License, AboutOutline, PrivacyPolicy, ExpandMoreIcon } from '../lib/icons.component'
+import { Themes, License, AboutOutline, PrivacyPolicy, Expand } from '../lib/icons.component'
 
 const About = ({ properties }: any) => {
     const setTheme = (url: string | Boolean) => {
@@ -31,7 +31,7 @@ const About = ({ properties }: any) => {
             </div>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <Themes />
                         <p className="ml-10">Themes</p>
@@ -45,7 +45,7 @@ const About = ({ properties }: any) => {
             </Accordion>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <PrivacyPolicy />
                         <p className="ml-10">Privacy Policy</p>
@@ -60,7 +60,7 @@ const About = ({ properties }: any) => {
             </Accordion>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <License />
                         <p className="ml-10">License</p>

diff --git a/src/lib/icons.component.tsx b/src/lib/icons.component.tsx
@@ -1,23 +1,23 @@
-export function HomeOutline() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 15 15"><g fill="none"><path d="M7.5.5l.325-.38a.5.5 0 0 0-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 0 0 .5-.5h-.5zm4 0H9a.5.5 0 0 0 .5.5v-.5zm5-8h.5v-.23l-.175-.15l-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6l-.65.76l7 6l.65-.76zm-7.65-6l-7 6l.65.76l7-6l-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 0 1 9 11.5h1A2.5 2.5 0 0 0 7.5 9v1zm0-1A2.5 2.5 0 0 0 5 11.5h1A1.5 1.5 0 0 1 7.5 10V9zm6 6a1.5 1.5 0 0 0 1.5-1.5h-1a.5.5 0 0 1-.5.5v1zm-12-1a.5.5 0 0 1-.5-.5H0A1.5 1.5 0 0 0 1.5 15v-1z" fill="currentColor"></path></g></svg>
-}
 export function HomeSolid() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 15 15"><g fill="none"><path d="M7.825.12a.5.5 0 0 0-.65 0L0 6.27v7.23A1.5 1.5 0 0 0 1.5 15h4a.5.5 0 0 0 .5-.5v-3a1.5 1.5 0 0 1 3 0v3a.5.5 0 0 0 .5.5h4a1.5 1.5 0 0 0 1.5-1.5V6.27L7.825.12z" fill="currentColor"></path></g></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 15 15"><g fill="none"><path d="M7.825.12a.5.5 0 0 0-.65 0L0 6.27v7.23A1.5 1.5 0 0 0 1.5 15h4a.5.5 0 0 0 .5-.5v-3a1.5 1.5 0 0 1 3 0v3a.5.5 0 0 0 .5.5h4a1.5 1.5 0 0 0 1.5-1.5V6.27L7.825.12z" fill="currentColor"></path></g></svg>
 }
-export function SearchOutline() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path d="M18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7c-3.868 0-7 3.132-7 7c0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" fill="currentColor"></path></svg>
+export function HomeOutline() {
+    return <svg width="1em" height="1em" viewBox="0 0 15 15"><g fill="none"><path d="M7.5.5l.325-.38a.5.5 0 0 0-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 0 0 .5-.5h-.5zm4 0H9a.5.5 0 0 0 .5.5v-.5zm5-8h.5v-.23l-.175-.15l-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6l-.65.76l7 6l.65-.76zm-7.65-6l-7 6l.65.76l7-6l-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 0 1 9 11.5h1A2.5 2.5 0 0 0 7.5 9v1zm0-1A2.5 2.5 0 0 0 5 11.5h1A1.5 1.5 0 0 1 7.5 10V9zm6 6a1.5 1.5 0 0 0 1.5-1.5h-1a.5.5 0 0 1-.5.5v1zm-12-1a.5.5 0 0 1-.5-.5H0A1.5 1.5 0 0 0 1.5 15v-1z" fill="currentColor"></path></g></svg>
 }
 export function SearchSolid() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path d="M18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617z" fill="currentColor"></path></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617z" fill="currentColor"></path></svg>
+}
+export function SearchOutline() {
+    return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7c-3.868 0-7 3.132-7 7c0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" fill="currentColor"></path></svg>
 }
 export function AboutSolid() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-12a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0-1-1zm0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2z" fill="currentColor"></path></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-12a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0-1-1zm0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2z" fill="currentColor"></path></svg>
 }
 export function AboutOutline() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2a1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2a1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
 }
 export function Beta() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 1024 1024"><path d="M512 472a40 40 0 1 0 80 0a40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1c0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3c33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8c-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8c61.2 0 119.2-21.5 165.3-60c33.9-28.2 76.3-43.9 121.3-43.9c35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" fill="currentColor"></path></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 1024 1024"><path d="M512 472a40 40 0 1 0 80 0a40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1c0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3c33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8c-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8c61.2 0 119.2-21.5 165.3-60c33.9-28.2 76.3-43.9 121.3-43.9c35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" fill="currentColor"></path></svg>
 }
 export function ChevronLeft() {
     return <svg width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.9 8l8-8l2.2 2.1L7.2 8l5.9 5.9l-2.2 2.1z"></path></svg>
@@ -26,10 +26,10 @@ export function ChevronRight() {
     return <svg width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M13.1 8l-8 8l-2.2-2.1L8.8 8L2.9 2.1L5.1 0z"></path></svg>
 }
 export function SkipNext() {
-    return <svg width="2em" height="2em" viewBox="0 0 24 24"><path d="M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z" fill="currentColor"></path></svg>
+    return <svg width="1.1em" height="1.1em" viewBox="0 0 24 24"><g fill="none"><path d="M21 4a1 1 0 1 0-2 0v16a1 1 0 1 0 2 0V4z" fill="currentColor"></path><path d="M3 4.947c0-1.424 1.612-2.252 2.77-1.422l10.47 7.507a1.75 1.75 0 0 1-.075 2.895l-10.47 6.716C4.53 21.39 3 20.554 3 19.17V4.947z" fill="currentColor"></path></g></svg>
 }
 export function SkipPrevious() {
-    return <svg width="2em" height="2em" viewBox="0 0 24 24"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07a1 1 0 0 0 0 1.64z" fill="currentColor"></path></svg>
+    return <svg width="1.1em" height="1.1em" viewBox="0 0 24 24"><g fill="none"><path d="M2.75 20a1 1 0 1 0 2 0V4a1 1 0 1 0-2 0v16z" fill="currentColor"></path><path d="M20.75 19.053c0 1.424-1.612 2.252-2.77 1.422L7.51 12.968a1.75 1.75 0 0 1 .075-2.895l10.47-6.716c1.165-.748 2.695.089 2.695 1.473v14.223z" fill="currentColor"></path></g></svg>
 }
 export function Audio() {
     return <svg width="1.2em" height="1.2em" viewBox="0 0 15 15"><g fill="none"><path d="M3.5 10.494l.257-.429l-.119-.07H3.5v.5zm0-5.996v.5h.138l.12-.071l-.258-.429zm5-2.998H9a.5.5 0 0 0-.757-.429L8.5 1.5zm0 11.992l-.257.429A.5.5 0 0 0 9 13.492h-.5zm5.353-9.348l-.353-.353l-.707.707l.354.354l.706-.708zm-.706 5.996l-.354.354l.707.707l.353-.353l-.706-.708zM3.5 9.994h-2v1h2v-1zm-2 0a.5.5 0 0 1-.5-.5H0c0 .83.672 1.5 1.5 1.5v-1zm-.5-.5V5.498H0v3.998h1zm0-3.997a.5.5 0 0 1 .5-.499v-1a1.5 1.5 0 0 0-1.5 1.5h1zm.5-.499h2v-1h-2v1zm2.257-.071l5-2.998l-.514-.858l-5 2.998l.514.858zM8 1.5v11.992h1V1.5H8zm.757 11.563l-5-2.998l-.514.858l5 2.998l.514-.858zM13.5 4.498c-.353.354-.354.354-.354.353a.01.01 0 0 1-.002-.002l.003.003l.02.022a3.186 3.186 0 0 1 .386.597c.22.439.447 1.112.447 2.025h1c0-1.086-.272-1.911-.553-2.472a4.198 4.198 0 0 0-.39-.639a2.932 2.932 0 0 0-.181-.217l-.014-.015l-.005-.005l-.002-.002l-.001-.001l-.354.353zm.5 2.998c0 .913-.228 1.586-.447 2.025a3.184 3.184 0 0 1-.386.597a.83.83 0 0 1-.02.022l-.003.003l.001-.001l.001-.001l.354.353c.353.354.354.354.354.353h.001l.002-.003l.005-.005l.014-.014l.043-.048c.035-.04.082-.097.137-.17c.11-.146.251-.36.391-.639c.28-.56.553-1.386.553-2.472h-1z" fill="currentColor"></path></g></svg>
@@ -43,15 +43,15 @@ export function Close() {
 export function GitHub() {
     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 Themes() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 16 16"><path fillRule="evenodd" d="M11.134 1.535C9.722 2.562 8.16 4.057 6.889 5.312C5.8 6.387 5.041 7.401 4.575 8.294a3.745 3.745 0 0 0-3.227 1.054c-.43.431-.69 1.066-.86 1.657a11.982 11.982 0 0 0-.358 1.914A21.263 21.263 0 0 0 0 15.203v.054l.75-.007l-.007.75h.054a14.404 14.404 0 0 0 .654-.012a21.243 21.243 0 0 0 1.63-.118c.62-.07 1.3-.18 1.914-.357c.592-.17 1.226-.43 1.657-.861a3.745 3.745 0 0 0 1.055-3.217c.908-.461 1.942-1.216 3.04-2.3c1.279-1.262 2.764-2.825 3.775-4.249c.501-.706.923-1.428 1.125-2.096c.2-.659.235-1.469-.368-2.07c-.606-.607-1.42-.55-2.069-.34c-.66.213-1.376.646-2.076 1.155zm-3.95 8.48a3.76 3.76 0 0 0-1.19-1.192a9.758 9.758 0 0 1 1.161-1.607l1.658 1.658a9.853 9.853 0 0 1-1.63 1.142zM.742 16l.007-.75l-.75.008A.75.75 0 0 0 .743 16zM12.016 2.749c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833c.47-.662.78-1.227.912-1.662c.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.112-.113-.548.027c-.432.14-.995.462-1.655.942zM1.62 13.089a19.56 19.56 0 0 0-.104 1.395a19.55 19.55 0 0 0 1.396-.104a10.528 10.528 0 0 0 1.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 0 0-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 0 0-.309 1.67z" 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>
+    return <svg width="1em" height="1em" 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>
 }
-export function ExpandMoreIcon() {
+export function Expand() {
     return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M12 8l-6 6l1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" fill="currentColor"></path></svg>
 }
 export function License() {
-    return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeWidth="2" d="M10 13v3h3v3h3v2l2 2h5v-4L12.74 8.74C12.91 8.19 13 7.6 13 7c0-3.31-2.69-6-6-6S1 3.69 1 7a6.005 6.005 0 0 0 8.47 5.47L10 13zM6 7a1 1 0 1 1 0-2a1 1 0 0 1 0 2z"></path></svg>
+    return <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeWidth="2" d="M10 13v3h3v3h3v2l2 2h5v-4L12.74 8.74C12.91 8.19 13 7.6 13 7c0-3.31-2.69-6-6-6S1 3.69 1 7a6.005 6.005 0 0 0 8.47 5.47L10 13zM6 7a1 1 0 1 1 0-2a1 1 0 0 1 0 2z"></path></svg>
+}
+export function Themes() {
+    return <svg width="1em" height="1em" viewBox="0 0 16 16"><path fillRule="evenodd" d="M11.134 1.535C9.722 2.562 8.16 4.057 6.889 5.312C5.8 6.387 5.041 7.401 4.575 8.294a3.745 3.745 0 0 0-3.227 1.054c-.43.431-.69 1.066-.86 1.657a11.982 11.982 0 0 0-.358 1.914A21.263 21.263 0 0 0 0 15.203v.054l.75-.007l-.007.75h.054a14.404 14.404 0 0 0 .654-.012a21.243 21.243 0 0 0 1.63-.118c.62-.07 1.3-.18 1.914-.357c.592-.17 1.226-.43 1.657-.861a3.745 3.745 0 0 0 1.055-3.217c.908-.461 1.942-1.216 3.04-2.3c1.279-1.262 2.764-2.825 3.775-4.249c.501-.706.923-1.428 1.125-2.096c.2-.659.235-1.469-.368-2.07c-.606-.607-1.42-.55-2.069-.34c-.66.213-1.376.646-2.076 1.155zm-3.95 8.48a3.76 3.76 0 0 0-1.19-1.192a9.758 9.758 0 0 1 1.161-1.607l1.658 1.658a9.853 9.853 0 0 1-1.63 1.142zM.742 16l.007-.75l-.75.008A.75.75 0 0 0 .743 16zM12.016 2.749c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833c.47-.662.78-1.227.912-1.662c.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.112-.113-.548.027c-.432.14-.995.462-1.655.942zM1.62 13.089a19.56 19.56 0 0 0-.104 1.395a19.55 19.55 0 0 0 1.396-.104a10.528 10.528 0 0 0 1.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 0 0-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 0 0-.309 1.67z" fill="currentColor"></path></svg>
 }