oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-25 18:56:50 +02:00
Code Releases Activity

icon tweaks (#200)

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-11-03 13:19:47 +01:00 committed by GitHub
parent 79e76dddb0
commit 8f1cde9c90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 103 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/atoms/EtherscanLink.module.css
View File

@ -3,8 +3,8 @@
}
.link svg {
width: 0.7em;
height: 0.7em;
width: 0.6em;
height: 0.6em;
display: inline-block;
fill: var(--brand-grey-light);
}

33
src/components/molecules/UserPreferences/Appearance.module.css Normal file
View File

@ -0,0 +1,33 @@
.buttons {
display: flex;
justify-content: space-between;
padding-bottom: calc(var(--spacer) / 8);
}
.button {
display: block;
flex: 0 0 48%;
padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
calc(var(--spacer) / 4) calc(var(--spacer) / 2) !important;
border-radius: var(--border-radius);
text-transform: none;
}
.button,
.button:hover,
.button:active {
color: var(--color-secondary);
border: 1px solid var(--border-color);
}
.button svg {
width: var(--font-size-h4);
height: var(--font-size-h4);
fill: currentColor;
margin-bottom: calc(var(--spacer) / 5);
}
.button.selected {
color: var(--font-color-text);
border-color: var(--color-secondary);
}

43
src/components/molecules/UserPreferences/Appearance.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, { ReactElement } from 'react'
import { DarkMode } from 'use-dark-mode'
import Button from '../../atoms/Button'
import FormHelp from '../../atoms/Input/Help'
import Label from '../../atoms/Input/Label'
import styles from './Appearance.module.css'
import { ReactComponent as Moon } from '../../../images/moon.svg'
import { ReactComponent as Sun } from '../../../images/sun.svg'
const buttons = ['Light', 'Dark']
export default function Appearance({
darkMode
}: {
darkMode: DarkMode
}): ReactElement {
return (
<li>
<Label htmlFor="">Appearance</Label>
<div className={styles.buttons}>
{buttons.map((button) => {
const isDark = button === 'Dark'
const selected =
(isDark && darkMode.value) || (!isDark && !darkMode.value)
return (
<Button
key={button}
className={`${styles.button} ${selected ? styles.selected : ''}`}
size="small"
style="text"
onClick={() => (isDark ? darkMode.enable() : darkMode.disable())}
>
{isDark ? <Moon /> : <Sun />}
{button}
</Button>
)
})}
</div>
<FormHelp>Defaults to your OS setting, select to override.</FormHelp>
</li>
)
}

28
src/components/molecules/UserPreferences/Theme.tsx
View File

@ -1,28 +0,0 @@
import React, { ReactElement } from 'react'
import { DarkMode } from 'use-dark-mode'
import Input from '../../atoms/Input'
const options = ['Light', 'Dark']
export default function Theme({
darkMode
}: {
darkMode: DarkMode
}): ReactElement {
const value = darkMode.value === true ? 'Dark' : 'Light'
return (
<li>
<Input
name="theme"
label="Theme"
help="Defaults to your OS setting, select a theme to override."
type="select"
options={options}
value={value}
onChange={() => darkMode.toggle()}
size="small"
/>
</li>
)
}

5
src/components/molecules/UserPreferences/index.module.css
View File

@ -50,9 +50,8 @@
}
.preferencesDetails li {
padding-top: calc(var(--spacer) / 2);
border-bottom: 1px solid var(--border-color);
padding-bottom: calc(var(--spacer) / 2);
padding-top: calc(var(--spacer) / 3);
padding-bottom: calc(var(--spacer) / 3);
}
.preferencesDetails li:last-child,

4
src/components/molecules/UserPreferences/index.tsx
View File

