fix: improved dark theme

changed cards background color, and fixed editor on full screen mode. also fixed theme switch.
nicosh · Oct 4, 2021 · b3aa559 · b3aa559
1 parent 5bb459f
commit b3aa559
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
       "patterns": [
         "src"
       ],
-      "extensions": "js,jsx"
+      "extensions": "js,jsx,css"
     }
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
@@ -127,9 +127,12 @@
 }
 
 .dark .card {
-  background-color: #272727;
+  background-color: #272727!important;
+}
+.dark .labels {
+  color: #fff;
+  background-color: #121212;
 }
-
 .dark .search .ant-input, .dark .search .ant-btn {
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff !important;
@@ -144,7 +147,7 @@
 }
 
 .dark .ant-select-selection-item {
-  background-color: #272727 !important;
+  background-color: rgb(94, 94, 94) !important;
   border: #272727 !important;
   color: #fff;
 }
@@ -158,7 +161,7 @@
   background: #272727 !important;
 }
 
-.dark .ant-select-selection-item-remove, .dark .ant-progress-circle .ant-progress-text, .dark .ant-radio-wrapper, .dark .ant-tabs, .dark .editor-toolbar button {
+.dark .ant-select-selection-item-remove, .dark .ant-progress-circle .ant-progress-text, .dark .ant-radio-wrapper,.dark .ant-checkbox-wrapper, .dark .ant-tabs, .dark .editor-toolbar button {
   color: #fff !important;
 }
 
@@ -167,10 +170,42 @@
   background: #272727 !important;
 }
 
-.dark .react-kanban-column, .dark .news-feed {
-  background-color: #5e5e5e !important;
+.dark .react-kanban-column {
+  background-color: #121212!important;
+}
+.dark .news-feed{
+      background-color: #121212!important;
+      border: none;
 }
-
 .dark h2, .dark a {
   color: #fff !important
+}
+.dark .ant-tag{
+  background-color: #5e5e5e;
+  border-color: #5e5e5e !important;
+  color: #fff !important;
+}
+.dark .ant-select-item-option{
+  background-color: #473f46!important;
+  color : #fff;
+}
+.dark .ant-select-item-option-active{
+  background-color: #5e5e5e !important;
+}
+.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: #f5f5f5 !important;
+  color: #5e5e5e !important;
+}
+.dark .CodeMirror-wrap, .dark .cm-link, .dark .editor-preview{
+  background-color: #121212!important;
+  color : #fff !important;
+}
+
+.CodeMirror-fullscreen{
+  z-index: 9999 !important;
+}
+
+.dark .editor-toolbar.fullscreen {
+  background-color: #121212!important;
+  color: #fff!important;
 }
diff --git a/src/App.js b/src/App.js
@@ -16,8 +16,7 @@ import Github from './components/misc/github';
 import Todo from './components/todo';
 import 'simplebar/dist/simplebar.min.css';
 
-const { TabPane } = Tabs;
-
+const { TabPane } = Tabs; 
 
 const App = () => {
   return (
@@ -51,8 +50,7 @@ const App = () => {
         </div>
         <div className="row mb-5">
         <Window size="col-md-12 mt-4 mb-5 card p-5">
-        <News />
-
+          <News />
         </Window>
         </div>
       </div>

diff --git a/src/components/context/appContext.js b/src/components/context/appContext.js
@@ -6,12 +6,13 @@ export const AppContext = React.createContext(null)
 export function AppProvider({ children, ...rest }) {
     let currentTheme = "light";
     const [history, setHistory] = useState([])
-    const [theme, setTheme] = useState(currentTheme)
+    const [theme, setTheme] = useState(false)
 
     useEffect(() => {
         chrome.storage.local.get('theme', (thm) => {
-            setTheme(thm.theme ? thm.theme : currentTheme)
-            document.body.classList.add(thm.theme ? thm.theme : currentTheme);
+            let tm = thm.theme ? thm.theme : currentTheme
+            setTheme(tm)
+            document.body.classList.add(tm);
         });
     }, [])
 

diff --git a/src/components/infobar/stats.js b/src/components/infobar/stats.js
@@ -11,7 +11,6 @@ const Stats = () => {
     const [previousCpuInfo,setPreviousCpuInfo]= useState(false)
 
     const {theme,switchTeme } = useApp()
-
     // load memory and cpu usage from chrome apis
     const loadData = () => {
         chrome.system.memory.getInfo(function (info) {
@@ -57,7 +56,7 @@ const Stats = () => {
                 <Progress width={50} type="circle" percent={memoryPercentage} />
                 <label style={{ fontSize: 12 }} className="ms-3 me-3">Cpu used : </label>
                 <Progress width={50} type="circle" percent={cpuPercentage} />
-                <Switch onChange={switchTeme} className="ms-3 me-3" checkedChildren="🌙" unCheckedChildren="🌙" defaultChecked={theme !== "light"} />
+                <Switch key={theme} onChange={switchTeme} className="ms-3 me-3" checkedChildren="🌙" unCheckedChildren="🌙" defaultChecked={theme !== "light"} />
             </div>
             :
             <div className="col-md-6 offset-md-6 text-end">