color adjustments from feedback

Pigmice2733 · Jul 7, 2024 · 3033cf0 · 3033cf0
1 parent 84d9f92
commit 3033cf0
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 16 deletions.
diff --git a/src/components/analysis-table.tsx b/src/components/analysis-table.tsx
@@ -8,6 +8,7 @@ import {
   SortOrder,
   borderRightOnly,
   contextRowHeight,
+  borderRightOnlyDark,
 } from '@/components/table'
 import { formatPercent } from '@/utils/format-percent'
 import { useState } from 'preact/hooks'
@@ -92,6 +93,7 @@ const topLeftCellStyle = css`
 
   .dark & {
     background: black;
+    ${borderRightOnlyDark};
   }
 `
 
@@ -144,16 +146,31 @@ const contextSectionStyle = css`
 const rankStyle = css`
   box-shadow: inset 0 -0.15rem #398013;
   color: #398013;
+
+  .dark & {
+    color: #60b060;
+    box-shadow-color: #60b060;
+  }
 `
 
 const autoStyle = css`
   box-shadow: inset 0 -0.15rem ${blue};
   color: ${blue};
+
+  .dark & {
+    color: #56f;
+    box-shadow-color: #56f;
+  }
 `
 
 const teleopStyle = css`
   box-shadow: inset 0 -0.15rem ${red};
   color: ${red};
+
+  .dark & {
+    color: #d33;
+    box-shadow-color: #d33;
+  }
 `
 
 const settingsStyle = css`

diff --git a/src/components/chip.tsx b/src/components/chip.tsx
@@ -19,7 +19,7 @@ const chipStyle = css`
 
   .dark & {
     color: black;
-    background: #60b060;
+    background: #4a964a;
   }
 `
 

diff --git a/src/components/heading.tsx b/src/components/heading.tsx
@@ -12,6 +12,10 @@ const headingStyle = css`
   margin: 0;
   border-bottom: 0.13rem solid ${pigmicePurple};
   padding: 0 1rem 0.25rem;
+
+  .dark & {
+    border-bottom-color: #c000c0;
+  }
 `
 
 export const Heading = ({ level, ...props }: Props) => {

diff --git a/src/components/info-group-card.tsx b/src/components/info-group-card.tsx
@@ -22,7 +22,7 @@ const rowStyle = css`
   overflow: hidden;
 
   .dark & {
-    border-bottom: 0.1em solid #444;
+    border-bottom-color: #444;
   }
 
   &[href]:hover,

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -5,15 +5,12 @@ import { lightGrey, faintGrey, pigmicePurple, textGrey } from '@/colors'
 import clsx from 'clsx'
 import { BooleanDisplay } from './boolean-display'
 
-const darkTheme = localStorage.getItem('theme') === 'true'
-const lightGray = darkTheme ? lightGrey : textGrey
-const borderBottomAndRight = `box-shadow: inset -1px -1px ${lightGray}`
+const borderBottomAndRight = 'box-shadow: inset -1px -1px'
 // the 2nd shadow covers a tiny gap between the cells I couldn't otherwise remove
-export const borderRightOnly = `box-shadow: inset -1px 0 ${lightGray}, 0 1px 0 white`
-const borderBottomOnly = `box-shadow: inset 0 -1px ${lightGray}`
-const activeBorderBottomOnly = `box-shadow: inset 0 -0.15rem ${
-  darkTheme ? pigmicePurple : '#c000c0'
-}`
+export const borderRightOnly = `box-shadow: inset -1px 0 ${lightGrey}, 0 1px 0 white`
+export const borderRightOnlyDark = `box-shadow: inset -1px 0 ${textGrey}, 0 1px 0 white`
+const borderBottomOnly = 'box-shadow: inset 0 -1px'
+const activeBorderBottomOnly = 'box-shadow: inset 0 -0.15rem'
 
 const tableStyle = css`
   border-collapse: collapse;
@@ -39,14 +36,19 @@ const tableHeaderCellStyle = css`
   padding: 0;
   top: 0;
   background: white;
-  ${borderBottomOnly};
+  ${borderBottomOnly} ${lightGrey};
 
   .dark & {
     background: black;
+    ${borderBottomOnly} ${textGrey};
   }
 
   &.${activeStyle}:not(:first-child) {
-    ${activeBorderBottomOnly}
+    ${activeBorderBottomOnly} ${pigmicePurple};
+
+    .dark & {
+      ${activeBorderBottomOnly} #c000c0;
+    }
   }
 
   &.${activeStyle}:not(:first-child),
@@ -62,7 +64,11 @@ const tableHeaderCellStyle = css`
   &:first-child {
     left: 0;
     z-index: 1;
-    ${borderBottomAndRight};
+    ${borderBottomAndRight} ${lightGrey};
+
+    .dark & {
+      ${borderBottomAndRight} ${textGrey};
+    }
   }
 `
 
@@ -269,11 +275,12 @@ export const Table = <RowType extends any>({
 }
 
 const tableRowStyle = css`
-  ${borderBottomOnly};
+  ${borderBottomOnly} ${lightGrey};
   background: white;
 
   .dark & {
     background: black;
+    ${borderBottomOnly} ${textGrey};
   }
 
   &:hover {
@@ -292,14 +299,22 @@ const tableRowStyle = css`
 
   & td {
     padding: 0.8rem 0.6rem;
-    ${borderBottomOnly};
+    ${borderBottomOnly} ${lightGrey};
+
+    .dark & {
+      ${borderBottomOnly} ${textGrey};
+    }
   }
 
   & th:last-of-type {
     position: sticky;
     left: 0;
     background: inherit;
-    ${borderBottomAndRight}
+    ${borderBottomAndRight} ${lightGrey};
+
+    .dark & {
+      ${borderBottomAndRight} ${textGrey};
+    }
   }
 `
 

diff --git a/src/routes/event-match.tsx b/src/routes/event-match.tsx
@@ -47,10 +47,18 @@ const matchStyle = css`
   /* extra selectors for specificity */
   a.${tableTeamStyle}.${redStyle} {
     color: ${red};
+
+    .dark & {
+      color: #d33;
+    }
   }
 
   a.${tableTeamStyle}.${blueStyle} {
     color: ${blue};
+
+    .dark & {
+      color: #56f;
+    }
   }
 `
 
@@ -402,14 +410,26 @@ const matchScoreStyle = css`
   & > * {
     padding: 1.5rem 0;
     color: white;
+
+    .dark & {
+      color: black;
+    }
   }
 `
 
 const redScoreStyle = css`
   background: ${red};
+
+  .dark & {
+    background: #d33;
+  }
 `
 const blueScoreStyle = css`
   background: ${blue};
+
+  .dark & {
+    background: #56f;
+  }
 `
 
 const activeDisplayModeStyle = css``