added profile description editing, fixed light theme and viewer caching

app/client/components/BookChapterCard.tsx

@@ -24,7 +24,7 @@ export function BookChapterCard({
     refetchQueries: [bookChapterListQuery, bookChapterQuery]
   });
   return (
-    <Card.Root width="100%" variant="elevated">
+    <Card.Root width="100%" variant="elevated" bg={{ _light: 'gray.100' }}>
       <Card.Body paddingX={4} paddingY={2}>
         <Stack direction="row" justifyContent="space-between" alignItems="center">
           <Box>

app/client/components/EditorSlate.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, Stack, Text, Wrap } from '@chakra-ui/react';
 import isHotkey from 'is-hotkey';
-import React, { KeyboardEvent, MouseEvent, useCallback, useMemo } from 'react';
+import React, { KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import { createEditor, Descendant, Editor, Element as SlateElement, Transforms } from 'slate';
 import { withHistory } from 'slate-history';
 import {

app/client/components/WorkingListCard.tsx

@@ -19,7 +19,7 @@ export function WorkingListCard({
   reviewsTotal
 }: BookOne) {
   return (
-    <Card.Root width="100%" variant="elevated">
+    <Card.Root width="100%" variant="elevated" bg={{ _light: 'gray.100' }}>
       <Card.Body>
         <Stack>
           <Stack direction={'row'} justifyContent="space-between">

app/client/components/ui/provider.tsx

@@ -6,9 +6,21 @@ import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
 export function Provider(props: ColorModeProviderProps) {
   const system = createSystem(defaultConfig, {
     theme: {
-      tokens: {}
+      tokens: {
+        colors: {
+          cyan: {
+            400: {
+              value: {
+                base: '#0c5c72',
+                _dark: '#67e8f9'
+              } as any // todo: find a better way to overwrite it
+            }
+          }
+        }
+      }
     }
   });
+
   return (
     <ChakraProvider value={system}>
       <Theme colorPalette="cyan">