updated-switch-mode

miljkovicjovan · Dec 2, 2023 · a56cc7b · a56cc7b
1 parent 5584e36
commit a56cc7b
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 18,431 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,9 +20,11 @@ function App() {
 			askForArchivingConfirmation: true,
 			askForBulkUnarchivingConfirmation: true,
 			askForUnarchivingConfirmation: true,
-      askForEditingConfirmation: true
+      askForEditingConfirmation: true,
+      askForSwitchDarkMode: true,
 		}
   );
+document.body.style.background = settings.askForSwitchDarkMode ? '#f5f5f5' :'#212529';
 
   return (
     <Router>
@@ -33,7 +35,7 @@ function App() {
           <Route path="/" exact element={<Home settings={settings} setSettings={setSettings}/>} />
           <Route path="/archive" element={<Archive settings={settings} setSettings={setSettings}/>} />
         </Routes>
-        <Footer/>
+        <Footer settings={settings}/>
       </span>
     </Router>
   );

diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx
@@ -4,7 +4,7 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import { Tooltip } from "react-tooltip";
 
-function AddTask({ onAdd }) {
+function AddTask({ onAdd, settings }) {
   const [name, setName] = useState("");
   const [hover, setHover] = useState(false);
   const toggleHover = () => setHover(!hover);
@@ -31,14 +31,15 @@ function AddTask({ onAdd }) {
         type="text"
         value={name}
         placeholder="Add a Task"
-        className="bg-dark text-light rounded p-1 me-3"
+        className={`rounded p-1 me-3 ${settings.askForSwitchDarkMode ? "bg-light text-dark" :"bg-dark text-light" }`}
+        style= {{border : settings.askForSwitchDarkMode ? "1px solid black" :"1px solid white" }}
         onChange={(e) => setName(e.target.value)}
       />
       <Button
         type="submit"
-        className={`border-light add-task ${
-          hover ? "bg-dark text-light" : "bg-light text-dark"
-        }`}
+      className={`add-task ${settings.askForSwitchDarkMode ? "border-dark": "border-light"} 
+      ${hover ? (settings.askForSwitchDarkMode ? "bg-white text-dark" : "bg-dark text-white") : 
+            (settings.askForSwitchDarkMode ? "bg-dark text-light" : "bg-light text-dark")}`}
         onMouseEnter={toggleHover}
         onMouseLeave={toggleHover}
       >
@@ -47,6 +48,8 @@ function AddTask({ onAdd }) {
       </Button>
       <Tooltip
         className="d-none d-lg-block"
+        style={{backgroundColor: settings.askForSwitchDarkMode ? "#f8f9fa" : "#212529",
+                color: settings.askForSwitchDarkMode ? "black" : "white" }}
         anchorSelect=".add-task"
         content="Add a Task"
         place="right"

diff --git a/src/components/CompleteTasks.jsx b/src/components/CompleteTasks.jsx
@@ -17,7 +17,7 @@ function CompleteTasks({ onCompleteAll, settings, setSettings }) {
 			<>
 				<Button 
 					className={`mx-auto mt-3 border-success 
-					${hover ? "bg-dark text-success" : "bg-success text-light"}`}
+					${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-light"}`}
 					onMouseEnter={toggleHover}
 					onMouseLeave={toggleHover}
 					onClick={handleShow}

diff --git a/src/components/DeleteTasks.jsx b/src/components/DeleteTasks.jsx
@@ -17,7 +17,7 @@ function DeleteTasks({ onDeleteAll, settings, setSettings }) {
 			<>
 				<Button 
 					className={`mx-auto mt-2 border-danger 
-					${hover ? "bg-dark text-danger" : "bg-danger text-white"}`}
+					${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`}
 					onMouseEnter={toggleHover}
 					onMouseLeave={toggleHover}
 					onClick={handleShow}

diff --git a/src/components/FinishedTasks.jsx b/src/components/FinishedTasks.jsx
@@ -123,7 +123,7 @@ function FinishedTasks(
 
   return (
     <>
-      <Stack className="text-center pt-4">
+      <Stack className={`text-center pt-4 ${settings.askForSwitchDarkMode ?  "text-dark" : "text-light"}`}>
         <hr className="mx-auto w-25"/>
         <h4 className="text-decoration-underline">Finished Tasks &#129321;</h4>
         <p className="text-secondary">
@@ -182,7 +182,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-success
-              ${hoverReactivate ? "bg-dark text-success" : "bg-success text-white"}`
+              ${hoverReactivate ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-white"}`
             }
             onMouseEnter={toggleHoverReactivate}
             onMouseLeave={toggleHoverReactivate}
@@ -197,7 +197,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-primary
-              ${hoverArchive ? "bg-dark text-primary" : "bg-primary text-white"}`
+              ${hoverArchive ? (settings.askForSwitchDarkMode ?  "bg-white text-primary" : "bg-dark text-primary") : "bg-primary text-white"}`
             }
             onMouseEnter={toggleHoverArchive}
             onMouseLeave={toggleHoverArchive}
@@ -212,7 +212,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-danger
-              ${hover ? "bg-dark text-danger" : "bg-danger text-white"}`
+              ${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`
             }
             onMouseEnter={toggleHover}
             onMouseLeave={toggleHover}

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,8 +1,8 @@
 import GitHubButton from 'react-github-btn';
 
-function Footer() {
+function Footer({settings}) {
   return (
-    <footer className="safari_only py-3 text-white text-center">
+    <footer className={`safari_only py-3 text-center ${settings.askForSwitchDarkMode ? "text-dark":"text-white"}`}>
       <p>
         Support us or Contribute on{" "}
         <a

diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
@@ -1,4 +1,4 @@
-import { Button, Modal, Form } from "react-bootstrap";
+import { Button, Modal, Form, CloseButton } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
 import { useState, useEffect } from "react";
@@ -21,6 +21,7 @@ function SettingsModal({ settings, setSettings }) {
 			askForBulkUnarchivingConfirmation: isChecked,
 			askForUnarchivingConfirmation: isChecked,
 			askForEditingConfirmation: isChecked,
+			askForSwitchDarkMode:isChecked,
 		});
 	};
 
@@ -42,7 +43,9 @@ function SettingsModal({ settings, setSettings }) {
 		setSettings({ ...settings, askForUnarchivingConfirmation: e.target.checked });
 	const handleSwitchEditingChange = (e) => 
 		setSettings({ ...settings, askForEditingConfirmation: e.target.checked });
-
+	const handleSwitchDarkMode = (e) => 
+		setSettings({ ...settings, askForSwitchDarkMode: e.target.checked });
+
 	function isSwitched() {
 		if (settings.askForBulkReactivatingConfirmation &&
       settings.askForReactivatingConfirmation &&
@@ -52,7 +55,8 @@ function SettingsModal({ settings, setSettings }) {
 			settings.askForArchivingConfirmation &&
 			settings.askForBulkUnarchivingConfirmation &&
 			settings.askForUnarchivingConfirmation &&
-			settings.askForEditingConfirmation) {
+			settings.askForEditingConfirmation && 
+			settings.askForSwitchDarkMode) {
 				return true;
 		} else return false;
 	}
@@ -66,18 +70,19 @@ function SettingsModal({ settings, setSettings }) {
   return (
 		<>
 			<Button 
-				variant="dark"
-				className="rounded-circle position-fixed"
+				variant={settings.askForSwitchDarkMode ? "white" : "dark"} 
+				className={`position-fixed rounded-circle ${settings.askForSwitchDarkMode ? "border-light" : "border-dark"} `}
 				style={{top:"15px", right:"15px"}}
 				onClick={() => handleShow()}
 			>
 				<FontAwesomeIcon icon={faGear}/>
 			</Button>
-			<Modal fullscreen="sm-down" show={show} onHide={handleClose}>
-				<Modal.Header closeButton>
+			<Modal fullscreen="sm-down" show={show} onHide={handleClose} >
+				<Modal.Header className={settings.askForSwitchDarkMode ? 'text-light bg-dark' : 'text-dark bg-light'}>
 						<Modal.Title>Settings</Modal.Title>
+						<CloseButton bordered={false} className="outline-none" onClick={handleClose} variant={settings.askForSwitchDarkMode ? "white" : "primary"} />
 				</Modal.Header>
-				<Modal.Body className="d-flex justify-content-center">
+				<Modal.Body className={settings.askForSwitchDarkMode ? "d-flex justify-content-center text-light bg-dark" : "d-flex justify-content-center text-dark bg-light"}>
 					<Form>
 						<span className="d-flex align-items-center gap-4">
 							<h5 className="m-0 pe-1">Show Confirmations When</h5>
@@ -142,6 +147,12 @@ function SettingsModal({ settings, setSettings }) {
 							checked={settings.askForUnarchivingConfirmation}
 							onChange={handleSwitchUnarchiveChange}
 						/>
+						<Form.Check
+							type="switch"
+							label="Switch Mode"
+							checked={settings.askForSwitchDarkMode}
+							onChange={handleSwitchDarkMode}
+						/>
 					</Form>
 				</Modal.Body>
 			</Modal>

diff --git a/src/components/Task.jsx b/src/components/Task.jsx
@@ -40,7 +40,7 @@ function Task({ id, index, name, onDelete, onEdit, onComplete, settings, setSett
     <>
       <Stack 
         direction="horizontal" 
-        className="task m-2 mx-auto border rounded d-flex justify-content-between"
+        className={`task m-2 mx-auto border rounded d-flex justify-content-between ${settings.askForSwitchDarkMode ? "border-dark text-dark":"border-light text-light"}`}
       >
         {!editMode ? <span className="p-2">#{index+1} {name}</span> :
         <span className="d-flex align-items-center">
@@ -53,7 +53,7 @@ function Task({ id, index, name, onDelete, onEdit, onComplete, settings, setSett
               type="text" 
               value={editedName}
               placeholder="Add a Task"
-              className="bg-dark text-light rounded p-1 border-0"
+              className={`rounded p-1 border-0 ${settings.askForSwitchDarkMode ? "bg-white text-dark":"bg-dark text-light"}`}
               onChange={(e) => setEditedName(e.target.value)}
             />
           </form>        

diff --git a/src/components/Tasks.jsx b/src/components/Tasks.jsx
@@ -5,7 +5,7 @@ import CompleteTasks from "./CompleteTasks";
 
 function Tasks({ tasks, onDelete, onEdit, onComplete, onDeleteAll, onCompleteAll, settings, setSettings }) {
 	return (
-		<Stack className="my-3 mx-5">
+		<Stack className={`my-3 mx-5 ${settings.askForSwitchDarkMode ? "text-black":"text-light"}`}>
 			{tasks.length ? 
 				<>
 					<hr className="mx-auto w-25"/>

diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.css';
 
-document.body.style = 'background: rgb(32, 32, 32);';
+// document.body.style = 'background: rgb(32, 32, 32);';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx
@@ -152,7 +152,7 @@ function Archive({ settings, setSettings }) {
 
   return (
     <>
-      <Stack className="text-white text-center pt-4 footer-push">
+      <Stack className={`text-center pt-4 footer-push ${settings.askForSwitchDarkMode ?  "text-dark" : " text-light"}`} >
         {finishedTasks.some(task => task.archived === true) ? (
           <>
             <hr className="mx-auto w-25"/>
@@ -213,7 +213,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-success
-                  ${hoverReactivate ? "bg-dark text-success" : "bg-success text-white"}`
+                  ${hoverReactivate ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-white"}`
                 }
                 onMouseEnter={toggleHoverReactivate}
                 onMouseLeave={toggleHoverReactivate}
@@ -228,7 +228,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-primary
-                  ${hoverUnarchive ? "bg-dark text-primary" : "bg-primary text-white"}`
+                  ${hoverUnarchive ? (settings.askForSwitchDarkMode ?  "bg-white text-primary" : "bg-dark text-primary") : "bg-primary text-white"}`
                 }
                 onMouseEnter={toggleHoverUnarchive}
                 onMouseLeave={toggleHoverUnarchive}
@@ -243,7 +243,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-danger 
-                  ${hover ? "bg-dark text-danger" : "bg-danger text-white"}`
+                  ${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`
                 }
                 onMouseEnter={toggleHover}
                 onMouseLeave={toggleHover}

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -83,7 +83,9 @@ function Home({ settings, setSettings }) {
 
   return (
     <div className="text-white text-center footer-push">
-      <AddTask onAdd={addTask} />
+      <AddTask onAdd={addTask} 
+              settings={settings}
+            />
       {tasks.length ? (
         <Tasks
           onComplete={completeTask}

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,5 +1,5 @@
 input {
-  border: 1px solid white;
+  // border: 1px solid white;
   outline: none;
 }