feat(Darkmode): add Darkmode

frontend/src/shared/components/modals/AuthenticationModal.tsx

@@ -2,7 +2,6 @@ import { useCallback, useContext } from "react";
 import { Button, Col, Form, Modal, Row } from "react-bootstrap";
 import { useForm, useWatch } from "react-hook-form";
 import { TfiKey } from "react-icons/tfi";
-import { primaryRGBA, primary, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { AuthContext } from "../../../App";
 import { AuthModalProps } from "./types";
@@ -71,12 +70,7 @@ export const AuthenticationModal = ({
   );
 
   return (
-    <Modal
-      show={open}
-      onHide={onClose}
-      style={{ backgroundColor: primaryRGBA }}
-      centered
-    >
+    <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
         title={isUpdate ? "Set new Admin key" : "Admin Login"}
@@ -84,9 +78,7 @@ export const AuthenticationModal = ({
       />
       <Modal.Body
         style={{
-          border: "2px solid black",
           borderTop: "none",
-          backgroundColor: primary,
         }}
       >
         <Form
@@ -141,9 +133,6 @@ export const AuthenticationModal = ({
 
           {!isUpdate && (
             <Form.Group as={Row} className='mb-2'>
-              <Col sm='4'>
-                <Form.Label>Password</Form.Label>
-              </Col>
               <Col>
                 <Form.Control
                   {...register("password", {
@@ -166,9 +155,6 @@ export const AuthenticationModal = ({
             <Button
               style={{
                 borderRadius: "5px",
-                backgroundColor: secondary,
-                color: "black",
-                border: "2px solid black",
                 marginLeft: "auto",
                 marginRight: "10px",
               }}

frontend/src/shared/components/modals/BookModal.tsx

@@ -5,7 +5,6 @@ import { ModalHeader } from "./ModalHeader";
 import { useForm, useWatch } from "react-hook-form";
 import { Book, bookShelfs } from "../../../types/Book";
 import { useScanner } from "../../utils/useScanner";
-import { primary, primaryRGBA, secondary } from "../../../colors";
 import { BookModalProps } from "./types";
 
 type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
@@ -94,12 +93,7 @@ export const BookModal = ({
   );
 
   return (
-    <Modal
-      show={open}
-      onHide={onClose}
-      style={{ backgroundColor: primaryRGBA }}
-      centered
-    >
+    <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
         title={`${!!book ? "Edit" : "Add new"} Book`}
@@ -107,9 +101,7 @@ export const BookModal = ({
       />
       <Modal.Body
         style={{
-          border: "2px solid black",
           borderTop: "none",
-          backgroundColor: primary,
         }}
       >
         {!showScanner && (
@@ -136,9 +128,6 @@ export const BookModal = ({
                   <Button
                     style={{
                       borderRadius: "0px 5px 5px 0px",
-                      backgroundColor: secondary,
-                      color: "black",
-                      border: "2px solid black",
                     }}
                     className='mr-2 pt-0'
                     disabled={showScanner}
@@ -237,9 +226,6 @@ export const BookModal = ({
               <Button
                 style={{
                   borderRadius: "5px",
-                  backgroundColor: secondary,
-                  color: "black",
-                  border: "2px solid black",
                   marginLeft: "auto",
                   marginRight: "10px",
                 }}
@@ -260,7 +246,6 @@ export const BookModal = ({
               className='drawingBuffer w-100 position-absolute'
               style={{
                 height: "100%",
-                border: "2px solid black",
               }}
             />
           </div>

frontend/src/shared/components/modals/CheckoutModal.tsx

@@ -3,7 +3,7 @@ import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
 import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
 import { useForm, useWatch } from "react-hook-form";
 import { Book } from "../../../types/Book";
-import { primary, primaryRGBA, secondary } from "../../../colors";
+import { primary, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { CheckoutBookModalProps } from "./types";
 import { AiOutlineExclamationCircle } from "react-icons/ai";
@@ -68,12 +68,7 @@ export const CheckoutBookModal = ({
   );
 
   return (
-    <Modal
-      show={open}
-      onHide={onClose}
-      style={{ backgroundColor: primaryRGBA }}
-      centered
-    >
+    <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
         title={`${isChechout ? "Checkout" : "Return"} book '${title}'`}
@@ -87,9 +82,7 @@ export const CheckoutBookModal = ({
       />
       <Modal.Body
         style={{
-          border: "2px solid black",
           borderTop: "none",
-          backgroundColor: primary,
         }}
       >
         <Alert className='w-80 m-auto my-4' variant='warning'>
@@ -187,9 +180,6 @@ export const CheckoutBookModal = ({
             <Button
               style={{
                 borderRadius: "5px",
-                backgroundColor: secondary,
-                color: "black",
-                border: "2px solid black",
                 marginLeft: "auto",
                 marginRight: "10px",
               }}

frontend/src/shared/components/modals/DeleteBookModal.tsx

@@ -1,5 +1,5 @@
 import { Button, Modal } from "react-bootstrap";
-import { primary, primaryRGBA, secondary } from "../../../colors";
+import { primary, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { ImBin } from "react-icons/im";
 import { useMutation } from "@tanstack/react-query";
@@ -24,12 +24,7 @@ export const DeleteBookModal = ({
   });
 
   return (
-    <Modal
-      show={open}
-      onHide={onClose}
-      style={{ backgroundColor: primaryRGBA }}
-      centered
-    >
+    <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
         title={"Move to Shelf"}
@@ -37,18 +32,13 @@ export const DeleteBookModal = ({
       />
       <Modal.Body
         style={{
-          border: "2px solid black",
           borderTop: "none",
-          backgroundColor: primary,
         }}
       >
         <div className='d-flex mx-auto mb-auto mt-2 w-100'>
           <Button
             style={{
               borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -59,9 +49,6 @@ export const DeleteBookModal = ({
           <Button
             style={{
               borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}

frontend/src/shared/components/modals/ModalHeader.tsx

@@ -13,13 +13,7 @@ export const ModalHeader = ({
   icon?: JSX.Element;
 }): React.JSX.Element => {
   return (
-    <Modal.Header
-      style={{
-        border: "2px solid black",
-        borderBottom: "none",
-        backgroundColor: primary,
-      }}
-    >
+    <Modal.Header>
       <Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
         {typeof title === "string" ? (
           <>
@@ -34,9 +28,6 @@ export const ModalHeader = ({
         <Button
           className='ml-auto mr-0'
           style={{
-            backgroundColor: secondary,
-            color: "black",
-            border: "2px solid black",
             width: "fit-content",
             height: "fit-content",
           }}

frontend/src/shared/components/modals/ScannerModal.tsx

@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Modal } from "react-bootstrap";
 import { ImCamera } from "react-icons/im";
-import { primaryRGBA } from "../../../colors";
 import { useScanner } from "../../utils/useScanner";
 import { ModalHeader } from "./ModalHeader";
 
@@ -17,18 +16,13 @@ export const ScannerModal = ({
   const { scannerError, setScannerRef } = useScanner({ onDetected });
 
   return (
-    <Modal
-      show={open}
-      onHide={onClose}
-      style={{ backgroundColor: primaryRGBA }}
-      centered
-    >
+    <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
         title={"Scan barcode"}
         icon={<ImCamera size={50} className='ml-0 mr-auto' />}
       />
-      <Modal.Body style={{ border: "2px solid black", borderTop: "none" }}>
+      <Modal.Body>
         <div
           className='w-100 overflow-hidden'
           ref={(ref) => setScannerRef(ref)}
@@ -41,7 +35,7 @@ export const ScannerModal = ({
             className='drawingBuffer w-100 position-absolute'
             style={{
               height: "100%",
-              border: "2px solid black",
+              border: `2px solid black`,
             }}
           />
         </div>