From 777ff2399cdc5666defe5b55e3600a11a26c5ca2 Mon Sep 17 00:00:00 2001
From: sarahannie <sarahndianekwu@gmail.com>
Date: Fri, 29 Mar 2024 02:03:24 +0100
Subject: [PATCH 1/3] dark mode accessibility for signup page

---
 apps/signup/signup.css | 119 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 2 deletions(-)

diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index 40d071bfb..c403be4ab 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -1,4 +1,4 @@
-/* signup.css */
+/* signup.css
 
 
 body {
@@ -127,4 +127,119 @@ nav li:not(.active):hover a{
 	.signup-form {
 		width: 300px;
 	}
-}
\ No newline at end of file
+} */
+
+
+body {
+    color: #ccc;
+    background: #222; /* Dark background color */
+    font-family: 'Roboto', sans-serif;
+    overflow-x: hidden;
+}
+
+.bg-dark {
+    background-color: #333!important; /* Dark navbar background color */
+}
+
+.signup-form {
+    width: 390px;
+    margin: 3% auto;
+    padding: 30px 0;
+    background: #444; /* Dark form background color */
+    border: 1px solid #333;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+	margin-bottom: 30px;
+	
+}
+
+.signup-form h2 {
+    color: #ddd; /* Lighter text color */
+    text-align: center;
+}
+
+.signup-form .lead {
+    color: #ccc; /* Lighter text color */
+    font-size: 14px;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.signup-form form {
+    border-radius: 1px;
+    margin-bottom: 15px;
+    background: #555; /* Dark form background color */
+    padding: 30px;
+}
+
+.signup-form label {
+    color: #ccc; /* Lighter text color */
+    font-weight: normal;
+    font-size: 13px;
+}
+
+.signup-form .form-control {
+    color: #ddd; /* Lighter text color */
+    min-height: 38px;
+    border-color: #444; /* Darker border color */
+}
+
+.signup-form .input-group-addon {
+    color: #ddd; /* Lighter text color */
+    border-color: #444; /* Darker border color */
+}
+
+.signup-form .btn {
+    color: #fff; /* Light text color */
+    background: #19aa8d; /* Button background color */
+}
+
+.signup-form .btn:hover, .signup-form .btn:focus {
+    background: #179b81; /* Darker button background color on hover/focus */
+}
+
+.signup-form a {
+    color: #19aa8d; /* Link color */
+}
+
+.signup-form a:hover {
+    color: #179b81; /* Darker link color on hover */
+}
+
+.link {
+    color: #ccc; /* Lighter link color */
+}
+
+.link:hover {
+    color: #ddd; /* Lighter link color on hover */
+}
+
+/* Navbar Styles */
+.navbar {
+    border-bottom: 1px solid #444; /* Darker border color */
+}
+
+.navbar-nav .nav-link {
+    color: #ccc; /* Lighter text color */
+}
+
+.navbar-nav .nav-link:hover {
+    color: #ddd; /* Lighter text color on hover */
+}
+
+.navbar-toggler {
+    border-color: #ccc; /* Lighter border color */
+}
+
+.navbar-toggler-icon {
+    background-color: #ccc; /* Lighter background color for the toggler icon */
+}
+
+/* Footer Styles */
+.footer {
+    color: #ccc; /* Lighter text color */
+    background-color: #333; /* Dark footer background color */
+}
+
+.footer p {
+    margin-bottom: 0; /* Remove bottom margin from paragraph */
+}

From 764d8daf82967dd9a61bf8b26c7297304af1d390 Mon Sep 17 00:00:00 2001
From: sarahannie <sarahndianekwu@gmail.com>
Date: Fri, 29 Mar 2024 11:08:10 +0100
Subject: [PATCH 2/3] created toggle control between light and dark mode

---
 apps/signup/signup.css  | 298 ++++++++++++++++++----------------------
 apps/signup/signup.html |   8 ++
 apps/signup/signup.js   |  13 +-
 3 files changed, 154 insertions(+), 165 deletions(-)

diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index c403be4ab..eaa92ce69 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -1,245 +1,215 @@
-/* signup.css
-
-
-body {
-	color: #999;
-	background: #f5f5f5;
-	font-family: 'Roboto', sans-serif;
-	overflow-x: hidden;
+/* Light mode styles */
+body.light-mode {
+    color: #999;
+    background: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    overflow-x: hidden;
 }
+
 .bg-dark {
     background-color: #343a40!important;
 }
-.form-control, .form-control:focus, .input-group-addon {
-	border-color: #e1e1e1;
-	border-radius: 0;
+
+.form-control,
+.form-control:focus,
+.input-group-addon {
+    border-color: #e1e1e1;
+    border-radius: 0;
 }
+
 .signup-form {
-	width: 390px;
-	margin: 5% auto;
-	padding: 30px 0;
+    width: 390px;
+    margin: 5% auto;
+    padding: 30px 0;
+	
 }
+
 .signup-form h2 {
-	color: #636363;
-	margin: 0 0 15px;
-	text-align: center;
+    color: #636363;
+    margin: 0 0 15px;
+    text-align: center;
 }
+
 .signup-form .lead {
-	font-size: 14px;
-	margin-bottom: 30px;
-	text-align: center;
-}
-.signup-form form {		
-	border-radius: 1px;
-	margin-bottom: 15px;
-	background: #fff;
-	border: 1px solid #f3f3f3;
-	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-	padding: 30px;
+    font-size: 14px;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.signup-form form {
+    border-radius: 1px;
+    margin-bottom: 15px;
+    background: #fff;
+    border: 1px solid #f3f3f3;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    padding: 30px;
 }
+
 .signup-form .form-group {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
+
 .signup-form label {
-	font-weight: normal;
-	font-size: 13px;
+    font-weight: normal;
+    font-size: 13px;
 }
+
 .signup-form .form-control {
-	min-height: 38px;
-	box-shadow: none !important;
-	border-width: 0 0 1px 0;
-}	
-.signup-form .input-group-addon {
-	max-width: 42px;
-	text-align: center;
-	background: none;
-	border-width: 0 0 1px 0;
-	padding-left: 5px;
-}
-.signup-form .btn {        
-	font-size: 16px;
-	font-weight: bold;
-	background: #19aa8d;
-	border-radius: 3px;
-	border: none;
-	min-width: 140px;
-	outline: none !important;
-}
-.signup-form .btn:hover, .signup-form .btn:focus {
-	background: #179b81;
+    min-height: 38px;
+    box-shadow: none !important;
+    border-width: 0 0 1px 0;
 }
-.signup-form a {
-	color: #19aa8d;
-	text-decoration: none;
-}	
-.signup-form a:hover {
-	text-decoration: underline;
+
+.signup-form .input-group-addon {
+    max-width: 42px;
+    text-align: center;
+    background: none;
+    border-width: 0 0 1px 0;
+    padding-left: 5px;
 }
-.signup-form .fa {
-	font-size: 21px;
+
+.signup-form .btn {
+    font-size: 16px;
+    font-weight: bold;
+    background: #19aa8d;
+    border-radius: 3px;
+    border: none;
+    min-width: 140px;
+    outline: none !important;
 }
 
-.link{
-	letter-spacing: 0.02em;
-	text-transform: uppercase;
-	font-size: 0.99em;
-	font-weight: bold;
-	color: #5e6875;
-	text-decoration:none;
-	padding-right: 0.7rem;
-	padding-left: 0.7rem;
-	margin-top: 0.2rem;
-	font-family: "Open Sans", Helvetica, sans-serif;
-	line-height: 1.8;
+.signup-form .btn:hover,
+.signup-form .btn:focus {
+    background: #179b81;
 }
 
+.signup-form a {
+    color: #19aa8d;
+    text-decoration: none;
+}
 
+.signup-form a:hover {
+    text-decoration: underline;
+}
 
-nav li{
-	transition: background 0.5s; 
-	border-radius: 3px;
+.signup-form .fa {
+    font-size: 21px;
 }
 
+.link {
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    font-size: 0.99em;
+    font-weight: bold;
+    color: #5e6875;
+    text-decoration: none;
+    padding-right: 0.7rem;
+    padding-left: 0.7rem;
+    margin-top: 0.2rem;
+    font-family: "Open Sans", Helvetica, sans-serif;
+    line-height: 1.8;
+}
 
-nav li:not(.active):hover{
-	background: white;
+nav li {
+    transition: background 0.5s;
+    border-radius: 3px;
 }
-nav li:not(.active):hover a{
-	color: black !important;
+
+nav li:not(.active):hover {
+    background: white;
 }
-.active{
-	background: white;
+
+nav li:not(.active):hover a {
+    color: black !important;
 }
-.active a{
-	color: black !important;
+
+.active {
+    background: white;
 }
 
-.text-center{
-	cursor: pointer;
+.active a {
+    color: black !important;
 }
 
-@media screen and (max-width:736px) {
-	.signup-form {
-		margin: 20% auto;
-	}
+.text-center {
+    cursor: pointer;
 }
-@media screen and (max-width: 480px) {
-	.signup-form {
-		width: 300px;
-	}
-} */
 
+@media screen and (max-width: 736px) {
+    .signup-form {
+        margin: 20% auto;
+    }
+}
 
-body {
-    color: #ccc;
-    background: #222; /* Dark background color */
-    font-family: 'Roboto', sans-serif;
-    overflow-x: hidden;
+@media screen and (max-width: 480px) {
+    .signup-form {
+        width: 300px;
+    }
 }
 
-.bg-dark {
-    background-color: #333!important; /* Dark navbar background color */
+/* Dark mode styles */
+body.dark-mode {
+    font-family: Arial, sans-serif;
+    transition: background-color 0.3s ease;
+    background-color: #333333; /* Dark mode background color */
+    color: #ffffff; /* Dark mode text color */
 }
 
-.signup-form {
-    width: 390px;
-    margin: 3% auto;
-    padding: 30px 0;
-    background: #444; /* Dark form background color */
+.signup-form.dark-mode {
+    background: #444 !important; /* Dark form background color */
     border: 1px solid #333;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-	margin-bottom: 30px;
-	
+    margin-bottom: 30px;
 }
 
-.signup-form h2 {
+.signup-form.dark-mode h2 {
     color: #ddd; /* Lighter text color */
-    text-align: center;
 }
 
-.signup-form .lead {
+.signup-form.dark-mode .lead {
     color: #ccc; /* Lighter text color */
-    font-size: 14px;
-    margin-bottom: 30px;
-    text-align: center;
 }
 
-.signup-form form {
-    border-radius: 1px;
-    margin-bottom: 15px;
-    background: #555; /* Dark form background color */
-    padding: 30px;
+.signup-form.dark-mode form {
+    background-color: #555!important; /* Dark form background color */
 }
 
-.signup-form label {
+.signup-form.dark-mode label {
     color: #ccc; /* Lighter text color */
-    font-weight: normal;
-    font-size: 13px;
 }
 
-.signup-form .form-control {
+.signup-form.dark-mode .form-control {
     color: #ddd; /* Lighter text color */
-    min-height: 38px;
     border-color: #444; /* Darker border color */
 }
 
-.signup-form .input-group-addon {
+.signup-form.dark-mode .input-group-addon {
     color: #ddd; /* Lighter text color */
     border-color: #444; /* Darker border color */
 }
 
-.signup-form .btn {
+.signup-form.dark-mode .btn {
     color: #fff; /* Light text color */
     background: #19aa8d; /* Button background color */
 }
 
-.signup-form .btn:hover, .signup-form .btn:focus {
+.signup-form.dark-mode .btn:hover,
+.signup-form.dark-mode .btn:focus {
     background: #179b81; /* Darker button background color on hover/focus */
 }
 
-.signup-form a {
+.signup-form.dark-mode a {
     color: #19aa8d; /* Link color */
 }
 
-.signup-form a:hover {
+.signup-form.dark-mode a:hover {
     color: #179b81; /* Darker link color on hover */
 }
 
-.link {
+.link.dark-mode {
     color: #ccc; /* Lighter link color */
 }
 
-.link:hover {
+.link.dark-mode:hover {
     color: #ddd; /* Lighter link color on hover */
-}
-
-/* Navbar Styles */
-.navbar {
-    border-bottom: 1px solid #444; /* Darker border color */
-}
-
-.navbar-nav .nav-link {
-    color: #ccc; /* Lighter text color */
-}
-
-.navbar-nav .nav-link:hover {
-    color: #ddd; /* Lighter text color on hover */
-}
-
-.navbar-toggler {
-    border-color: #ccc; /* Lighter border color */
-}
-
-.navbar-toggler-icon {
-    background-color: #ccc; /* Lighter background color for the toggler icon */
-}
-
-/* Footer Styles */
-.footer {
-    color: #ccc; /* Lighter text color */
-    background-color: #333; /* Dark footer background color */
-}
-
-.footer p {
-    margin-bottom: 0; /* Remove bottom margin from paragraph */
-}
+}
\ No newline at end of file
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 10243698a..5714e677c 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -61,8 +61,16 @@
       </div>
   </nav>
 
+ 
+
     <div class="signup-form">
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" color="#fff" style=" border-color: #19aa8d; color: #fff;" />
+        <label class="form-check-label" for="flexSwitchCheckDefault">Switch Dark mode</label>
+      </div>
+
       <div
+        class='dark-mode'
         style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
         caMicroscope
       </div>
diff --git a/apps/signup/signup.js b/apps/signup/signup.js
index 30cd39dfc..102d5d4b2 100644
--- a/apps/signup/signup.js
+++ b/apps/signup/signup.js
@@ -116,4 +116,15 @@ $(window).on('load', function() {
 function loginPage(){
   const url = "/login.html";
   window.location.href = url;
-}
\ No newline at end of file
+}
+
+function toggleDarkMode() {
+  document.body.classList.toggle('dark-mode');
+}
+
+// Add event listener to the toggle button
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById('flexSwitchCheckDefault').addEventListener('change', function() {
+      toggleDarkMode();
+  });
+});
\ No newline at end of file

From 681c98433c66602efb80255b6d850e42f5d27074 Mon Sep 17 00:00:00 2001
From: sarahannie <sarahndianekwu@gmail.com>
Date: Fri, 29 Mar 2024 11:30:32 +0100
Subject: [PATCH 3/3] adjusted color for easy visibility

---
 apps/signup/signup.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index eaa92ce69..88374c9af 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -155,46 +155,46 @@ body.dark-mode {
     color: #ffffff; /* Dark mode text color */
 }
 
-.signup-form.dark-mode {
-    background: #444 !important; /* Dark form background color */
+body.dark-mode .signup-form {
+   
     border: 1px solid #333;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     margin-bottom: 30px;
 }
 
-.signup-form.dark-mode h2 {
+body.dark-mode .signup-form h2 {
     color: #ddd; /* Lighter text color */
 }
 
-.signup-form.dark-mode .lead {
+body.dark-mode .signup-form .lead {
     color: #ccc; /* Lighter text color */
 }
 
-.signup-form.dark-mode form {
+body.dark-mode .signup-form form {
     background-color: #555!important; /* Dark form background color */
 }
 
-.signup-form.dark-mode label {
+body.dark-mode .signup-form label {
     color: #ccc; /* Lighter text color */
 }
 
-.signup-form.dark-mode .form-control {
+body.dark-mode .signup-form .form-control {
     color: #ddd; /* Lighter text color */
     border-color: #444; /* Darker border color */
 }
 
-.signup-form.dark-mode .input-group-addon {
+body.dark-mode .signup-form .input-group-addon {
     color: #ddd; /* Lighter text color */
     border-color: #444; /* Darker border color */
 }
 
-.signup-form.dark-mode .btn {
+body.dark-mode .signup-form .btn {
     color: #fff; /* Light text color */
     background: #19aa8d; /* Button background color */
 }
 
-.signup-form.dark-mode .btn:hover,
-.signup-form.dark-mode .btn:focus {
+body.dark-mode .signup-form .btn:hover,
+body.dark-mode .signup-form .btn:focus {
     background: #179b81; /* Darker button background color on hover/focus */
 }