blueprint js with darktheme added

pavlobu · Aug 19, 2020 · 5f3eece · 5f3eece
1 parent 62b1920
commit 5f3eece
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 47 deletions.
diff --git a/app/app.global.css b/app/app.global.css
@@ -3,21 +3,38 @@
  *        See https://github.com/webpack-contrib/sass-loader#imports
  */
 @import '~@fortawesome/fontawesome-free/css/all.css';
+@import '~normalize.css/normalize.css';
+@import '~@blueprintjs/core/lib/css/blueprint.css';
 
 body {
   position: relative;
   color: white;
   height: 100vh;
-  background-color: #232c39;
-  background-image: linear-gradient(
+  background-color: whitesmoke;
+
+  /* background-image: linear-gradient(
     45deg,
     rgba(0, 216, 255, 0.5) 10%,
     rgba(0, 1, 127, 0.7)
-  );
+  ); */
   font-family: Arial, Helvetica, Helvetica Neue, serif;
   overflow-y: hidden;
 }
 
+body.bp3-dark {
+  background-color: #293742;
+
+  /* background-color: #232c39; */
+}
+
+.bp3-button {
+  outline: none !important;
+}
+
+.bp3-control {
+  outline: none !important;
+}
+
 h2 {
   margin: 0;
   font-size: 2.25rem;

diff --git a/app/components/Home.tsx b/app/components/Home.tsx
@@ -3,11 +3,12 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ipcRenderer } from 'electron';
+import {
+  Button,
+} from '@blueprintjs/core';
 import routes from '../constants/routes.json';
 import styles from './Home.css';
 
-// import signalingServer from '../server/signalingServer';
-
 export default function Home(): JSX.Element {
   const [signalingServerPort, setSignalingServerPort] = useState('0000');
   const { t } = useTranslation();
@@ -29,13 +30,20 @@ export default function Home(): JSX.Element {
 
   return (
     <div className={styles.container} data-tid="container">
-      <h2>Home</h2>
-      <Link to={routes.COUNTER}>to Counter</Link>
-      <h3>{`${t('Signaling server is running on port')}: ${signalingServerPort}`}</h3>
-      <h3>{`Locales test ${t('Language')}`}</h3>
-      <button type="button" onClick={onButtonClick}>
+      <h2 className="bp3-heading">Home</h2>
+      <br />
+      <Link to={routes.COUNTER}>
+        {' '}
+        <Button text="To Counter" />
+      </Link>
+      <br />
+      <h3 className="bp3-heading">{`${t('Signaling server is running on port')}: ${signalingServerPort}`}</h3>
+      <br />
+      <h3 className="bp3-heading">{`Locales test ${t('Language')}`}</h3>
+      <br />
+      <Button type="button" onClick={onButtonClick}>
         CLICK ME!
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/app/components/NavPanel.tsx b/app/components/NavPanel.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  Alignment,
+  AnchorButton,
+  Classes,
+  Navbar,
+  Switch,
+} from '@blueprintjs/core';
+
+export default function NavPanel() {
+  const darkThemeToggleStyles = { marginBottom: 0 };
+
+  const handleToggleDarkTheme = () => {
+    document.body.classList.toggle(Classes.DARK);
+  };
+
+  return (
+    <Navbar className={Classes.DARK}>
+      <Navbar.Group align={Alignment.LEFT}>
+        <Navbar.Heading>Deskreen</Navbar.Heading>
+      </Navbar.Group>
+      <Navbar.Group align={Alignment.RIGHT}>
+        <AnchorButton href="#" text="Home" />
+        <Navbar.Divider />
+        <Navbar.Divider />
+        <Switch
+          style={darkThemeToggleStyles}
+          label="Dark theme"
+          onChange={handleToggleDarkTheme}
+        />
+      </Navbar.Group>
+    </Navbar>
+  );
+}
diff --git a/app/containers/CounterPage.tsx b/app/containers/CounterPage.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
+import NavPanel from '../components/NavPanel';
 import Counter from '../features/counter/Counter';
 
 export default function CounterPage() {
-  return <Counter />;
+  return (
+    <>
+      <NavPanel />
+      <Counter />
+    </>
+  );
 }
diff --git a/app/containers/HomePage.tsx b/app/containers/HomePage.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
+import NavPanel from '../components/NavPanel';
 import Home from '../components/Home';
 
 export default function HomePage() {
-  return <Home />;
+  return (
+    <>
+      <NavPanel />
+      <Home />
+    </>
+  );
 }
diff --git a/app/features/counter/Counter.css b/app/features/counter/Counter.css
@@ -3,12 +3,12 @@
 }
 
 .counter {
-  position: absolute;
-  top: 30%;
-  left: 45%;
-  font-size: 10rem;
-  font-weight: bold;
-  letter-spacing: -0.025em;
+  position: absolute !important;
+  top: 30% !important;
+  left: 45% !important;
+  font-size: 10rem !important;
+  font-weight: bold !important;
+  letter-spacing: -0.025em !important;
 }
 
 .btnGroup {

diff --git a/app/features/counter/Counter.tsx b/app/features/counter/Counter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { Button } from '@blueprintjs/core';
 import styles from './Counter.css';
 import routes from '../../constants/routes.json';
 import {
@@ -17,15 +18,19 @@ export default function Counter() {
   return (
     <div>
       <div className={styles.backButton} data-tid="backButton">
+        <br />
         <Link to={routes.HOME}>
-          <i className="fa fa-arrow-left fa-3x" />
+          <Button icon="arrow-left" />
         </Link>
       </div>
-      <div className={`counter ${styles.counter}`} data-tid="counter">
+      <h1
+        className={`bp3-heading counter ${styles.counter}`}
+        data-tid="counter"
+      >
         {value}
-      </div>
+      </h1>
       <div className={styles.btnGroup}>
-        <button
+        <Button
           className={styles.btn}
           onClick={() => {
             dispatch(increment());
@@ -34,8 +39,8 @@ export default function Counter() {
           type="button"
         >
           <i className="fa fa-plus" />
-        </button>
-        <button
+        </Button>
+        <Button
           className={styles.btn}
           onClick={() => {
             dispatch(decrement());
@@ -44,8 +49,8 @@ export default function Counter() {
           type="button"
         >
           <i className="fa fa-minus" />
-        </button>
-        <button
+        </Button>
+        <Button
           className={styles.btn}
           onClick={() => {
             dispatch(incrementIfOdd());
@@ -54,8 +59,8 @@ export default function Counter() {
           type="button"
         >
           odd
-        </button>
-        <button
+        </Button>
+        <Button
           className={styles.btn}
           onClick={() => {
             dispatch(incrementAsync());
@@ -64,7 +69,7 @@ export default function Counter() {
           type="button"
         >
           async
-        </button>
+        </Button>
       </div>
     </div>
   );

diff --git a/package.json b/package.json
@@ -277,6 +277,7 @@
     "webpack-merge": "^5.0.9"
   },
   "dependencies": {
+    "@blueprintjs/core": "^3.31.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@reduxjs/toolkit": "^1.4.0",
@@ -302,6 +303,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.5",
+    "sass": "^1.26.10",
     "source-map-support": "^0.5.19"
   },
   "devEngines": {