From 499b03883b4666bb4e64b96b877ee25a4b078835 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Mon, 25 Sep 2023 15:32:16 +1000
Subject: [PATCH] add dark mode to popup dividers

---
 interface/src/pages/About.tsx     | 2 +-
 interface/src/pages/Settings.tsx  | 2 +-
 interface/src/pages/Shortcuts.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/interface/src/pages/About.tsx b/interface/src/pages/About.tsx
index ffeca441..7a996245 100644
--- a/interface/src/pages/About.tsx
+++ b/interface/src/pages/About.tsx
@@ -1,7 +1,7 @@
 const About: React.FC = () => {
 
   return (
-    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100/50">
+    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100/50 dark:divide-zinc-700/50">
       <div>
         <h2 className="text-lg font-bold">About</h2>
         <p className="py-2">BetterSEQTA+ is a branch of BetterSEQTA which was originally developed by Nulkem. It was discontinued. So BetterSEQTA+ has come in to fill in that gap!</p>
diff --git a/interface/src/pages/Settings.tsx b/interface/src/pages/Settings.tsx
index 3fc3605d..6841671d 100644
--- a/interface/src/pages/Settings.tsx
+++ b/interface/src/pages/Settings.tsx
@@ -63,7 +63,7 @@ const Settings: React.FC = () => {
   ];
 
   return (
-    <div className="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100">
+    <div className="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
       {settings.map((setting, index) => (
         <div className="flex items-center justify-between px-4 py-3" key={index}>
           <div className="pr-4">
diff --git a/interface/src/pages/Shortcuts.tsx b/interface/src/pages/Shortcuts.tsx
index ef5b1d6a..32a37f18 100644
--- a/interface/src/pages/Shortcuts.tsx
+++ b/interface/src/pages/Shortcuts.tsx
@@ -55,7 +55,7 @@ export default function Shortcuts() {
   };
 
   return (
-    <div className="flex flex-col divide-y divide-zinc-100">
+    <div className="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
 
       <AnimatePresence>
         {isFormVisible ? (