Add themes to Remote/SwitchbotChooser

dash-app · Mar 19, 2021 · 81aa0ca · 81aa0ca
1 parent 73408a0
commit 81aa0ca
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 18 deletions.
diff --git a/frontend/dash-home/src/components/atoms/Themed.tsx b/frontend/dash-home/src/components/atoms/Themed.tsx
@@ -5,7 +5,9 @@ import { ThemeContext } from '../themes/ThemeProvider';
 
 import {
   Spinner as BaseSpinner,
+  Tabs as BaseTabs,
   Modal,
+  TabsProps,
 } from 'react-bootstrap';
 
 export const Icon = (props: any) => {
@@ -101,4 +103,36 @@ const DarkModal = styled(Modal)`
     background-color: #111112;
     border: none;
   }
-`;
+`;
+
+export const Tabs = (props: TabsProps) => {
+  const theme = React.useContext(ThemeContext).theme;
+  return (
+    <>
+      <style type="text/css">
+        {`
+          .nav-tabs {
+            border-bottom: 1px solid ${theme === "NERD_BLACK" ? "#2F2F2F" : "#ECEEEF"};
+          }
+          .nav-tabs .nav-link {
+            background-color: initial;
+            color: ${theme === "NERD_BLACK" ? "#FFFFFF" : "#5F5F5F"};
+            border: none;
+          }
+
+          .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+            background-color: initial;
+            color: ${theme === "NERD_BLACK" ? "#FFFFFF" : "#000000"};
+            border-bottom: 2px solid #007BFF;
+          }
+      `}
+      </style>
+      <BaseTabs
+        {...props}
+        style={{
+          color: theme === "NERD_BLACK" ? "#FFFFFF" : "#2F2F2F",
+        }}
+      />
+    </>
+  )
+}
diff --git a/frontend/dash-home/src/components/controller/RemoteChooser.tsx b/frontend/dash-home/src/components/controller/RemoteChooser.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { Modal, Button, Tabs, Card, Tab } from 'react-bootstrap';
+import { Modal, Button, Card, Tab } from 'react-bootstrap';
 import { Remote } from '../../remote-go/Controller';
 import { RemotesResult, fetchRemotes } from '../../remote-go/Remotes';
 import { NotifyError } from '../atoms/Notify';
 import { useTranslation } from 'react-i18next';
+import { ThemedModal, Tabs } from '../atoms/Themed';
+import { P } from '../atoms/Core';
 
 interface Props {
   visible: boolean,
@@ -36,7 +38,7 @@ const RemoteChooser: React.FC<Props> = (props: Props) => {
   const remotes = allRemotes.get(props.kind.toLowerCase());
   if (!remotes) {
     return (
-      <Modal
+      <ThemedModal
         size="lg"
         show={props.visible}
         backdrop="static"
@@ -51,15 +53,15 @@ const RemoteChooser: React.FC<Props> = (props: Props) => {
         <Modal.Body>
           <p>{t("controller.remote.error.unknownKind", { kind: props.kind })}</p>
         </Modal.Body>
-      </Modal>
+      </ThemedModal>
     );
   }
 
   // Sort entry
   Object.keys(remotes).forEach((vendor: string) => remotes[vendor].sort())
 
   return (
-    <Modal
+    <ThemedModal
       size="lg"
       show={props.visible}
       backdrop="static"
@@ -71,17 +73,17 @@ const RemoteChooser: React.FC<Props> = (props: Props) => {
         <Modal.Title>{t("controller.remote.chooser", { kind: props.kind })}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <Tabs defaultActiveKey={remotes[0]} id="tabs">
+        <Tabs variant={"tabs"} defaultActiveKey={remotes[0]} id="tabs">
           {/* Generate kind of vendor/models array... */}
           {Object.keys(remotes).map((vendor: string) => {
             return (
               <Tab key={vendor} eventKey={vendor} title={vendor}>
                 {/* Models Card... */}
                 {remotes[vendor].map((model: string) => {
                   return (
-                    <Card key={model}>
+                    <div key={model}>
                       <Card.Body>
-                        <Card.Title>{model}</Card.Title>
+                        <P>{model}</P>
                         <Button variant="primary" onClick={() => {
                           props.handleUpdate(
                             ((): Remote => ({
@@ -93,15 +95,15 @@ const RemoteChooser: React.FC<Props> = (props: Props) => {
                         }}>{t("button.select")}</Button>
                         <Button variant="secondary" disabled>{t("controller.remote.test")}</Button>
                       </Card.Body>
-                    </Card>
+                    </div>
                   )
                 })}
               </Tab>
             )
           })}
         </Tabs>
       </Modal.Body>
-    </Modal >
+    </ThemedModal>
   )
 }
 

diff --git a/frontend/dash-home/src/components/controller/SwitchBotChooser.tsx b/frontend/dash-home/src/components/controller/SwitchBotChooser.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Modal, Button, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 import { SwitchBot } from '../../remote-go/Controller';
+import { P } from '../atoms/Core';
+import { ThemedModal } from '../atoms/Themed';
 
 interface Props {
   initialState?: SwitchBot,
@@ -10,6 +13,8 @@ interface Props {
 }
 
 const SwitchBotChooser: React.FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+
   // TODO: Macアドレスの記入とコマンドの設定(ドロップダウンで 'press', 'on', 'off' の設定を行えるようにする)
   const [switchBot, setSwitchBot] = React.useState<SwitchBot>(() => {
     return {
@@ -31,20 +36,20 @@ const SwitchBotChooser: React.FC<Props> = (props: Props) => {
 
 
   return (
-    <Modal
+    <ThemedModal
       size="lg"
       show={props.visible}
       onHide={props.handleClose}
       backdrop="static"
     >
       <Form onSubmit={handleSubmit}>
         <Modal.Header closeButton>
-          <Modal.Title>SwitchBot Settings...</Modal.Title>
+          <Modal.Title>{t("controller.switchbot.chooser")}</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           {/* Mac Address */}
           <Form.Group>
-            <Form.Label>MAC Address</Form.Label>
+            <Form.Label><P>{t("controller.switchbot.mac")}</P></Form.Label>
             <Form.Control
               type="text"
               placeholder="xx:xx:xx:xx:xx:xx"
@@ -59,7 +64,7 @@ const SwitchBotChooser: React.FC<Props> = (props: Props) => {
 
           {/* Type */}
           <Form.Group>
-            <Form.Label>Type</Form.Label>
+            <Form.Label><P>Type</P></Form.Label>
             <Form.Control
               type="select"
               as="select"
@@ -77,11 +82,11 @@ const SwitchBotChooser: React.FC<Props> = (props: Props) => {
         </Modal.Body>
         <Modal.Footer>
           <Button type="submit">
-            Update
+            {t("button.update")}
           </Button>
         </Modal.Footer>
       </Form>
-    </Modal>
+    </ThemedModal>
   )
 }
 

diff --git a/frontend/dash-home/src/locales/en/translation.json b/frontend/dash-home/src/locales/en/translation.json
@@ -94,7 +94,9 @@
       }
     },
     "switchbot": {
-      "openSettings": "Open Switchbot Settings..."
+      "openSettings": "Open Switchbot Settings...",
+      "chooser": "Switchbot Settings",
+      "mac": "MAC Address"
     },
     "entry": {
       "name": {

diff --git a/frontend/dash-home/src/locales/ja/translation.json b/frontend/dash-home/src/locales/ja/translation.json
@@ -94,7 +94,9 @@
       }
     },
     "switchbot": {
-      "openSettings": "Switchbotの設定を開く"
+      "openSettings": "Switchbotの設定を開く",
+      "chooser": "Switchbotの設定",
+      "mac": "MACアドレス"
     },
     "entry": {
       "name": {