Fix colours and use lucide for icons

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;
+  --shadow-light: #F48600;
-  --secondary-light: #F48600;
+  --highlight-light: #F4BB60;
-  --tertiary-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;
+  --shadow-dark: #CC7313;
-  --secondary-dark: #F4BB60;
+  --highlight-dark: #F4BB60;
-  --tertiary-dark: #CC7313;
+  --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+ */

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(--shadow) 4.3px,
-      var(--secondary) 8.6px
+      var(--shadow) 8.6px
     );
   `}
 

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);

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 var(--surface);
-    border: 1px solid ${props.theme.primaryBackground};
-  `} */''}
   z-index: 60;
   padding: 4px 10px;
   border-radius: 14px;

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 = ({
 }) => (
   <Wrapper role="alert" open={open} {...props}>
     {children}
-    <CloseButton type="button" onClick={onClose} title="Close error">
+    <CloseButton type="button" onClick={onClose} title="Close error"><X /></CloseButton>
-      <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>
   </Wrapper>
 )
 

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;
 `

crabfit-frontend/src/components/Legend/Legend.jsx

@@ -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)}
           />

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(--shadow) 4.5px,
-      var(--secondary) 9px
+      var(--shadow) 9px
     );
   `}
 `

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;
 `
 

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,<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);

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')}
-      >
+      ><SettingsIcon /></OpenButton>
-        <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>
 
       <Cover $isOpen={isOpen} onClick={() => setIsOpen(false)} />
       <Modal $isOpen={isOpen}>

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 var(--surface);
-    border: 1px solid props.theme.primaryBackground;
-  ` */''}
   z-index: 150;
   padding: 10px 18px;
   border-radius: 3px;

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 {

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,
 }) => (
   <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]) =>

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 var(--surface);
-    border: 1px solid ${props.theme.primaryBackground};
-  `} */
   z-index: 900;
   padding: 20px;
   border-radius: 3px;

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 var(--surface);
-    border: 1px solid ${props.theme.primaryBackground};
-  `} */
   z-index: 900;
   padding: 20px 26px;
   border-radius: 3px;

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')}</Tab>
@@ -412,7 +412,7 @@ const Event = () => {
                   e.preventDefault()
                   setTab('group')
                 }}
-                selected={tab === 'group'}
+                $selected={tab === 'group'}
               >{t('event:tabs.group')}</Tab>
             </Tabs>
           </StyledMain>

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 {

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;