Dark & Light theme toggle for Workflow

apps/wrapper/src/App.css

@@ -2,7 +2,7 @@
  display: flex;
  height: 100vh;
  width: 100vw;
- background: #2b2b2b;
+ background: var(--background);
  justify-content: center;
  align-items: center;
  flex-direction: column;
@@ -11,12 +11,12 @@
 
 .heading {
  font-size: 5rem;
- color: #ffc119;
+ color: var(--text);
 }
 
 .subtitle {
  font-size: 2rem;
- color: #efefef;
+ color: var(--text-secondary);
  margin-top: -2rem;
  margin-bottom: 4rem;
 }
@@ -30,25 +30,36 @@
 .workflowBtns {
  height: 11rem;
  width: 11rem;
- border: 1px solid #ffc119;
+ border: 1px solid var(--button-border);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
- color: #efefef;
+ color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in;
  text-align: center;
 }
 
 .workflowBtns:hover {
- background: #ffc119;
- color: #000;
+ background: var(--button-hover-background);
+ color: var(--button-hover-text);
  transform: translateY(-5px);
- box-shadow: #ffc119 0px 30px 60px -6px, #ffc119 0px 18px 36px -9px;
+ box-shadow: var(--button-shadow);
 }
 
+.toggleButtonContainer {
+ position: fixed;
+ bottom: 0;
+ right: 12px;
+ color: var(--toggle-button-color);
+}
+.toggle-btn{
+ font-size: 35px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+}
 @media screen and (max-width: 600px) {
  .btnContainer {
  align-items: center;
@@ -73,4 +84,26 @@
  font-size: 1.5rem;
  margin-bottom: 0;
  }
-}
+}
+
+.dark {
+ --background: #2b2b2b;
+ --text: #ffc119;
+ --text-secondary: #efefef;
+ --button-border: #ffc119;
+ --button-hover-background: #ffc119;
+ --button-hover-text: #000;
+ --button-shadow: 0px 30px 60px -6px, 0px 18px 36px -9px;
+ --toggle-button-color: #efefef;
+}
+
+.light {
+ --background: #f5f5f5;
+ --text: #2b2b2b;
+ --text-secondary: #777777;
+ --button-border: #2b2b2b;
+ --button-hover-background: #2b2b2b;
+ --button-hover-text: #fff;
+ --button-shadow: 0px 30px 60px -6px, 0px 18px 36px -9px;
+ --toggle-button-color: #2b2b2b;
+}

apps/wrapper/src/App.js

@@ -1,8 +1,18 @@
-import './App.css';
 import React, { useState, useEffect } from 'react';
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 import GenericForm from './components/GenericForm';
 
 function App() {
+ const [isDarkMode, setIsDarkMode] = useState(
+ () => JSON.parse(sessionStorage.getItem('theme')) ?? true
+ );
+
+ useEffect(() => {
+ sessionStorage.setItem('theme', JSON.stringify(isDarkMode));
+ console.log(isDarkMode)
+ }, [isDarkMode]);
+
  const [flows, setFlows] = useState([
  {
  name: 'Jumping Forms',
@@ -23,24 +33,41 @@ function App() {
  name: 'File Upload',
  config: 'workflow_first.json'
  }
- ])
+ ]);
 
  const [selectedFlow, setSelectedFlow] = useState({});
 
  return (
- <div className="App">
+ <div className={`App ${isDarkMode ? 'dark' : 'light'}`}>
+ <div className="toggleButtonContainer">
+ <span className='toggle-btn' onClick={() => setIsDarkMode(!isDarkMode)}>
+ {isDarkMode ? (
+ <i class="fa-solid fa-sun"></i>
+ ) : (
+ <i class="fa-solid fa-moon"></i>
+ )}
+ </span>
+ </div>
  <div className='container'>
- {!Object.keys(selectedFlow).length ?
+ {!Object.keys(selectedFlow).length ? (
  <>
  <div className='heading animate__animated animate__fadeInDown'>Workflow Demo App</div>
  <div className='subtitle animate__animated animate__fadeInDown'>Please select one of the flows</div>
  <div className='btnContainer'>
- {flows?.map(el => <div className='workflowBtns animate__animated animate__fadeIn' onClick={() => setSelectedFlow(el)}>{el.name}</div>)}
+ {flows?.map(el => (
+ <div
+ className='workflowBtns animate__animated animate__fadeIn'
+ onClick={() => setSelectedFlow(el)}
+ key={el.name}
+ >
+ {el.name}
+ </div>
+ ))}
  </div>
  </>
-  : <GenericForm {...{ selectedFlow, setSelectedFlow }} />
- }
-
+ ) : (
+  <GenericForm {...{ selectedFlow, setSelectedFlow}} />
+ )}
  </div>
  </div>
  );

apps/wrapper/src/components/GenericForm/index.js

@@ -21,6 +21,10 @@ const GenericForm = (props) => {
  const encodeFunction = (func) => {
  return encodeURIComponent(JSON.stringify(func));
  }
+ const [isDarkMode, setIsDarkMode] = useState(
+ () => JSON.parse(sessionStorage.getItem('theme')) ?? true
+ );
+
 
  const startingForm = formSpec.startingForm;
  const [fileUrls, setFileUrls] = useState({});
@@ -114,8 +118,8 @@ const GenericForm = (props) => {
  };
 
  return (
- <div className={styles.container}>
- <div className={styles.header + ' animate__animated animate__slideInLeft animate__faster'}>
+ <div className={`${styles.container} ${isDarkMode ? styles.dark : styles.light}`}>
+ <div className={`${styles.header} animate__animated animate__slideInLeft animate__faster`}>
  <div onClick={() => setSelectedFlow({})} className={styles.back} >Go Back</div>
  <div>Workflow /{selectedFlow.name}</div>
  </div>
@@ -125,10 +129,10 @@ const GenericForm = (props) => {
  </div>
  }
  {
- selectedFlow.offline && <p className={`${styles.subDetails} animate__animated animate__fadeIn`} style={{ color: '#fff', fontSize: '1.5rem' }}>Disable internet and try submitting the form</p>
+ selectedFlow.offline && <p className={`${styles.subDetails} animate__animated animate__fadeIn`} style={{ fontSize: '1.5rem' }}>Disable internet and try submitting the form</p>
  }
  {
- selectedFlow.submitToHasura && <p className={`${styles.subDetails} animate__animated animate__fadeIn`} style={{ color: '#fff', fontSize: '1.5rem' }}>Submit the form and check <a style={{ color: '#ffc119' }} target="_blank" href={`${HASURA_URL}`}>Hasura</a></p>
+ selectedFlow.submitToHasura && <p className={`${styles.subDetails} animate__animated animate__fadeIn`} style={{ fontSize: '1.5rem' }}>Submit the form and check <a style={{ color: '#ffc119' }} target="_blank" href={`${HASURA_URL}`}>Hasura</a></p>
  }
  <div className={styles.formContainer}>
  <iframe title='current-form'
@@ -145,9 +149,9 @@ const GenericForm = (props) => {
  {isCopied && <span className={styles.copyButton}><i className="fas fa-check"></i>Copied</span>}
  </div>
  <div className={styles.toggleBtn}>
- <label class={styles.switch}>
+ <label className={styles.switch}>
  <input type="checkbox" value={isXml} onChange={e => handleFormView(e.target.checked)} />
- <span class={styles.slider}></span>
+ <span className={styles.slider}></span>
  </label>
  {isXml ? <span className='animate__animated animate__fadeIn'>XML</span> : <span className='animate__animated animate__fadeIn'>JSON</span>}
  </div>