Added dark and light themes

Author: Asier Cidon

public/logo-color.png

@@ -0,0 +1,8 @@
+.theme-button h1 {
+  color: var(--on-secondary-color);
+  margin: var(--l);
+  font-size: var(--body-size-l);
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: underline;
+}

src/App.module.css

@@ -1,14 +1,42 @@
-import React from "react";
-import { Header } from "./ui/header/Header";
-import { Home } from "./ui/home/Home";
+import React, { useState } from 'react';
+import { Header } from './ui/header/Header';
+import { Home } from './ui/home/Home';
+import { bind } from './utils/bind';
+import stylesApp from './App.module.css';
+import classNamesBind from 'classnames/bind';
+import stylesDark from './styles/themeDark.module.css';
+// import stylesLight from './styles/themeLight.module.css';
+
+const cx = bind(stylesApp);
 
 function App() {
+  const [selectTheme, setSelectTheme] = useState('light');
+
+  classNamesBind.bind(stylesDark);
+
+  const changeTheme = async () => {
+    if (selectTheme === 'light') {
+      console.log('Importing Light');
+      await import('./styles/themeLight.module.css');
+      setSelectTheme('dark');
+    } else {
+      console.log('Importing Dark');
+      window.location.reload();
+      setSelectTheme('light');
+    }
+  };
+
   return (
     <>
-      <Header />
+      <header>
+        <div className={cx('theme-button')}>
+          <h1 onClick={changeTheme}>{selectTheme}</h1>
+        </div>
+        <Header />
+      </header>
       <Home />
     </>
-  )
+  );
 }
 
-export default App;
+export default App;

src/App.tsx

@@ -12,9 +12,9 @@ export const Logo: React.FunctionComponent<Props> = ({ size }) => {
   return (
     <>
       <img
-        src='./logo.png'
-        data-testid='Logo'
-        alt='Jump Logo'
+        src="./logo-color.png"
+        data-testid="Logo"
+        alt="Jump Logo"
         className={cx(size)}
       />
     </>

src/core/components/logo/Logo.tsx

@@ -1,5 +1,4 @@
 @import './reset.css';
-@import './theme.css';
 
 body {
   font-family: var(--body-font);
@@ -15,3 +14,11 @@ input {
 select {
   font-family: var(--body-font);
 }
+
+* {
+  -ms-overflow-style: none;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}

src/styles/index.css

@@ -19,12 +19,13 @@
   --body-font: Comfortaa;
   --title-font: Comfortaa;
 
-  --primary-color: linear-gradient(to bottom right, #72ebbc, #3c7497);
+  /* --primary-color: linear-gradient(to bottom right, #72ebbc, #3c7497); */
+  --primary-color: linear-gradient(to bottom right, #000000, #363738);
   --on-primary-color: white;
 
-  --secondary-color: white;
-  --on-secondary-color: #547386;
-  --shadow-secondary-color: #cfd6e2;
+  --secondary-color: linear-gradient(to bottom right, #202020, #3a3a3a);
+  --on-secondary-color: white;
+  --shadow-secondary-color: #5e6166;
 
   --logo-xxl: 150px;
   --logo-xl: 125px;

src/styles/theme.css src/styles/themeDark.module.css

@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css?family=Comfortaa');
+
+:root {
+  --xs: 0.25rem;
+  --s: 0.5rem;
+  --m: 1rem;
+  --l: 2rem;
+  --xl: 4rem;
+  --xxl: 8rem;
+
+  --body-size-s: 10px;
+  --body-size-m: 14px;
+  --body-size-l: 16px;
+  --body-size-xl: 20px;
+  --body-size-xxl: 24px;
+
+  --body-size: 22px;
+
+  --body-font: Comfortaa;
+  --title-font: Comfortaa;
+
+  /* --primary-color: linear-gradient(to bottom right, #72ebbc, #3c7497); */
+  --primary-color: linear-gradient(to bottom right, #ffffff, #ffffff);
+  --on-primary-color: rgb(56, 56, 56);
+
+  --secondary-color: linear-gradient(to bottom right, #fafafa, #f1f1f1);
+  --on-secondary-color: rgb(24, 24, 24);
+  --shadow-secondary-color: #ffffff;
+
+  --logo-xxl: 150px;
+  --logo-xl: 125px;
+  --logo-l: 60px;
+  --logo-m: 40px;
+  --logo-s: 25px;
+  --logo-xs: 10px;
+}

src/styles/themeLight.module.css

@@ -4,7 +4,6 @@
   border: none;
   flex-direction: column;
   align-items: center;
-  padding-top: var(--xl);
   padding-bottom: var(--xxl);
 }
 

src/ui/header/Header.module.css

@@ -10,14 +10,12 @@ interface Props {}
 export const Header: React.FunctionComponent<Props> = () => {
   return (
     <>
-      <header>
-        <div className={cx('logo')}>
-          <a href='/'>
-            <Logo size='xxl'></Logo>
-          </a>
-          <h1>Jump App v2.0</h1>
-        </div>
-      </header>
+      <div className={cx('logo')}>
+        <a href='/'>
+          <Logo size='xxl'></Logo>
+        </a>
+        <h1>Jump App v2.0</h1>
+      </div>
     </>
   );
 };

src/ui/header/Header.tsx

@@ -12,21 +12,33 @@
   flex-direction: column;
 }
 
+.jumps-buttons-images {
+  color: #282c34;
+  display: flex;
+  flex-direction: row;
+  padding-top: var(--m);
+  padding-left: var(--l);
+}
+
+.jumps-buttons-images-item {
+  padding-right: var(--l);
+}
+
 .jumps-buttons h1 {
   color: var(--on-secondary-color);
   padding-top: var(--l);
   font-size: var(--body-size-l);
 }
 
 .jumps-buttons-button {
-  background-color: var(--secondary-color);
+  background-image: var(--secondary-color);
   color: var(--on-secondary-color);
   border: 1px solid var(--shadow-secondary-color);
   width: var(--logo-l);
   height: var(--logo-l);
   margin-top: var(--m);
   margin-right: var(--m);
-  border-radius: 25px;
+  border-radius: 50%;
 }
 
 .jumps-buttons-button-img {
@@ -35,7 +47,7 @@
 }
 
 .jumps-buttons-calls {
-  background-color: var(--secondary-color);
+  background-image: var(--secondary-color);
   color: var(--on-secondary-color);
   border: 1px solid var(--shadow-secondary-color);
   font-size: var(--body-size-l);
@@ -46,7 +58,7 @@
 }
 
 .jumps-box {
-  background-color: var(--secondary-color);
+  background-image: var(--secondary-color);
   color: var(--on-secondary-color);
   padding: var(--l);
   margin-left: var(--xl);
@@ -57,7 +69,6 @@
 }
 
 .jumps-box h1 {
-  background-color: var(--secondary-color);
   color: var(--on-secondary-color);
   padding-bottom: var(--m);
   font-size: var(--body-size-xl);
@@ -95,6 +106,7 @@
   cursor: pointer;
   overflow: hidden;
   outline: none;
+  color: var(--secondary-color);
   margin-left: var(--m);
 }
 
@@ -109,7 +121,8 @@
   font-size: var(--body-size-l);
   color: var(--on-secondary-color);
   justify-content: center;
-  padding-top: var(--xl);
+  padding: var(--xxl) var(--xl) var(--xl) var(--l);
+  text-align: center;
 }
 
 .logs-items {