complete dark mode UI

Author: GREENRAT-K405

src/component/Header.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import hotkeys from 'hotkeys-js';
-import { FaMoon, FaSun } from 'react-icons/fa';
+import { FaMoon } from 'react-icons/fa';
 import toolbarList from '../toolbarActions/toolbarList';
 import { actionType as T } from '../reducer';
 import '@szhsin/react-menu/dist/index.css';
@@ -58,6 +58,7 @@ const Header = ({ superState, dispatcher }) => {
                         alignItems: 'center',
                         justifyContent: 'center',
                         transition: 'opacity 0.2s',
+                        backgroundColor: '#eee',
                     }}
                     onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.7'; }}
                     onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
@@ -66,9 +67,7 @@ const Header = ({ superState, dispatcher }) => {
                     onKeyDown={(e) => e.key === 'Enter' && dispatcher({ type: T.TOGGLE_DARK_MODE })}
                     aria-label="Toggle dark mode"
                 >
-                    {superState.darkMode
-                        ? <FaSun size={20} className="theme-icon" />
-                        : <FaMoon size={20} className="theme-icon" />}
+                    <FaMoon size={20} className="theme-icon" />
                 </div>
                 <FullScreenButton />
             </div>

src/component/modals/project-details.css

@@ -28,4 +28,58 @@
 .proj-details .serverIDText{
     width: calc( 100% - 20px);
     margin-bottom: 20px;
+}
+
+/* DARK MODE */
+
+[data-theme='dark'] .proj-details {
+    color: #EAEAEA;
+}
+
+[data-theme='dark'] .proj-details input {
+    background: #242424;
+    border: 1px solid #333333;
+    color: #FFFFFF;
+}
+
+[data-theme='dark'] .proj-details input::placeholder {
+    color: #888888;
+}
+
+[data-theme='dark'] .proj-details input:focus {
+    border-color: #FFFFFF;
+    outline: none;
+}
+
+[data-theme='dark'] .proj-details .btn {
+    background: #2A2A2A;
+    border: 1px solid #333333;
+    color: #FFFFFF;
+}
+
+[data-theme='dark'] .proj-details .btn:hover {
+    background: #333333;
+    border-color: #2B8CF7;
+}
+
+[data-theme='dark'] .proj-details .btn-primary {
+    background: #2B8CF7;
+    border-color: #2B8CF7;
+}
+
+[data-theme='dark'] .proj-details .btn-primary:hover {
+    background: #1e88e5;
+}
+
+[data-theme='dark'] .proj-details .btn-secondary {
+    background: #2A2A2A;
+    border: 1px solid #333333;
+}
+
+[data-theme='dark'] .proj-details .btn-secondary:hover {
+    background: #333333;
+}
+
+[data-theme='dark'] .proj-details .divider {
+    border-bottom: 1px solid #333333;
 }