@ -6,7 +6,7 @@ import Currency from './Currency'
import Debug from './Debug'
import { ReactComponent as Caret } from '../../../images/caret.svg'
import useDarkMode from 'use-dark-mode'
import Theme from './Theme'
import Appearance from './Appearance'
import { darkModeConfig } from '../../../../app.config'
export default function UserPreferences(): ReactElement {
@ -18,7 +18,7 @@ export default function UserPreferences(): ReactElement {
content={
<ul className={styles.preferencesDetails}>
<Currency />
<Theme darkMode={darkMode} />
<Appearance darkMode={darkMode} />
<Debug />
</ul>
}

3
src/images/copy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7895 0H1.68421C0.757895 0 0 0.654545 0 1.45455V11.6364H1.68421V1.45455H11.7895V0ZM14.3158 2.90909H5.05263C4.12632 2.90909 3.36842 3.56364 3.36842 4.36364V14.5455C3.36842 15.3455 4.12632 16 5.05263 16H14.3158C15.2421 16 16 15.3455 16 14.5455V4.36364C16 3.56364 15.2421 2.90909 14.3158 2.90909ZM14.3158 14.5455H5.05263V4.36364H14.3158V14.5455Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

4
src/images/external.svg
View File

@ -1,3 +1,3 @@
<svg width="15" height="16" viewBox="0 0 15 16" xmlns="http://www.w3.org/2000/svg">
<path d="M1.3158 15.229L12.8696 3.67517L12.7286 14.0733L14.6162 14.0478L14.8 0.428955L1.18121 0.612751L1.15442 2.49911L11.5538 2.35937L0 13.9132L1.3158 15.229Z" />
<svg width="14" height="15" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
<path d="M1.24467 14.429L12.1739 3.49969L12.0405 13.3357L13.8261 13.3116L14 0.428955L1.11736 0.602815L1.09201 2.38721L10.9293 2.25502L0 13.1843L1.24467 14.429Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 255 B

3
src/images/moon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="20" viewBox="0 0 12 20" xmlns="http://www.w3.org/2000/svg">
<path d="M0.383497 0.0683685C-0.0452013 0.11587 -0.146735 0.675883 0.244647 0.857554C3.69593 2.46093 5.92533 6.05018 5.92533 10.0003C5.92533 13.9504 3.69593 17.5396 0.244647 19.1438C-0.144999 19.3255 -0.0460696 19.8872 0.384364 19.9322C6.60309 20.6239 12 15.9346 12 10.0003C12 4.0568 6.59094 -0.625815 0.383497 0.0683685Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 417 B

4
src/images/refresh.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13.64 2.35C12.19 0.9 10.2 0 7.99 0C3.57 0 0 3.58 0 8C0 12.42 3.57 16 7.99 16C11.72 16 14.83 13.45 15.72 10H13.64C12.82 12.33 10.6 14 7.99 14C4.68 14 1.99 11.31 1.99 8C1.99 4.69 4.68 2 7.99 2C9.65 2 11.13 2.69 12.21 3.78L8.99 7H15.99V0L13.64 2.35Z" />
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6485 2.35C12.1976 0.9 10.2064 0 7.995 0C3.57223 0 0 3.58 0 8C0 12.42 3.57223 16 7.995 16C11.7273 16 14.8393 13.45 15.7298 10H13.6485C12.828 12.33 10.6066 14 7.995 14C4.68293 14 1.99124 11.31 1.99124 8C1.99124 4.69 4.68293 2 7.995 2C9.65603 2 11.137 2.69 12.2176 3.78L8.99562 7H16V0L13.6485 2.35Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 353 B

After

Width:  |  Height:  |  Size: 404 B

11
src/images/sun.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3.66667C6.95724 3.66667 3.66667 6.95619 3.66667 11C3.66667 15.0428 6.95724 18.3333 11 18.3333C15.0428 18.3333 18.3333 15.0428 18.3333 11C18.3333 6.95619 15.0428 3.66667 11 3.66667Z" />
<path d="M11 2.61905C10.7109 2.61905 10.4762 2.38333 10.4762 2.09524V0.52381C10.4762 0.233619 10.7109 0 11 0C11.2891 0 11.5238 0.233619 11.5238 0.52381V2.09524C11.5238 2.38333 11.2891 2.61905 11 2.61905Z" />
<path d="M16.9253 5.0736C16.7211 4.86932 16.7211 4.53722 16.9253 4.33294L18.0379 3.22036C18.2422 3.01608 18.5743 3.01608 18.7786 3.22036C18.9829 3.42465 18.9829 3.75675 18.7786 3.96103L17.666 5.0736C17.4628 5.27684 17.1307 5.27789 16.9253 5.0736Z" />
<path d="M21.4762 11.5238H19.9048C19.6156 11.5238 19.381 11.2881 19.381 11C19.381 10.7098 19.6156 10.4762 19.9048 10.4762H21.4762C21.7653 10.4762 22 10.7098 22 11C22 11.2881 21.7653 11.5238 21.4762 11.5238Z" />
<path d="M18.0379 18.7775L16.9253 17.667C16.7211 17.4628 16.7211 17.1307 16.9253 16.9264C17.1296 16.7221 17.4617 16.7221 17.666 16.9264L18.7786 18.0379C18.9829 18.2422 18.9829 18.5743 18.7786 18.7786C18.5733 18.9818 18.2422 18.9818 18.0379 18.7775Z" />
<path d="M11 22C10.7109 22 10.4762 21.7643 10.4762 21.4762V19.9048C10.4762 19.6146 10.7109 19.381 11 19.381C11.2891 19.381 11.5238 19.6146 11.5238 19.9048V21.4762C11.5238 21.7643 11.2891 22 11 22Z" />
<path d="M3.22139 18.7775C3.0171 18.5733 3.0171 18.2412 3.22139 18.0369L4.33396 16.9253C4.53825 16.7211 4.87034 16.7211 5.07463 16.9253C5.27891 17.1296 5.27891 17.4617 5.07463 17.666L3.96205 18.7765C3.75777 18.9818 3.42672 18.9818 3.22139 18.7775Z" />
<path d="M2.09524 11.5238H0.52381C0.234667 11.5238 0 11.2881 0 11C0 10.7098 0.234667 10.4762 0.52381 10.4762H2.09524C2.38438 10.4762 2.61905 10.7098 2.61905 11C2.61905 11.2881 2.38438 11.5238 2.09524 11.5238Z" />
<path d="M4.33396 5.0736L3.22139 3.96103C3.0171 3.75675 3.0171 3.42465 3.22139 3.22036C3.42567 3.01608 3.75777 3.01608 3.96205 3.22036L5.07463 4.33294C5.27891 4.53722 5.27891 4.86932 5.07463 5.0736C4.87034 5.27789 4.53825 5.27789 4.33396 5.0736Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB