Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve App Layout #110

Merged
merged 6 commits into from
Sep 27, 2021
Merged

Improve App Layout #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
30edcf2
Remove `.MuiPaper-root:before` classes (#109)
stanleyowen Sep 26, 2021
6c0b787
Improve `Expand` Icon Size (#107)
stanleyowen Sep 26, 2021
2061f56
Refactor Icons Size
stanleyowen Sep 26, 2021
3715777
Added Custom Scrollbar Styling (#111)
stanleyowen Sep 26, 2021
48ae0e3
Added Hover Effect for Scrollbar (#111)
stanleyowen Sep 26, 2021
7d8b4ea
Reconfigure Volume Slider `width` on various media screen (#112)
stanleyowen Sep 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
23 changes: 23 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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% }
Expand Down
8 changes: 4 additions & 4 deletions src/components/about.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
36 changes: 18 additions & 18 deletions src/lib/icons.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
}