scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix colours and use lucide for icons

Browse source
This commit is contained in:
Ben Grant 2022-08-19 15:28:07 +10:00
parent f2c1107276
commit bd54cee952
19 changed files with 70 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
crabfit-frontend/public/index.css
View file

@ -23,12 +23,15 @@
:root {
color-scheme: light dark;
--primary: #F79E00;
/* LIGHT */
--background-light: #FFFFFF;
--text-light: #000000;
--primary-light: #F79E00;
--secondary-light: #F48600;
--tertiary-light: #F4BB60;
--shadow-light: #F48600;
--highlight-light: #F4BB60;
--secondary-light: var(--shadow-light);
--tertiary-light: var(--highlight-light);
--surface-light: #FEF2DD;
--error-light: #D32F2F;
--loading-light: #DDDDDD;
@ -37,9 +40,10 @@
/* DARK */
--background-dark: #111111;
--text-dark: #DDDDDD;
--primary-dark: #F79E00;
--secondary-dark: #F4BB60;
--tertiary-dark: #CC7313;
--shadow-dark: #CC7313;
--highlight-dark: #F4BB60;
--secondary-dark: var(--highlight-dark);
--tertiary-dark: var(--shadow-dark);
--surface-dark: #30240F;
--error-dark: #E53935;
--loading-dark: #444444;
@ -48,7 +52,8 @@
/* Define light defaults */
--background: var(--background-light);
--text: var(--text-light);
--primary: var(--primary-light);
--shadow: var(--shadow-light);
--highlight: var(--highlight-light);
--secondary: var(--secondary-light);
--tertiary: var(--tertiary-light);
--surface: var(--surface-light);
@ -61,7 +66,8 @@
:root {
--background: var(--background-dark);
--text: var(--text-dark);
--primary: var(--primary-dark);
--shadow: var(--shadow-dark);
--highlight: var(--highlight-dark);
--secondary: var(--secondary-dark);
--tertiary: var(--tertiary-dark);
--surface: var(--surface-dark);
@ -90,7 +96,8 @@ body {
--background: var(--background-light);
--text: var(--text-light);
--primary: var(--primary-light);
--shadow: var(--shadow-light);
--highlight: var(--highlight-light);
--secondary: var(--secondary-light);
--tertiary: var(--tertiary-light);
--surface: var(--surface-light);
@ -105,7 +112,8 @@ body {
--background: var(--background-dark);
--text: var(--text-dark);
--primary: var(--primary-dark);
--shadow: var(--shadow-dark);
--highlight: var(--highlight-dark);
--secondary: var(--secondary-dark);
--tertiary: var(--tertiary-dark);
--surface: var(--surface-dark);
@ -136,13 +144,13 @@ a {
border-radius: 100px;
border: 4px solid var(--surface);
width: 12px;
background: var(--secondary);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--tertiary);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
*::-webkit-scrollbar-thumb:active {
background: red;
background: var(--secondary);
}
/* IE 10+ */

6
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
View file

@ -86,15 +86,15 @@ export const Time = styled('div')`
border-top: 2px dotted var(--text);
`}
background-color: ${props => `#FF0000${Math.round((props.$peopleCount/props.$maxPeople)*255).toString(16)}`};
background-color: ${props => `#F79E00${Math.round((props.$peopleCount/props.$maxPeople)*255).toString(16)}`};
${props => props.$highlight && props.$peopleCount === props.$maxPeople && props.$peopleCount > 0 && `
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 4.3px,
var(--secondary) 4.3px,
var(--secondary) 8.6px
var(--shadow) 4.3px,
var(--shadow) 8.6px
);
`}

2
crabfit-frontend/src/components/Button/Button.styles.js
View file

@ -39,7 +39,7 @@ export const Pressable = styled('button')`
width: 100%;
top: 0;
left: 0;
background: ${props => props.$secondaryColor || 'var(--secondary)'};
background: ${props => props.$secondaryColor || 'var(--shadow)'};
border-radius: inherit;
transform: translate3d(0, 5px, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);

4
crabfit-frontend/src/components/Donate/Donate.styles.js
View file

@ -12,9 +12,7 @@ export const Options = styled('div', forwardRef)`
bottom: calc(100% + 20px);
right: 0;
background-color: var(--background);
${/* FIXME: ${props => props.theme.mode === 'dark' && `
border: 1px solid ${props.theme.primaryBackground};
`} */''}
border: 1px solid var(--surface);
z-index: 60;
padding: 4px 10px;
border-radius: 14px;

6
crabfit-frontend/src/components/Error/Error.jsx
View file

@ -1,3 +1,5 @@
import { X } from 'lucide-react'
import { Wrapper, CloseButton } from './Error.styles'
const Error = ({
@ -8,9 +10,7 @@ const Error = ({
}) => (
<Wrapper role="alert" open={open} {...props}>
{children}
<CloseButton type="button" onClick={onClose} title="Close error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</CloseButton>
<CloseButton type="button" onClick={onClose} title="Close error"><X /></CloseButton>
</Wrapper>
)

1
crabfit-frontend/src/components/Error/Error.styles.js
View file

@ -40,4 +40,5 @@ export const CloseButton = styled('button')`
align-items: center;
justify-content: center;
margin-left: 16px;
padding: 0;
`

2
crabfit-frontend/src/components/Legend/Legend.jsx
View file

@ -31,7 +31,7 @@ const Legend = ({
{[...Array(max+1-min).keys()].map(i => i+min).map(i =>
<Grade
key={i}
$color={`#FF0000${Math.round((i/(max))*255).toString(16)}`}
$color={`#F79E00${Math.round((i/(max))*255).toString(16)}`}
$highlight={highlight && i === max && max > 0}
onMouseOver={() => onSegmentFocus(i)}
/>

4
crabfit-frontend/src/components/Legend/Legend.styles.js
View file

@ -45,8 +45,8 @@ export const Grade = styled('div')`
45deg,
var(--primary),
var(--primary) 4.5px,
var(--secondary) 4.5px,
var(--secondary) 9px
var(--shadow) 4.5px,
var(--shadow) 9px
);
`}
`

2
crabfit-frontend/src/components/Logo/Logo.styles.js
View file

@ -51,7 +51,7 @@ export const Title = styled('span')`
color: var(--primary);
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 var(--secondary);
text-shadow: 0 2px 0 var(--shadow);
line-height: 1em;
`

4
crabfit-frontend/src/components/SelectField/SelectField.styles.js
View file

@ -44,13 +44,11 @@ export const StyledSelect = styled('select', forwardRef)`
border-radius: 3px;
outline: none;
transition: border-color .15s, box-shadow .15s;
/* FIXME:
appearance: none;
background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><foreignObject width=%22100px%22 height=%22100px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:red;font-size:60px;display:flex;align-items:center;justify-content:center;height:100%25;width:100%25%22>▼</div></foreignObject></svg>");
background-image: url('data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><foreignObject width="100px" height="100px"><div xmlns="http://www.w3.org/1999/xhtml" style="color:#F79E00;font-size:60px;display:flex;align-items:center;justify-content:center;height:100%;width:100%;">▼</div></foreignObject></svg>')}');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 1em;
*/
&:focus {
border: 1px solid var(--secondary);

5
crabfit-frontend/src/components/Settings/Settings.jsx
View file

@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
import { useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import dayjs from 'dayjs'
import { Settings as SettingsIcon } from 'lucide-react'
import { ToggleField, SelectField } from '/src/components'
@ -80,9 +81,7 @@ const Settings = () => {
$isOpen={isOpen}
type="button"
onClick={() => setIsOpen(!isOpen)} title={t('options.name')}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--text)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</OpenButton>
><SettingsIcon /></OpenButton>
<Cover $isOpen={isOpen} onClick={() => setIsOpen(false)} />
<Modal $isOpen={isOpen}>

13
crabfit-frontend/src/components/Settings/Settings.styles.js
View file

@ -19,15 +19,8 @@ export const OpenButton = styled('button')`
transition: transform .15s;
padding: 0;
&:focus {
outline: 0;
}
&:focus-visible {
/* FIXME: background-color: props => props.theme.text22; */
}
${props => props.$isOpen && `
transform: rotate(-45deg);
transform: rotate(-60deg);
`}
@media (prefers-reduced-motion: reduce) {
@ -57,9 +50,7 @@ export const Modal = styled('div')`
top: 70px;
right: 12px;
background-color: var(--background);
${/* FIXME: props => props.theme.mode === 'dark' && `
border: 1px solid props.theme.primaryBackground;
` */''}
border: 1px solid var(--surface);
z-index: 150;
padding: 10px 18px;
border-radius: 3px;

4
crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js
View file

@ -32,7 +32,7 @@ export const Handle = styled('div')`
height: calc(100% + 20px);
width: 20px;
border: 1px solid var(--primary);
background-color: var(--tertiary);
background-color: var(--highlight);
border-radius: 3px;
position: absolute;
top: -10px;
@ -55,7 +55,7 @@ export const Handle = styled('div')`
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
color: var(--shadow);
}
&:before {

4
crabfit-frontend/src/components/ToggleField/ToggleField.jsx
View file

@ -1,3 +1,5 @@
import { Info } from 'lucide-react'
import {
Wrapper,
ToggleContainer,
@ -17,7 +19,7 @@ const ToggleField = ({
inputRef,
}) => (
<Wrapper>
{label && <StyledLabel title={title}>{label} {title !== '' && <svg viewBox="0 0 24 24"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>}</StyledLabel>}
{label && <StyledLabel title={title}>{label} {title !== '' && <Info />}</StyledLabel>}
<ToggleContainer>
{Object.entries(options).map(([key, label]) =>

4
crabfit-frontend/src/components/TranslateDialog/TranslateDialog.styles.js
View file

@ -5,9 +5,7 @@ export const Wrapper = styled('div')`
top: 20px;
left: 20px;
background-color: var(--background);
/* FIXME: ${props => props.theme.mode === 'dark' && `
border: 1px solid ${props.theme.primaryBackground};
`} */
border: 1px solid var(--surface);
z-index: 900;
padding: 20px;
border-radius: 3px;

4
crabfit-frontend/src/components/UpdateDialog/UpdateDialog.styles.js
View file

@ -5,9 +5,7 @@ export const Wrapper = styled('div')`
bottom: 20px;
right: 20px;
background-color: var(--background);
/* FIXME: ${props => props.theme.mode === 'dark' && `
border: 1px solid ${props.theme.primaryBackground};
`} */
border: 1px solid var(--surface);
z-index: 900;
padding: 20px 26px;
border-radius: 3px;

4
crabfit-frontend/src/pages/Event/Event.jsx
View file

@ -402,7 +402,7 @@ const Event = () => {
setFocus('name')
}
}}
selected={tab === 'you'}
$selected={tab === 'you'}
disabled={!user}
title={user ? '' : t('event:tabs.you_tooltip')}
>{t('event:tabs.you')}</Tab>
@ -412,7 +412,7 @@ const Event = () => {
e.preventDefault()
setTab('group')
}}
selected={tab === 'group'}
$selected={tab === 'group'}
>{t('event:tabs.group')}</Tab>
</Tabs>
</StyledMain>

4
crabfit-frontend/src/pages/Help/Help.styles.js
View file

@ -63,7 +63,7 @@ export const FakeTimeRange = styled('div')`
height: calc(100% + 20px);
width: 20px;
border: 1px solid var(--primary);
background-color: var(--tertiary);
background-color: var(--highlight);
border-radius: 3px;
position: absolute;
top: -10px;
@ -79,7 +79,7 @@ export const FakeTimeRange = styled('div')`
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
color: var(--shadow);
}
&:before {

38
crabfit-frontend/src/pages/Home/Home.styles.js
View file

@ -1,4 +1,4 @@
import { styled } from 'goober'
import { keyframes, styled } from 'goober'
export const StyledMain = styled('div')`
width: 600px;
@ -37,7 +37,7 @@ export const TitleLarge = styled('h1')`
color: var(--primary);
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 4px 0 var(--secondary);
text-shadow: 0 4px 0 var(--shadow);
line-height: 1em;
text-transform: uppercase;
@ -46,27 +46,27 @@ export const TitleLarge = styled('h1')`
}
`
const jelly = keyframes`
from,to {
transform: scale(1,1);
}
25% {
transform: scale(.9,1.1);
}
50% {
transform: scale(1.1,.9);
}
75% {
transform: scale(.95,1.05);
}
`
export const Logo = styled('img')`
width: 80px;
transition: transform .15s;
animation: jelly .5s 1 .05s;
animation: ${jelly} .5s 1 .05s;
user-select: none;
@keyframes jelly {
from,to {
transform: scale(1,1)
}
25% {
transform: scale(.9,1.1)
}
50% {
transform: scale(1.1,.9)
}
75% {
transform: scale(.95,1.05)
}
}
&:active {
animation: none;
transform: scale(.85);
@ -196,7 +196,7 @@ export const VideoLink = styled('a')`
background: currentColor;
border-radius: 100%;
margin: 0 auto .4em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='red' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F79E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1em;