Better dark mode colors

crabfit-frontend/src/App.tsx

@@ -97,17 +97,17 @@ const App = () => {
 							borderRadius: 100,
 							border: `4px solid ${theme.primaryBackground}`,
 							width: 12,
-							background: `${theme.primaryLight}AA`,
+							background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}AA`,
 						},
 						'*::-webkit-scrollbar-thumb:hover': {
-							background: `${theme.primaryLight}CC`,
+							background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}CC`,
 						},
 						'*::-webkit-scrollbar-thumb:active': {
-							background: `${theme.primaryLight}`,
+							background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}`,
 						},
 					})}
 				/>
-        
+
         <Suspense fallback={<Loading />}>
           <Settings />
         </Suspense>

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -12,10 +12,9 @@ export const Pressable = styled.button`
   font: inherit;
   box-sizing: border-box;
   background: ${props => props.primaryColor || props.theme.primary};
-  color: #FFF;
+  color: ${props => props.primaryColor ? '#FFF' : props.theme.background};
   font-weight: 600;
-	text-shadow: 0 -1px .5px ${props => props.secondaryColor || props.theme.primaryDark};
+  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1);
-  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
   border-radius: 3px;
   padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'};
   transform-style: preserve-3d;
@@ -55,7 +54,6 @@ export const Pressable = styled.button`
   }
 
   ${props => props.isLoading && `
-		text-shadow: none;
 		color: transparent;
 		cursor: wait;
 
@@ -103,4 +101,18 @@ export const Pressable = styled.button`
       }
     }
 	`}
+
+  ${props => props.alt && `
+    background: transparent;
+    border: 1px solid ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
+    color: ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
+    margin-bottom: 0;
+
+    &::before {
+      content: none;
+    }
+    &:hover, &:active {
+      transform: none;
+    }
+  `}
 `;

crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts

@@ -78,7 +78,7 @@ export const Date = styled.button`
   }
 
 	background-color: ${props => props.theme.primaryBackground};
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.primary};
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -87,20 +87,18 @@ export const Date = styled.button`
 	touch-action: none;
 
 	${props => props.otherMonth && `
-		color: ${props.theme.primaryLight};
+		color: ${props.theme.mode === 'light' ? props.theme.primaryLight : props.theme.primaryDark};
 	`}
 	${props => props.isToday && `
 		font-weight: 900;
-		color: ${props.theme.primaryDark};
+		color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
 	`}
 	${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
 		color: ${props.otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'};
 		background-color: ${props.theme.primary};
-		border-color: ${props.theme.primary};
 	`}
 	${props => props.mode === 'remove' && props.selecting && `
 		background-color: ${props.theme.primaryBackground};
-		border: 1px solid ${props.theme.primaryLight};
 		color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')};
 	`}
 `;

crabfit-frontend/src/components/Donate/Donate.tsx

@@ -118,6 +118,7 @@ const Donate = () => {
         target="_blank"
         rel="noreferrer"
         ref={buttonRef}
+        style={{ whiteSpace: 'nowrap' }}
 			>{t('donate.button')}</Button>
 
       <Options

crabfit-frontend/src/components/Error/errorStyle.ts

@@ -4,7 +4,7 @@ export const Wrapper = styled.div`
 	border-radius: 3px;
 	background-color: ${props => props.theme.error};
 	color: #FFFFFF;
-	padding: 12px 16px;
+	padding: 0 16px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -13,16 +13,17 @@ export const Wrapper = styled.div`
   max-height: 0;
   margin: 0;
   visibility: hidden;
-  transition: margin .2s, max-height .2s;
+  transition: margin .2s, padding .2s, max-height .2s;
 
   ${props => props.open && `
     opacity: 1;
     visibility: visible;
     margin: 20px 0;
+    padding: 12px 16px;
     max-height: 60px;
-    transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s;
+    transition: opacity .15s .2s, max-height .2s, margin .2s, padding .2s, visibility .2s;
   `}
-  
+
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }

crabfit-frontend/src/components/Recents/recentsStyle.ts

@@ -12,7 +12,7 @@ export const Recent = styled.a`
   & .name {
     font-weight: 700;
     font-size: 1.1em;
-    color: ${props => props.theme.primaryDark};
+    color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
     flex: 1;
     display: block;
   }

