From b828840d5d3c241ce088d3fc6494de2864455009 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <64608510+PatrykKuniczak@users.noreply.github.com>
Date: Sun, 5 Nov 2023 15:00:08 +0100
Subject: [PATCH] enchance/ update popup page styles (#249)

Co-authored-by: JongHak Seo <unqocn@gmail.com>
---
 src/pages/popup/Popup.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 742b18c6a..f43bf6e6b 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -10,21 +10,31 @@ const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
 
   return (
-    <div className="App">
-      <header className="App-header">
+    <div
+      className="App"
+      style={{
+        backgroundColor: theme === 'light' ? '#fff' : '#000',
+      }}>
+      <header className="App-header" style={{ color: theme === 'light' ? '#000' : '#fff' }}>
         <img src={logo} className="App-logo" alt="logo" />
         <p className="">
           Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
         </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: theme === 'light' && '#0281dc', marginBottom: '10px' }}>
           Learn React!
         </a>
         <button
           style={{
-            color: theme === 'light' ? '#fff' : '#000',
+            backgroundColor: theme === 'light' ? '#fff' : '#000',
+            color: theme === 'light' ? '#000' : '#fff',
           }}
           onClick={exampleThemeStorage.toggle}>
-          Toggle theme: [{theme}]
+          Toggle theme
         </button>
       </header>
     </div>