Add dark theme to raw email page (#81)

harryzcy · Jan 8, 2023 · 43743bb · 43743bb
1 parent 0eb8a7b
commit 43743bb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/web/src/pages/EmailRawView.tsx b/web/src/pages/EmailRawView.tsx
@@ -9,15 +9,15 @@ export default function EmailRawView() {
       <h1 className="text-lg font-light tracking-wider md:pb-4 md:px-1 dark:text-white">
         Original Email
       </h1>
-      <div className="rounded-md flex">
-        <span className="flex-initial bg-blue-200 rounded-l py-1 px-2">
+      <div className="rounded-md flex dark:text-neutral-300">
+        <span className="flex-initial bg-blue-200 dark:bg-neutral-700/70 rounded-l py-1 px-2">
           MessageID
         </span>
-        <span className="flex-1 bg-blue-50 rounded-r py-1 px-2 md:px-4">
+        <span className="flex-1 bg-blue-50 dark:bg-neutral-800 rounded-r py-1 px-2 md:px-4">
           {data.messageID}
         </span>
       </div>
-      <div className="mt-5 p-5 text-sm border rounded-md relative">
+      <div className="mt-5 p-5 text-sm border rounded-md relative dark:text-neutral-400 dark:border-neutral-700">
         <React.Suspense fallback={<div>Loading...</div>}>
           <Await resolve={data.raw}>
             {(raw) => (
@@ -26,10 +26,10 @@ export default function EmailRawView() {
                   {raw}
                 </pre>
 
-                <div className="absolute top-2 right-0 p-3 space-x-3">
+                <div className="absolute top-2 right-0 p-3 space-x-3 dark:text-neutral-400">
                   <span
                     role="button"
-                    className="bg-blue-100 p-2 rounded-md cursor-pointer"
+                    className="p-2 rounded-md cursor-pointer bg-blue-100 dark:bg-neutral-700"
                     onClick={() => {
                       navigator.clipboard.writeText(raw)
                     }}
@@ -38,7 +38,7 @@ export default function EmailRawView() {
                   </span>
                   <span
                     role="button"
-                    className="bg-blue-100 p-2 rounded-md cursor-pointer"
+                    className="p-2 rounded-md cursor-pointer bg-blue-100 dark:bg-neutral-700"
                     onClick={() => {
                       const blob = new Blob([raw], { type: 'message/rfc822' })
                       const url = URL.createObjectURL(blob)

diff --git a/web/src/pages/EmailView.tsx b/web/src/pages/EmailView.tsx
@@ -19,9 +19,7 @@ import { getNameFromEmails } from '../utils/emails'
 import { formatDate } from '../utils/time'
 import { useOutsideClick } from '../hooks/useOutsideClick'
 
-interface EmailViewProps {}
-
-export default function EmailView(props: EmailViewProps) {
+export default function EmailView() {
   const data = useLoaderData() as { messageID: string; email: Email }
 
   const navigate = useNavigate()
@@ -99,10 +97,10 @@ export default function EmailView(props: EmailViewProps) {
                       {showMoreActions && (
                         <span
                           ref={showMoreActionsRef}
-                          className="absolute right-0 top-8 w-28 rounded-md bg-white py-1 border select-none"
+                          className="absolute right-0 top-8 w-28 rounded-md py-1 border select-none bg-white dark:border-neutral-600 dark:bg-neutral-800"
                         >
                           <div
-                            className="px-2 py-1 w-full cursor-pointer hover:bg-gray-100"
+                            className="px-2 py-1 w-full cursor-pointer hover:bg-gray-100 dark:hover:bg-neutral-600"
                             onClick={() => {
                               setShowMoreActions(false)
                               window.open(`/raw/${email.messageID}`, '_blank')