crabfit-frontend/src/components/SelectField/selectFieldStyle.ts

@@ -38,8 +38,8 @@ export const StyledSelect = styled.select`
 	background: ${props => props.theme.primaryBackground};
 	color: inherit;
 	padding: 10px 14px;
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.primary};
-	box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight};
+	box-shadow: inset 0 0 0 0 ${props => props.theme.primary};
 	border-radius: 3px;
 	outline: none;
 	transition: border-color .15s, box-shadow .15s;
@@ -50,8 +50,8 @@ export const StyledSelect = styled.select`
   background-size: 1em;
 
 	&:focus {
-		border: 1px solid ${props => props.theme.primary};
+		border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
-		box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary};
+		box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
 	}
 
   ${props => props.small && `

crabfit-frontend/src/components/TextField/textFieldStyle.ts

@@ -32,15 +32,15 @@ export const StyledInput = styled.input`
 	background: ${props => props.theme.primaryBackground};
 	color: inherit;
 	padding: 10px 14px;
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.primary};
-	box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight};
+	box-shadow: inset 0 0 0 0 ${props => props.theme.primary};
 	border-radius: 3px;
 	font-size: 18px;
 	outline: none;
 	transition: border-color .15s, box-shadow .15s;
 
 	&:focus {
-		border: 1px solid ${props => props.theme.primary};
+		border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
-		box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary};
+		box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
 	}
 `;

crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts

@@ -20,7 +20,7 @@ export const StyledSubLabel = styled.label`
 export const Range = styled.div`
 	user-select: none;
 	background-color: ${props => props.theme.primaryBackground};
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.primary};
 	border-radius: 3px;
 	height: 50px;
 	position: relative;

crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts

@@ -9,9 +9,14 @@ export const ToggleContainer = styled.div`
   border: 1px solid ${props => props.theme.primary};
   border-radius: 3px;
   overflow: hidden;
+  --focus-color: ${props => props.theme.primary};
 
-  &:focus-within label {
+  &:focus-within {
-    box-shadow: inset 0 -3px 0 0 var(--focus-color);
+    --focus-color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
+    border: 1px solid var(--focus-color);
+    & label {
+      box-shadow: inset 0 -3px 0 0 var(--focus-color);
+    }
   }
 
   & > div:first-of-type label {
@@ -41,8 +46,7 @@ export const HiddenInput = styled.input`
 
   &:checked + label {
     color: ${props => props.theme.background};
-    background-color: ${props => props.theme.primary};
+    background-color: var(--focus-color);
-    --focus-color: ${props => props.theme.primaryDark};
   }
 `;
 
@@ -57,5 +61,4 @@ export const LabelButton = styled.label`
   align-items: center;
   justify-content: center;
   transition: box-shadow .15s;
-  --focus-color: ${props => props.theme.primary};
 `;

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -17,7 +17,7 @@ export const TitleSmall = styled.span`
 	text-align: center;
 	font-family: 'Samurai Bob', sans-serif;
 	font-weight: 400;
-	color: ${props => props.theme.primaryDark};
+	color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
 	line-height: 1em;
   text-transform: uppercase;
 
@@ -113,7 +113,7 @@ export const Stat = styled.div`
 export const StatNumber = styled.span`
 	display: block;
 	font-weight: 900;
-	color: ${props => props.theme.primaryDark};
+	color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
 	font-size: 2em;
 `;
 

crabfit-frontend/src/theme/index.ts

@@ -15,8 +15,8 @@ const theme = {
 		background: '#111111',
 		text: '#DDDDDD',
 		primary: '#F79E00',
-		primaryDark: '#F4BB60',
+		primaryDark: '#CC7313',
-		primaryLight: '#F48600',
+		primaryLight: '#F4BB60',
 		primaryBackground: '#30240F',
 		error: '#E53935',
 		loading: '#444444',