diff --git a/crabfit-frontend/public/index.css b/crabfit-frontend/public/index.css index abe65c8..c7ce2f9 100644 --- a/crabfit-frontend/public/index.css +++ b/crabfit-frontend/public/index.css @@ -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+ */ diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js index 4f8e6bd..59f99f3 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js @@ -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 ); `} diff --git a/crabfit-frontend/src/components/Button/Button.styles.js b/crabfit-frontend/src/components/Button/Button.styles.js index e9721cd..295c25f 100644 --- a/crabfit-frontend/src/components/Button/Button.styles.js +++ b/crabfit-frontend/src/components/Button/Button.styles.js @@ -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); diff --git a/crabfit-frontend/src/components/Donate/Donate.styles.js b/crabfit-frontend/src/components/Donate/Donate.styles.js index 5b008b6..ee22153 100644 --- a/crabfit-frontend/src/components/Donate/Donate.styles.js +++ b/crabfit-frontend/src/components/Donate/Donate.styles.js @@ -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; diff --git a/crabfit-frontend/src/components/Error/Error.jsx b/crabfit-frontend/src/components/Error/Error.jsx index f9fbae9..fdea594 100644 --- a/crabfit-frontend/src/components/Error/Error.jsx +++ b/crabfit-frontend/src/components/Error/Error.jsx @@ -1,3 +1,5 @@ +import { X } from 'lucide-react' + import { Wrapper, CloseButton } from './Error.styles' const Error = ({ @@ -8,9 +10,7 @@ const Error = ({ }) => ( {children} - - - + ) diff --git a/crabfit-frontend/src/components/Error/Error.styles.js b/crabfit-frontend/src/components/Error/Error.styles.js index a3c804a..4164a3b 100644 --- a/crabfit-frontend/src/components/Error/Error.styles.js +++ b/crabfit-frontend/src/components/Error/Error.styles.js @@ -40,4 +40,5 @@ export const CloseButton = styled('button')` align-items: center; justify-content: center; margin-left: 16px; + padding: 0; ` diff --git a/crabfit-frontend/src/components/Legend/Legend.jsx b/crabfit-frontend/src/components/Legend/Legend.jsx index 0c7cd15..53f5632 100644 --- a/crabfit-frontend/src/components/Legend/Legend.jsx +++ b/crabfit-frontend/src/components/Legend/Legend.jsx @@ -31,7 +31,7 @@ const Legend = ({ {[...Array(max+1-min).keys()].map(i => i+min).map(i => 0} onMouseOver={() => onSegmentFocus(i)} /> diff --git a/crabfit-frontend/src/components/Legend/Legend.styles.js b/crabfit-frontend/src/components/Legend/Legend.styles.js index c1423e1..c52040e 100644 --- a/crabfit-frontend/src/components/Legend/Legend.styles.js +++ b/crabfit-frontend/src/components/Legend/Legend.styles.js @@ -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 ); `} ` diff --git a/crabfit-frontend/src/components/Logo/Logo.styles.js b/crabfit-frontend/src/components/Logo/Logo.styles.js index 09424b6..99afb41 100644 --- a/crabfit-frontend/src/components/Logo/Logo.styles.js +++ b/crabfit-frontend/src/components/Logo/Logo.styles.js @@ -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; ` diff --git a/crabfit-frontend/src/components/SelectField/SelectField.styles.js b/crabfit-frontend/src/components/SelectField/SelectField.styles.js index 19d1c98..f9f1731 100644 --- a/crabfit-frontend/src/components/SelectField/SelectField.styles.js +++ b/crabfit-frontend/src/components/SelectField/SelectField.styles.js @@ -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,
▼
"); + background-image: url('data:image/svg+xml,${encodeURIComponent('
▼
')}'); background-repeat: no-repeat; background-position: right 10px center; background-size: 1em; - */ &:focus { border: 1px solid var(--secondary); diff --git a/crabfit-frontend/src/components/Settings/Settings.jsx b/crabfit-frontend/src/components/Settings/Settings.jsx index 75020da..0370524 100644 --- a/crabfit-frontend/src/components/Settings/Settings.jsx +++ b/crabfit-frontend/src/components/Settings/Settings.jsx @@ -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')} - > - - + > setIsOpen(false)} /> diff --git a/crabfit-frontend/src/components/Settings/Settings.styles.js b/crabfit-frontend/src/components/Settings/Settings.styles.js index d692b23..ad7b62d 100644 --- a/crabfit-frontend/src/components/Settings/Settings.styles.js +++ b/crabfit-frontend/src/components/Settings/Settings.styles.js @@ -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; diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js index ed7baa5..fcaecc8 100644 --- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js +++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js @@ -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 { diff --git a/crabfit-frontend/src/components/ToggleField/ToggleField.jsx b/crabfit-frontend/src/components/ToggleField/ToggleField.jsx index c35e674..67fdfe7 100644 --- a/crabfit-frontend/src/components/ToggleField/ToggleField.jsx +++ b/crabfit-frontend/src/components/ToggleField/ToggleField.jsx @@ -1,3 +1,5 @@ +import { Info } from 'lucide-react' + import { Wrapper, ToggleContainer, @@ -17,7 +19,7 @@ const ToggleField = ({ inputRef, }) => ( - {label && {label} {title !== '' && }} + {label && {label} {title !== '' && }} {Object.entries(options).map(([key, label]) => diff --git a/crabfit-frontend/src/components/TranslateDialog/TranslateDialog.styles.js b/crabfit-frontend/src/components/TranslateDialog/TranslateDialog.styles.js index 2366080..d4f782b 100644 --- a/crabfit-frontend/src/components/TranslateDialog/TranslateDialog.styles.js +++ b/crabfit-frontend/src/components/TranslateDialog/TranslateDialog.styles.js @@ -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; diff --git a/crabfit-frontend/src/components/UpdateDialog/UpdateDialog.styles.js b/crabfit-frontend/src/components/UpdateDialog/UpdateDialog.styles.js index 2becb85..fb4ca37 100644 --- a/crabfit-frontend/src/components/UpdateDialog/UpdateDialog.styles.js +++ b/crabfit-frontend/src/components/UpdateDialog/UpdateDialog.styles.js @@ -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; diff --git a/crabfit-frontend/src/pages/Event/Event.jsx b/crabfit-frontend/src/pages/Event/Event.jsx index d955325..7e0f6ab 100644 --- a/crabfit-frontend/src/pages/Event/Event.jsx +++ b/crabfit-frontend/src/pages/Event/Event.jsx @@ -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')} @@ -412,7 +412,7 @@ const Event = () => { e.preventDefault() setTab('group') }} - selected={tab === 'group'} + $selected={tab === 'group'} >{t('event:tabs.group')} diff --git a/crabfit-frontend/src/pages/Help/Help.styles.js b/crabfit-frontend/src/pages/Help/Help.styles.js index bb52dfc..b0e4e26 100644 --- a/crabfit-frontend/src/pages/Help/Help.styles.js +++ b/crabfit-frontend/src/pages/Help/Help.styles.js @@ -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 { diff --git a/crabfit-frontend/src/pages/Home/Home.styles.js b/crabfit-frontend/src/pages/Home/Home.styles.js index af670c5..05a356c 100644 --- a/crabfit-frontend/src/pages/Home/Home.styles.js +++ b/crabfit-frontend/src/pages/Home/Home.styles.js @@ -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;