refactor(theming and darkmode): better themeing with basic css variab…

…les and dark mode support
trycourier · Jan 25, 2024 · acebc46 · acebc46
1 parent 06ea24c
commit acebc46
Show file tree

Hide file tree

Showing 22 changed files with 227 additions and 54 deletions.
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -279,7 +279,15 @@
           url: "wss://20en15n3ng.execute-api.us-east-1.amazonaws.com/dev",
         },
         clientKey: "ZDJmNTVhMWQtYmZjMS00ODg0LThhMjQtZDg0ZDg5ZTlhN2Ri",
-
+        theme: {
+          variables: {
+            background: "red",
+            textColor: "blue",
+            titleColor: "green",
+            structure: "pink",
+            icon: "orange",
+          },
+        },
         // JWT SMOKEY
         //clientKey: "YzQzMGM3OGYtYzQ2NC00NTdjLThkM2QtNWIwYzI4OTdmYmE5",
         //userId: "smokey12345",
@@ -339,7 +347,6 @@
   <body>
     <courier-inbox></courier-inbox>
     <courier-toast></courier-toast>
-    <courier-preferences></courier-preferences>
     <div id="root">
       <div id="test">hello world</div>
     </div>

diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -2,10 +2,11 @@ import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 
 import {
-  CourierProvider,
-  WSOptions,
   Brand,
+  CourierProvider,
   Interceptor,
+  ProviderTheme,
+  WSOptions,
 } from "@trycourier/react-provider";
 import { CourierComponents } from "./components";
 import { InboxProps } from "@trycourier/react-inbox";
