Add dark menu (with improve css)

dash-app · Mar 29, 2021 · 5e276b3 · 5e276b3
1 parent 81aa0ca
commit 5e276b3
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 41 deletions.
diff --git a/frontend/dash-home/src/components/atoms/Themed.tsx b/frontend/dash-home/src/components/atoms/Themed.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ThemeContext } from '../themes/ThemeProvider';
 
@@ -78,33 +77,41 @@ export const HR = (props: any) => {
 }
 
 export const ThemedModal = (props: any) => {
-  switch (React.useContext(ThemeContext).theme) {
-    case "NERD_BLACK":
-      return (<DarkModal {...props} />)
-    default:
-      return (<Modal {...props} />)
-  }
+  const theme = React.useContext(ThemeContext).theme;
+  return (
+    <>
+      <style type="text/css">
+        {theme === "NERD_BLACK" &&
+          `
+            .close {
+              color: #FFF;
+            }
+            .close:hover {
+              color: #5A5A5A;
+            }
+            .modal-header {
+              border-bottom: 1px solid #2F2F2F;
+            }
+            .modal-content {
+              background-color: #0E0E0E;
+              color: #DDD;
+            }
+            .modal-footer {
+              border-top: 1px solid #2F2F2F;
+            }
+            .modal-title {
+              color: #FFF;
+            }
+            .modal-section-title {
+              color: #FFF;
+            }
+          `
+        }
+      </style>
+      <Modal {...props} />
+    </>
+  )
 }
-
-const DarkModal = styled(Modal)`
-  .close {
-    color: #FFF;
-  }
-  .modal-header {
-    border-bottom: 1px solid #2F2F2F;
-  }
-  .modal-footer {
-    border-top: 1px solid #2F2F2F;
-  }
-  .modal-title {
-    color: #FFF;
-  }
-  .modal-content {
-    background-color: #111112;
-    border: none;
-  }
-`;
-
 export const Tabs = (props: TabsProps) => {
   const theme = React.useContext(ThemeContext).theme;
   return (
@@ -135,4 +142,8 @@ export const Tabs = (props: TabsProps) => {
       />
     </>
   )
+}
+
+export const MenuTitle = (props: any) => {
+  return (<p className={"modal-section-title"}>{props.children}</p>)
 }
diff --git a/frontend/dash-home/src/components/basements/Basement.tsx b/frontend/dash-home/src/components/basements/Basement.tsx
@@ -13,6 +13,7 @@ import { RELEASE_VERSION } from '../../config';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { LinkContainer } from 'react-router-bootstrap';
+import { MenuTitle, ThemedModal } from '../atoms/Themed';
 
 interface Props {
   children: React.ReactNode,
@@ -43,12 +44,13 @@ const Basement: React.FC<Props> = props => {
                     :
                     <NotifyError title="Failed fetch room data" />
                 )}
-                <Modal
+                <ThemedModal
                   size="lg"
                   show={showMenu}
                   onHide={() => setShowMenu(false)}
                   // backdrop="static"
                   variant="dark"
+                  animate={false}
                 // centered={true}
                 >
                   <Modal.Header closeButton>
@@ -60,7 +62,7 @@ const Basement: React.FC<Props> = props => {
                   <Modal.Body>
                     <Container fluid>
                       {/* Main Menu */}
-                      <p><Icon icon={["fas", "ellipsis-h"]} />{t("menu.main.title")}</p>
+                      <MenuTitle><Icon icon={["fas", "ellipsis-h"]} />{t("menu.main.title")}</MenuTitle>
                       <CustomRow>
                         <Col>
                           <LinkContainer exact to={"/"}>
@@ -94,22 +96,25 @@ const Basement: React.FC<Props> = props => {
                       <CustomRow>
                         {/* + */}
                         <Col sm style={{ marginTop: "1rem" }}>
-                          <p><Icon icon={["fas", "server"]} />{t("menu.environment.title")}</p>
-                          <Col style={{ paddingLeft: "0", fontSize: "2rem" }}>
-                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "thermometer-three-quarters"]} />{roomResult?.room?.ambient.temp.toFixed(1)}
+                          <MenuTitle><Icon icon={["fas", "server"]} />{t("menu.environment.title")}</MenuTitle>
+                          <EnvStatus>
+                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "thermometer-three-quarters"]} />
+                            <span>{roomResult?.room?.ambient.temp.toFixed(1)}</span>
                             <span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>℃</span>
-                          </Col>
-                          <Col style={{ paddingLeft: "0", fontSize: "2rem" }}>
-                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "tint"]} />{roomResult?.room?.ambient.humid.toFixed(0)}
+                          </EnvStatus>
+                          <EnvStatus>
+                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "tint"]} />
+                            <span>{roomResult?.room?.ambient.humid.toFixed(0)}</span>
                             <span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>%</span>
-                          </Col>
-                          <Col style={{ paddingLeft: "0", fontSize: "2rem" }}>
-                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "wind"]} />{roomResult?.room?.ambient.pressure.toFixed(1)}
+                          </EnvStatus>
+                          <EnvStatus>
+                            <Icon fixedWidth style={{ fontSize: "1.5rem" }} icon={["fas", "wind"]} />
+                            <span>{roomResult?.room?.ambient.pressure.toFixed(1)}</span>
                             <span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>hPa</span>
-                          </Col>
+                          </EnvStatus>
                         </Col>
                         <Col sm style={{ marginTop: "1rem" }}>
-                          <p onClick={() => { setOtakuCount(otakuCount + 1) }}><Icon icon={["fas", "swatchbook"]} />{t("menu.theme.title")}</p>
+                          <MenuTitle onClick={() => { setOtakuCount(otakuCount + 1) }}><Icon icon={["fas", "swatchbook"]} />{t("menu.theme.title")}</MenuTitle>
                           <ThemeSwitcher otaku={otaku} />
                         </Col>
                       </CustomRow>
@@ -118,7 +123,7 @@ const Basement: React.FC<Props> = props => {
                   <Modal.Footer>
                     <p>Version: {RELEASE_VERSION}</p>
                   </Modal.Footer>
-                </Modal>
+                </ThemedModal>
                 {props.children}
               </>
             )
@@ -138,4 +143,9 @@ const CustomRow = styled(Row)`
   margin-bottom: 1rem;
 `
 
+const EnvStatus = styled(Col)`
+  padding-left: 0;
+  font-size: 2rem;
+`
+
 export default Basement;
diff --git a/frontend/dash-home/src/themes/ui.css b/frontend/dash-home/src/themes/ui.css
@@ -49,6 +49,9 @@
 
 .close {
     text-shadow: initial;
+    font-size: 1.5rem;
+    font-weight: initial;
+    opacity: initial;
 }
 
 .table-dark {
@@ -79,6 +82,10 @@ h2 {
     font-weight: 400;
 }
 
+.modal-content {
+    border: none;
+}
+
 p {
     font-weight: 400;
 }