Allow specifying error color and verified color for embeds

crosshare-org · Jan 12, 2024 · a298dc6 · a298dc6
1 parent 7fa559f
commit a298dc6
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 23 deletions.
diff --git a/app/components/EmbedOverlay.tsx b/app/components/EmbedOverlay.tsx
@@ -12,7 +12,13 @@ import { Overlay } from './Overlay';
 import { User } from 'firebase/auth';
 import { CopyableInput } from './CopyableInput';
 import { EmbedOptionsT, validate } from '../lib/embedOptions';
-import { colorTheme, LINK, PRIMARY } from '../lib/style';
+import {
+  colorTheme,
+  ERROR_COLOR,
+  LINK,
+  PRIMARY,
+  VERIFIED_COLOR,
+} from '../lib/style';
 import { adjustHue, parseToRgba, guard } from 'color2k';
 import { GridView } from './Grid';
 import { fromCells } from '../lib/viewableGrid';
@@ -194,8 +200,10 @@ const ColorPicker = (props: ColorPickerProps) => {
 
 const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
   const [isDark, setIsDark] = useState(props.d || false);
-  const [primary, setPrimary] = useState(props.p || PRIMARY);
-  const [link, setLink] = useState(props.l || LINK);
+  const [primaryColor, setPrimaryColor] = useState(props.p || PRIMARY);
+  const [linkColor, setLinkColor] = useState(props.l || LINK);
+  const [errorColor, setErrorColor] = useState(props.e || ERROR_COLOR);
+  const [verifiedColor, setVerifiedColor] = useState(props.v || VERIFIED_COLOR);
   const [preservePrimary, setPreservePrimary] = useState(props.pp || false);
   const [dirty, setDirty] = useState(false);
   const [customFontEnabled, setCustomFontEnabled] = useState<boolean>(
@@ -210,8 +218,10 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
 
   const saveTheme = useCallback(() => {
     const theme: EmbedOptionsT = {
-      p: primary,
-      l: link,
+      p: primaryColor,
+      l: linkColor,
+      e: errorColor,
+      v: verifiedColor,
       d: isDark,
       pp: preservePrimary,
       ...(customFontEnabled &&
@@ -234,8 +244,10 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       });
   }, [
     isDark,
-    primary,
-    link,
+    primaryColor,
+    linkColor,
+    errorColor,
+    verifiedColor,
     preservePrimary,
     props.userId,
     props.slate,
@@ -292,19 +304,37 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       <h4>Colors</h4>
       <h5>Primary Color</h5>
       <ColorPicker
-        initial={primary}
+        initial={primaryColor}
         swatchBase={PRIMARY}
         onChange={(c) => {
-          setPrimary(c);
+          setPrimaryColor(c);
           setDirty(true);
         }}
       />
       <h5>Link/Button Color</h5>
       <ColorPicker
-        initial={link}
+        initial={linkColor}
         swatchBase={LINK}
         onChange={(c) => {
-          setLink(c);
+          setLinkColor(c);
+          setDirty(true);
+        }}
+      />
+      <h5>Incorrect Cell Color</h5>
+      <ColorPicker
+        initial={errorColor}
+        swatchBase={ERROR_COLOR}
+        onChange={(c) => {
+          setErrorColor(c);
+          setDirty(true);
+        }}
+      />
+      <h5>Verified Cell Color</h5>
+      <ColorPicker
+        initial={verifiedColor}
+        swatchBase={VERIFIED_COLOR}
+        onChange={(c) => {
+          setVerifiedColor(c);
           setDirty(true);
         }}
       />
@@ -435,12 +465,22 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
                 fontFamily: 'CrossharePreview',
               }),
           },
-          colorTheme({ primary, link, darkMode: isDark, preservePrimary }),
+          colorTheme({
+            primary: primaryColor,
+            link: linkColor,
+            errorColor,
+            verifiedColor,
+            darkMode: isDark,
+            preservePrimary,
+          }),
         ]}
       >
         <div css={{ width: 200, height: 200 }}>
           <GridView
             grid={dummyGrid}