@@ -66,6 +67,7 @@ interface ICourierConfig {
   clientKey: string;
   enableMutationObserver?: boolean;
   inboxApiUrl?: string;
+  theme?: ProviderTheme;
   onRouteChange?: (route: string) => void;
   onMessage?: Interceptor;
   components?: {
@@ -87,14 +89,15 @@ interface ICourierConfig {
 
 const initCourier = (courierConfig?: ICourierConfig) => {
   const {
-    tenantId,
     apiUrl,
     authorization,
     brandId,
     clientKey,
     inboxApiUrl,
     onMessage,
     onRouteChange,
+    tenantId,
+    theme,
     userId,
     userSignature,
     wsOptions,
@@ -119,18 +122,19 @@ const initCourier = (courierConfig?: ICourierConfig) => {
 
   render(
     <CourierProvider
-      tenantId={tenantId}
       apiUrl={apiUrl}
       authorization={authorization}
       brandId={brandId}
       clientKey={clientKey}
       inboxApiUrl={inboxApiUrl}
+      middleware={[middleware]}
       onMessage={onMessage}
       onRouteChange={onRouteChange}
+      tenantId={tenantId}
+      theme={theme}
       userId={userId}
       userSignature={userSignature}
       wsOptions={wsOptions}
-      middleware={[middleware]}
     >
       <CourierComponents />
     </CourierProvider>,

diff --git a/packages/react-inbox-next/README.md b/packages/react-inbox-next/README.md
@@ -1,2 +0,0 @@
-<!-- START doctoc -->
-<!-- END doctoc -->

diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx
@@ -266,18 +266,20 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
       : bell;
   };
 
+  const theme = useMemo(() => {
+    return deepExtend({}, props.theme ?? {}, {
+      brand,
+    });
+  }, [props.theme, brand]);
+
   if (!courierContext?.inbox) {
     return null;
   }
 
   return (
     <>
       <TippyGlobalStyle />
-      <ThemeProvider
-        theme={deepExtend({}, props.theme ?? {}, {
-          brand,
-        })}
-      >
+      <ThemeProvider theme={theme}>
         {tippyProps.visible ? (
           <>
             {isMobile ? (

diff --git a/packages/react-inbox/src/components/Messages2.0/Header.tsx b/packages/react-inbox/src/components/Messages2.0/Header.tsx
@@ -35,9 +35,9 @@ const Container = styled.div<{ view?: string }>(({ theme }) => {
       fontSize: 16,
       fontWeight: 700,
       height: "42px",
-      color: "rgb(36, 50, 75)",
-      backgroundColor: "#F2F6F9",
-      borderBottom: "1px solid rgb(222, 232, 240)",
+      backgroundColor: "var(--ci-background)",
+      borderBottom: "1px solid",
+      borderColor: "var(--ci-structure)",
 
       borderTopLeftRadius: theme?.brand?.inapp?.borderRadius ?? "12px",
       borderTopRightRadius: theme?.brand?.inapp?.borderRadius ?? "12px",
@@ -82,10 +82,11 @@ const DropdownOptionButton = styled.button<{
   const cssProps = {
     background: active ? primaryColor : "transparent",
     border: "none",
-    borderBottom: selected ? undefined : "1px solid #DEE8F0",
+    borderBottom: selected ? undefined : "1px solid",
+    borderColor: "var(--ci-structure)",
     cursor: disabled ? "default" : "pointer",
     padding: selected ? "6px" : "12px",
-    color: active ? "white" : "rgba(28, 39, 58, 1)",
+    color: active ? "white" : "var(--ci-title-color)",
     fontWeight: active || selected ? 700 : 400,
     lineHeight: "21px",
     fontSize: "14px",
@@ -156,7 +157,7 @@ const HeadingDropdownOptions = styled.div(({ theme }) => {
       position: "absolute",
       top: "42px",
       left: 0,
-      background: "white",
+      background: "var(--ci-background)",
       width: "100%",
       zIndex: 2,
       height: "343px",

diff --git a/packages/react-inbox/src/components/Messages2.0/LoadingMessages.tsx b/packages/react-inbox/src/components/Messages2.0/LoadingMessages.tsx
@@ -12,7 +12,7 @@ const Styled = styled.div(({ theme }) =>
     {
       width: "100%",
       height: "100%",
-      background: "white",
+      background: "var(--ci-background)",
       fontSize: 14,
       fontWeight: 600,
       color: theme?.brand?.inapp?.emptyState?.textColor ?? "inherit",

diff --git a/packages/react-inbox/src/components/Messages2.0/Message.tsx b/packages/react-inbox/src/components/Messages2.0/Message.tsx
@@ -70,7 +70,8 @@ const MessageContainer = styled.div(({ theme }) => {
       position: "relative",
       padding: "12px",
       minHeight: 60,
-      borderBottom: "1px solid rgb(222, 232, 240)",
+      borderBottom: "1px solid",
+      borderColor: "var(--ci-structure)",
       "&.read": {
         ".icon": {
           filter: "grayscale(100%)",

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/Close.tsx b/packages/react-inbox/src/components/Messages2.0/actions/Close.tsx
@@ -31,7 +31,7 @@ const CloseAction: React.FunctionComponent<{
           >
             <path
               d="M15.71 8.29C15.32 7.9 14.69 7.9 14.3 8.29L12.36 10.23C12.16 10.43 11.85 10.43 11.65 10.23L9.71001 8.29C9.32001 7.9 8.69001 7.9 8.30001 8.29C7.91001 8.68 7.91001 9.31 8.30001 9.7L10.24 11.64C10.44 11.84 10.44 12.15 10.24 12.35L8.30001 14.29C7.91001 14.68 7.91001 15.31 8.30001 15.7C8.69001 16.09 9.32001 16.09 9.71001 15.7L11.65 13.76C11.85 13.56 12.16 13.56 12.36 13.76L14.3 15.7C14.69 16.09 15.32 16.09 15.71 15.7C16.1 15.31 16.1 14.68 15.71 14.29L13.77 12.35C13.57 12.15 13.57 11.84 13.77 11.64L15.71 9.7C16.1 9.31 16.1 8.68 15.71 8.29V8.29Z"
-              fill="#566074"
+              fill="var(--ci-icon)"
             />
           </svg>
         ) : (
@@ -44,7 +44,7 @@ const CloseAction: React.FunctionComponent<{
           >
             <path
               d="M17.71 6.29006C17.32 5.90006 16.69 5.90006 16.3 6.29006L12.36 10.2301C12.16 10.4301 11.85 10.4301 11.65 10.2301L7.71001 6.29006C7.32001 5.90006 6.69001 5.90006 6.30001 6.29006C5.91001 6.68006 5.91001 7.31006 6.30001 7.70006L10.24 11.6401C10.44 11.8401 10.44 12.1501 10.24 12.3501L6.30001 16.2901C5.91001 16.6801 5.91001 17.3101 6.30001 17.7001C6.69001 18.0901 7.32001 18.0901 7.71001 17.7001L11.65 13.7601C11.85 13.5601 12.16 13.5601 12.36 13.7601L16.3 17.7001C16.69 18.0901 17.32 18.0901 17.71 17.7001C18.1 17.3101 18.1 16.6801 17.71 16.2901L13.77 12.3501C13.57 12.1501 13.57 11.8401 13.77 11.6401L17.71 7.70006C18.1 7.31006 18.1 6.68006 17.71 6.29006Z"
-              fill="#566074"
+              fill="var(--ci-icon)"
             />
           </svg>
         )}

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/MarkUnread.tsx b/packages/react-inbox/src/components/Messages2.0/actions/MarkUnread.tsx
@@ -31,11 +31,11 @@ const MarkUnread: React.FunctionComponent<{
         >
           <path
             d="M20 5H18C16.8954 5 16 5.89543 16 7C16 8.10457 16.8954 9 18 9H20C21.1046 9 22 8.10457 22 7C22 5.89543 21.1046 5 20 5Z"
-            fill="#566074"
+            fill="var(--ci-icon)"
           />
           <path
             d="M19 10C18.45 10 18 10.45 18 11V14.5C18 14.78 17.78 15 17.5 15H6.5C6.22 15 6 14.78 6 14.5V10.3C6 10.3 6.04 10.24 6.08 10.26L11.45 13.84C11.62 13.95 11.81 14.01 12 14.01C12.19 14.01 12.39 13.95 12.55 13.84L16.46 11.23C16.92 10.92 17.04 10.3 16.74 9.84C16.43 9.38 15.81 9.26 15.35 9.56L12.27 11.61C12.1 11.72 11.88 11.72 11.72 11.61L7.94 9.09C7.94 9.09 7.92 9 7.97 9H14C14.55 9 15 8.55 15 8C15 7.45 14.55 7 14 7H6C4.9 7 4 7.9 4 9V15C4 16.1 4.9 17 6 17H18C19.1 17 20 16.1 20 15V11C20 10.45 19.55 10 19 10Z"
-            fill="#566074"
+            fill="var(--ci-icon)"
           />
         </svg>
       </StyledButton>

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/index.tsx b/packages/react-inbox/src/components/Messages2.0/actions/index.tsx
@@ -256,7 +256,7 @@ const MessageActions: React.FunctionComponent<{
         <TimeAgo>{formattedTime}</TimeAgo>
         {read && (
           <Checkmark
-            fill={"rgba(86, 96, 116, 0.3)"}
+            fill="var(--ci-icon)"
             style={{
               marginRight: -6,
               marginLeft: -3,

diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx
@@ -38,7 +38,7 @@ const ResponsiveContainer = styled.div<{ isMobile?: boolean }>(
               "*, &": {
                 boxSizing: "border-box",
               },
-              background: "#F2F6F9",
+              background: "var(--ci-background)", //"#F2F6F9",
             }),
       },
       theme?.container
@@ -83,7 +83,7 @@ const MessageList = styled.div<{ isMobile?: boolean }>(
     return deepExtend(
       {
         position: "relative",
-        background: "rgb(242, 246, 249)",
+        background: "var(--ci-background)",
         overflow: "scroll",
         display: "flex",
         height,

diff --git a/packages/react-inbox/src/components/Messages2.0/styled.tsx b/packages/react-inbox/src/components/Messages2.0/styled.tsx
@@ -50,7 +50,7 @@ export const Title = styled.div<{ read?: string }>(({ theme, read }) =>
       display: "-webkit-box",
       overflow: "hidden",
       textOverflow: "ellipsis",
-      color: read ? "rgba(86, 96, 116, 1)" : "rgb(28, 39, 58)",
+      color: read ? "var(--ci-text-color)" : "var(--ci-title-color)",
     },
     theme.message?.title
   )
@@ -59,7 +59,7 @@ export const Title = styled.div<{ read?: string }>(({ theme, read }) =>
 export const TextElement = styled.div(({ theme }) =>
   deepExtend(
     {
-      color: "rgb(28, 39, 58) ",
+      color: "var(--ci-text-color)",
       marginTop: "1px",
       wordBreak: "break-word",
       fontSize: "12px",
@@ -118,7 +118,7 @@ export const ActionElement = styled.button<{
 export const TimeAgo = styled.div(({ theme }) =>
   deepExtend(
     {
-      color: "rgb(86, 96, 116)",
+      color: "var(--ci-text-color)",
       fontSize: "12px",
       fontStyle: "normal",
       fontWeight: "400",

diff --git a/packages/react-inbox/src/types.ts b/packages/react-inbox/src/types.ts
@@ -12,6 +12,10 @@ import { CSSObject } from "styled-components";
 
 export interface InboxTheme {
   brand?: Brand;
+  colorMode?: "light" | "dark";
+  variables?: {
+    background: string;
+  };
   container?: CSSObject;
   emptyState?: CSSObject;
   footer?: CSSObject;

diff --git a/packages/react-preferences/src/components/PreferenceList.tsx b/packages/react-preferences/src/components/PreferenceList.tsx
@@ -10,7 +10,7 @@ export const StyledList = styled.div`
   display: flex;
   height: 433px;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--ci-background);
 `;
 
 const PreferenceV4Wrapper = styled.div`
@@ -22,12 +22,12 @@ export const PreferenceList: React.FunctionComponent<{
   theme?: any;
   draft?: boolean;
 }> = ({ theme, draft }) => {
-  const { brand, tenantId } = useCourier();
+  const courierContext = useCourier();
   const preferences = usePreferences();
 
   useEffect(() => {
-    preferences.fetchRecipientPreferences(tenantId);
-    preferences.fetchPreferencePage(tenantId, draft);
+    preferences.fetchRecipientPreferences(courierContext.tenantId);
+    preferences.fetchPreferencePage(courierContext.tenantId, draft);
   }, []);
 
   const renderPreferences = () => {
@@ -41,7 +41,7 @@ export const PreferenceList: React.FunctionComponent<{
     ) {
       return (
         <PreferenceV4Wrapper theme={theme}>
-          <PreferencesV4 tenantId={tenantId} draft={draft} />
+          <PreferencesV4 tenantId={courierContext.tenantId} draft={draft} />
         </PreferenceV4Wrapper>
       );
     }
@@ -51,7 +51,7 @@ export const PreferenceList: React.FunctionComponent<{
       !preferences.preferencePage?.sections?.nodes ||
       preferences.preferencePage?.sections?.nodes.length < 1
     ) {
-      return brand?.preferenceTemplates?.map((template) => (
+      return courierContext.brand?.preferenceTemplates?.map((template) => (
         <PreferenceTemplate
           key={template.templateId}
           preferenceTemplate={template}

diff --git a/packages/react-preferences/src/components/PreferencesV4.tsx b/packages/react-preferences/src/components/PreferencesV4.tsx
@@ -43,6 +43,7 @@ const PreferenceSectionWrapper = styled.div`
 const SectionHeader = styled.h1`
   margin: 0;
   font-size: 24px;
+  color: var(--ci-title-color);
 `;
 
 const StyledItem = styled.div`
@@ -57,6 +58,7 @@ const StyledItem = styled.div`
     width: 100%;
     margin-bottom: 6px;
     font-weight: bold;
+    color: var(--ci-text-color);
   }
 
   .digest-schedules {
@@ -425,7 +427,8 @@ const PreferenceList = styled.ul`
 `;
 const PreferenceListItem = styled.li`
   list-style: none;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid;
+  border-color: var(--ci-structure);
   padding: 10px 0;
   margin: 0;
 

diff --git a/packages/react-provider/README.md b/packages/react-provider/README.md
@@ -3,6 +3,7 @@
 
 - [Props](#props)
 - [Listening to Messsages](#listening-to-messsages)
+- [Dark Mode / Theme Variables](#dark-mode--theme-variables)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -152,3 +153,46 @@ const MyApp = ({ children }) => {
   );
 };
 ```
+
+<a name="2dark-modemd"></a>
+
+### [Dark Mode / Theme Variables](#dark-mode)
+
+Dark mode is supported by passing "theme.colorMode" to the CourierProvider
+
+```tsx
+import { CourierProvider } from "@trycourier/react-provider";
+
+const MyApp = ({ children }) => {
+  return (
+    <CourierProvider thene={{ colorMode: "dark" }}>{children}</CourierProvider>
+  );
+};
+```
+
+You can customize darkmode by passing in variables to the root level theme:
+
+````typescript
+export interface ThemeVariables {
+  background?: string;
+  textColor?: string;
+  titleColor?: string;
+  structure?: string;
+  icon?: string;
+}```
+
+```tsx
+import { CourierProvider } from "@trycourier/react-provider";
+
+const MyApp = ({ children }) => {
+  return (
+    <CourierProvider thene={{variables: {
+        background: "red",
+        textColor: "blue",
+        titleColor: "green",
+        structure: "pink",
+        icon: "orange"
+    }}}>{children}</CourierProvider>
+  );
+};
+````