From be02f8b7c8ab4ee72b03009fc7f96930c1184e22 Mon Sep 17 00:00:00 2001
From: Foysal Ahamed <cfaion341@gmail.com>
Date: Wed, 7 Feb 2024 00:55:52 +0100
Subject: [PATCH] :lipstick: Fix styling for email composer and did history
 table

---
 components/email/Composer.tsx          |  4 +++-
 components/repositories/DidHistory.tsx | 14 +++++++++-----
 styles/globals.css                     |  5 +++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/email/Composer.tsx b/components/email/Composer.tsx
index 18f787f2..062f1d79 100644
--- a/components/email/Composer.tsx
+++ b/components/email/Composer.tsx
@@ -10,6 +10,7 @@ import client from '@/lib/client'
 import { compileTemplateContent, getTemplate } from './helpers'
 import { useRepoAndProfile } from '@/repositories/useRepoAndProfile'
 import { useEmailComposer } from './useComposer'
+import { useColorScheme } from '@/common/useColorScheme'
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false })
 
@@ -25,6 +26,7 @@ export const EmailComposer = ({ did }: { did: string }) => {
     setContent,
     communicationTemplates,
   } = useEmailComposer()
+  const { theme } = useColorScheme()
   const subjectField = useRef<HTMLInputElement>(null)
   const commentField = useRef<HTMLTextAreaElement>(null)
 
@@ -138,7 +140,7 @@ export const EmailComposer = ({ did }: { did: string }) => {
           value={content}
           onChange={setContent}
           fullscreen={false}
-          data-color-mode="light"
+          data-color-mode={theme}
           commands={[
             commands.bold,
             commands.divider,
diff --git a/components/repositories/DidHistory.tsx b/components/repositories/DidHistory.tsx
index 2a037a36..9f80fc42 100644
--- a/components/repositories/DidHistory.tsx
+++ b/components/repositories/DidHistory.tsx
@@ -81,22 +81,26 @@ export const DidHistory = ({ did }: { did: string }) => {
 
   return (
     <div className="mb-3">
-      <h4 className="font-semibold text-gray-500">
+      <h4 className="font-semibold text-gray-500 dark:text-gray-50">
         DID History{' '}
-        <a href={getDidPlcWebUrl(did)} target="_blank" title="Open the web view for this DID record">
+        <a
+          href={getDidPlcWebUrl(did)}
+          target="_blank"
+          title="Open the web view for this DID record"
+        >
           <ArrowTopRightOnSquareIcon className="inline-block h-4 w-4 mr-1" />
         </a>
       </h4>
       <table className="min-w-full divide-y divide-gray-300">
-        <thead className="bg-gray-50">
-          <tr className="text-gray-500 text-left text-sm">
+        <thead className="bg-gray-50 dark:bg-slate-700">
+          <tr className="text-gray-500 dark:text-gray-50 text-left text-sm">
             <th className="py-2 pl-2">Timestamp</th>
             <th className="py-2 pl-2">Type</th>
             <th className="py-2 pl-2">Handle</th>
             <th className="py-2 pl-2">Service</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody className="dark:text-gray-100">
           {history.map((log) => (
             <tr key={log.cid} className="text-sm align-top">
               <td className="pr-2 py-2 pl-2">
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c95..1a0afa6d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.wmde-markdown-var[data-color-mode*='dark'] {
+      --color-canvas-default: theme(colors.slate.800) !important;
+      --color-border-default: theme(colors.teal.500) !important;
+}
\ No newline at end of file