+            revealedCells={new Set([1])}
+            verifiedCells={new Set([1])}
+            wrongCells={new Set([2])}
             active={{ row: 2, col: 1, dir: Direction.Across }}
             dispatch={() => {
               /* noop */

diff --git a/app/components/EmbedStyling.tsx b/app/components/EmbedStyling.tsx
@@ -5,6 +5,8 @@ import type { CSSInterpolation } from '@emotion/serialize';
 export interface EmbedStylingProps {
   primary: string;
   link: string;
+  errorColor: string;
+  verifiedColor: string;
   darkMode: boolean;
   preservePrimary: boolean;
   fontUrl?: string;

diff --git a/app/lib/embedOptions.ts b/app/lib/embedOptions.ts
@@ -8,6 +8,10 @@ const EmbedOptionsV = t.partial({
   p: t.string,
   /** link color */
   l: t.string,
+  /** error color */
+  e: t.string,
+  /** verified color */
+  v: t.string,
   /** use dark theme? */
   d: t.boolean,
   /** don't transform colors for dark theme? */

diff --git a/app/lib/hooks.ts b/app/lib/hooks.ts
@@ -9,7 +9,7 @@ import {
 import { ConstructorPageT } from './constructorPage';
 import useResizeObserver from 'use-resize-observer';
 import type { User } from 'firebase/auth';
-import { LINK, PRIMARY } from './style';
+import { ERROR_COLOR, LINK, PRIMARY, VERIFIED_COLOR } from './style';
 import { parseToRgba } from 'color2k';
 import { EmbedOptionsT } from './embedOptions';
 import useEventListener from '@use-it/event-listener';
@@ -218,10 +218,6 @@ export function useEmbedOptions(
     value: string;
   }
 
-  let primary = PRIMARY;
-  let link = LINK;
-  let preservePrimary = false;
-
   const [colorMode, setColorMode] = useState<EmbedColorMode>(
     embedOptions?.d ? EmbedColorMode.Dark : EmbedColorMode.Light
   );
@@ -233,11 +229,17 @@ export function useEmbedOptions(
 
   const darkMode = embedContext.colorMode === EmbedColorMode.Dark;
 
-  primary = embedOptions?.p || PRIMARY;
-  link = embedOptions?.l || LINK;
-  preservePrimary = embedOptions?.pp || false;
+  const primary = embedOptions?.p || PRIMARY;
+  const link = embedOptions?.l || LINK;
+  const preservePrimary = embedOptions?.pp || false;
+  const errorColor = embedOptions?.e || ERROR_COLOR;
+  const verifiedColor = embedOptions?.v || VERIFIED_COLOR;
+
   // Just ensure color is parseable, this'll throw if not:
   parseToRgba(primary);
+  parseToRgba(link);
+  parseToRgba(errorColor);
+  parseToRgba(verifiedColor);
 
   const handleMessage = useCallback(
     (e: MessageEvent) => {
@@ -258,6 +260,8 @@ export function useEmbedOptions(
     {
       primary,
       link,
+      errorColor,
+      verifiedColor,
       darkMode,
       preservePrimary,
       ...(embedOptions?.fu && { fontUrl: embedOptions.fu }),

diff --git a/app/lib/style.ts b/app/lib/style.ts
@@ -46,6 +46,9 @@ export const FULLSCREEN_CSS = css`
 
 export const PRIMARY = '#eb984e';
 export const LINK = '#2874a6';
+export const ERROR_COLOR = adjustHue(PRIMARY, 280);
+export const VERIFIED_COLOR = mix(adjustHue(PRIMARY, 180), 'black', 0.3);
+
 const DARK_MODE_WHITE = '#d0d0d0';
 
 export const readableColor = (color: string, darkMode: boolean) => {
@@ -81,11 +84,20 @@ const makeReadable = (background: string, color: string) => {
 export const colorTheme = ({
   primary,
   link,
+  errorColor,
+  verifiedColor,
   darkMode,
   preservePrimary,
 }: EmbedStylingProps): CSSInterpolation => {
   const p = darkMode && !preservePrimary ? mix(primary, 'black', 0.5) : primary;
   const l = darkMode && !preservePrimary ? mix(link, 'white', 0.5) : link;
+  const error =
+    darkMode && !preservePrimary ? mix(errorColor, 'white', 0.3) : errorColor;
+  const verified =
+    darkMode && !preservePrimary
+      ? mix(verifiedColor, 'white', 0.4)
+      : verifiedColor;
+
   const cellBG = darkMode ? '#353535' : 'white';
   const hover = darkMode ? 'white' : 'black';
   const hoverRatio = 0.1;
@@ -94,7 +106,7 @@ export const colorTheme = ({
   const linkLightBGHover = mix(link, bg, 0.8);
   const text = darkMode ? DARK_MODE_WHITE : 'black';
   const secondary = darkMode ? '#505050' : '#ccc';
-  const error = mix(adjustHue(p, 280), 'white', darkMode ? 0.3 : 0);
+
   return {
     '--tag-l': darkMode ? '30%' : '85%',
     '--bg': bg,
@@ -125,7 +137,7 @@ export const colorTheme = ({
     '--default-text': darkMode ? '#777' : '#999',
     '--caption': '#6c757d',
     '--black': darkMode ? '#eee' : 'black',
-    '--verified': mix(adjustHue(p, 180), hover, darkMode ? 0.4 : 0.3),
+    '--verified': verified,
     '--autofill': darkMode ? '#999' : '#bbb',
     '--top-bar-hover': 'rgba(0, 0, 0, 0.1)',
     '--shade-highlight': darkMode

diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -11,7 +11,13 @@ import { Snackbar, SnackbarProvider } from '../components/Snackbar';
 import { Global } from '@emotion/react';
 
 import '../lib/style.css';
-import { colorTheme, LINK, PRIMARY } from '../lib/style';
+import {
+  colorTheme,
+  ERROR_COLOR,
+  LINK,
+  PRIMARY,
+  VERIFIED_COLOR,
+} from '../lib/style';
 import { BrowserWarning } from '../components/BrowserWarning';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
@@ -175,13 +181,17 @@ export default function CrosshareApp({
             colorTheme({
               primary: PRIMARY,
               link: LINK,
+              errorColor: ERROR_COLOR,
+              verifiedColor: VERIFIED_COLOR,
               darkMode: false,
               preservePrimary: false,
             }),
             {
               '@media (prefers-color-scheme: dark)': colorTheme({
                 primary: PRIMARY,
                 link: LINK,
+                errorColor: ERROR_COLOR,
+                verifiedColor: VERIFIED_COLOR,
                 darkMode: true,
                 preservePrimary: false,
               }),
@@ -190,12 +200,16 @@ export default function CrosshareApp({
           'body.dark-mode': colorTheme({
             primary: PRIMARY,
             link: LINK,
+            errorColor: ERROR_COLOR,
+            verifiedColor: VERIFIED_COLOR,
             darkMode: true,
             preservePrimary: false,
           }),
           'body.light-mode': colorTheme({
             primary: PRIMARY,
             link: LINK,
+            errorColor: ERROR_COLOR,
+            verifiedColor: VERIFIED_COLOR,
             darkMode: false,
             preservePrimary: false,
           }),