.gitignore

@@ -1,3 +0,0 @@
-.env
-n39env
-.vscode

createMR.py

@@ -1,55 +0,0 @@
-import os
-import json
-import argparse
-from git import Repo
-from pyforgejo import AuthenticatedClient
-from dotenv import load_dotenv
-from pyforgejo.api.issue import issue_list_issues
-from pyforgejo.api.repository import repo_create_branch, repo_create_pull_request
-from pyforgejo.models import CreateBranchRepoOption, CreatePullRequestOption
-
-load_dotenv()
-
-parser = argparse.ArgumentParser(description="")
-parser.add_argument("-i", "--issue")
-args = parser.parse_args()
-
-FORJEGO_ACCESS_TOKEN = os.getenv("FORJEGO_ACCESS_TOKEN")
-OWNER = os.getenv("OWNER")
-USER = os.getenv("USER")
-REPO = os.getenv("REPO")
-
-client = AuthenticatedClient(
-    base_url="https://git.n39.eu/api/v1/", token=FORJEGO_ACCESS_TOKEN
-)
-
-issues = json.loads(issue_list_issues.sync_detailed(OWNER, REPO, client=client).content)
-
-
-def filterIssues(issue):
-    return args.issue in issue["title"]
-
-
-issues = list(filter(filterIssues, issues))
-
-branchName = issues[0]["title"].replace(" ", "-")
-
-if len(issues) > 1:
-    raise ValueError("found more than one ticket")
-if len(issues) == 0:
-    raise ValueError("found more than one ticket")
-else:
-    repo_create_branch.sync_detailed(
-        OWNER, REPO, body=CreateBranchRepoOption(branchName, "main"), client=client
-    )
-    res = json.loads(
-        repo_create_pull_request.sync_detailed(
-            OWNER,
-            REPO,
-            body=CreatePullRequestOption(
-                base="main", head=branchName, title="merge-" + branchName
-            ),
-            client=client,
-        ).content
-    )
-    print(res)

frontend/.gitignore

@@ -1 +0,0 @@
-node_modules

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import "./App.css";
 import { Main } from "./pages";
 import { Library } from "./pages/Library";
 import { Book } from "./pages/Book";
-import * as colors from "./colors";
+import { primary } from "./colors";
 import { ActiveModalProps } from "./shared/components/modals/types";
 
 export const AuthContext = createContext<{
@@ -50,6 +50,7 @@ function App() {
       style={{
         height: "100vh",
         width: "100vw",
+        backgroundColor: primary,
         fontFamily: "New Amsterdam",
         overflow: "scroll",
       }}

frontend/src/darkmodeColors.ts

@@ -1,5 +0,0 @@
-export const primary = "#5e6268";
-export const primaryRGBA = "rgba(83,86,91, 0.8)";
-export const secondary = "#5f5e68";
-export const tertiary = "#5e6768";
-export const danger = "#685e62";

frontend/src/index.css

@@ -12,210 +12,51 @@ body {
   }
 }
 
-#bootstrap-overrides {
-  background-color: #f2f3f4;
-  color: #5e6268;
-
-  .btn-primary {
-    background-color: #5e6268;
-    color: #f2f3f4;
-    border: 2px solid #5e6268;
-  }
-
-  form-control {
-    background-color: #f2f2e8 !important;
-    border-color: #5e6268 !important;
-  }
-
-  .form-select .form-control {
+#bootstrap-overrides .form-select .form-control {
   background-color: #f2f2e8 !important;
   border-color: #f2f2e8 !important;
 }
 
-  .dropdown-toggle::after {
+#bootstrap-overrides .dropdown-toggle::after {
   display: none;
 }
 
-  .form-label {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-      "Helvetica Neue", sans-serif !important;
+#bootstrap-overrides .form-label {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   letter-spacing: normal;
 }
 
-  .table > :not(caption) > * > * {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-  }
-
-  table {
+#bootstrap-overrides table {
   letter-spacing: 0.25em;
 }
 
-  .bg-primary {
+#bootstrap-overrides .bg-primary {
   background-color: #f2f3f4 !important;
 }
 
-  .modal-content {
+#bootstrap-overrides .modal-body {
   background-color: #f2f3f4 !important;
-    border-radius: 10px;
 }
 
-  .modal-body {
-    background-color: #f2f3f4 !important;
-    border-radius: 0px 0px 10px 10px;
-  }
-
-  .modal-header {
-    background-color: #f2f3f4 !important;
-    border-radius: 10px 10px 0px 0px;
-    border-bottom: none;
-  }
-
-  .dropdown button {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-    border: 2px solid #5e6268;
-  }
-
-  .dropdown-menu {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-    border: 2px solid #f2f2e8;
-  }
-
-  .danger {
+#bootstrap-overrides .danger {
   background-color: #f9a9ab !important;
 }
 
-  .page-link {
-    color: #5e6268 !important;
-    border: 2px solid #5e6268 !important;
+#bootstrap-overrides .page-link {
+  color: black !important;
+  border: 2px solid black !important;
   background-color: transparent !important;
 }
 
-  .active > .page-link {
-    background-color: #5e6268 !important;
+#bootstrap-overrides .active > .page-link {
+  background-color: black !important;
   color: #f2f3f4 !important;
 }
 
-  .pagination {
-    margin-top: 10px !important;
-
-    li {
-      min-width: 40px;
-    }
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  #bootstrap-overrides {
-    background-color: #5e6268;
-    color: #f2f3f4;
-
-    .btn-primary {
-      background-color: #f2f3f4;
-      color: #5e6268;
-      border: 2px solid #5e6268;
-    }
-
-    .form-control {
-      background-color: #f2f2e8 !important;
-      border-color: #5e6268 !important;
-      border-right: none;
-    }
-
-    .form-select .form-control {
-      background-color: #f2f2e8 !important;
-      border-color: #f2f2e8 !important;
-    }
-
-    .dropdown-toggle::after {
-      display: none;
-    }
-
-    .form-label {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-        "Helvetica Neue", sans-serif !important;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      letter-spacing: normal;
-    }
-
-    .table > :not(caption) > * > * {
-      background-color: #5e6268 !important;
-      color: #f2f2e8 !important;
-    }
-
-    table {
-      letter-spacing: 0.25em;
-    }
-
-    .bg-primary {
-      background-color: #5e6268 !important;
-    }
-
-    .dropdown button {
-      background-color: #f2f2e8 !important;
-      color: #5e6268 !important;
-    }
-
-    .dropdown-menu {
-      background-color: #5e6268 !important;
-      border: 2px solid #5e6268;
-    }
-
-    .dropdown-item {
-      color: #f2f2e8 !important;
-      svg {
-        color: #f2f2e8 !important;
-      }
-    }
-    .dropdown-item:hover {
-      color: #5e6268 !important;
-      background-color: #f2f2e8 !important;
-    }
-
-    .modal-content {
-      background-color: #5e6268 !important;
-      border-radius: 10px;
-    }
-
-    .modal-body {
-      background-color: #5e6268 !important;
-      border-radius: 0px 0px 10px 10px;
-    }
-
-    .modal-header {
-      background-color: #5e6268 !important;
-      border-radius: 10px 10px 0px 0px;
-      border-bottom: none;
-    }
-
-    .danger {
-      background-color: #c94414 !important;
-    }
-
-    .page-link {
-      color: #f2f3f4 !important;
-      border: 2px solid #f2f3f4 !important;
-      background-color: transparent !important;
-    }
-
-    .active > .page-link {
-      background-color: #f2f3f4 !important;
-      color: #5e6268 !important;
-    }
-
-    .pagination {
-      margin-top: 10px !important;
-    }
-  }
-}
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;

frontend/src/pages/Library/components/Actions.tsx

@@ -2,8 +2,7 @@ import { Badge, Dropdown } from "react-bootstrap";
 import { Book } from "../../../types/Book";
 import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
 import { useMutation } from "@tanstack/react-query";
-import * as colors from "../../../colors";
-import * as dark from "../../../darkmodeColors";
+import { secondary } from "../../../colors";
 import { ModalContextType } from "../../../App";
 import { modalTypes } from "../../../shared/components/modals/types";
 import { useCallback } from "react";
@@ -45,7 +44,11 @@ export const Actions = ({
   return (
     <>
       <Dropdown>
-        <Dropdown.Toggle variant='success' id='dropdown-basic'>
+        <Dropdown.Toggle
+          variant='success'
+          id='dropdown-basic'
+          style={{ backgroundColor: secondary, border: "2px solid black" }}
+        >
           <ImMenu size={25} color='black' />
         </Dropdown.Toggle>
 
@@ -56,7 +59,14 @@ export const Actions = ({
               className='d-flex'
               onClick={() => setActiveModal({ type: bookModal, book, onClose })}
             >
-              <Badge pill className='ml-2 d-flex mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex mr-2'
+                style={{
+                  border: "2px solid black",
+                  backgroundColor: "transparent",
+                }}
+              >
                 <ImBook size={25} color='black' className='m-auto' />
               </Badge>
               <p className='m-auto' style={{ paddingLeft: "10px" }}>
@@ -77,7 +87,13 @@ export const Actions = ({
                 })
               }
             >
-              <Badge pill className='ml-2 d-flex mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex mr-2'
+                style={{
+                  border: "2px solid black",
+                }}
+              >
                 <ImBoxRemove size={25} color='black' className='m-auto' />
               </Badge>{" "}
               <p className='m-auto' style={{ paddingLeft: "10px" }}>
@@ -114,7 +130,13 @@ export const Actions = ({
                 setActiveModal({ type: del, uuid: book.uuid, onClose })
               }
             >
-              <Badge pill className='ml-2 d-flex danger mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex danger mr-2'
+                style={{
+                  border: "2px solid black",
+                }}
+              >
                 <ImBin size={25} color='black' className='m-auto' />
               </Badge>{" "}
               <p className='m-auto' style={{ paddingLeft: "10px" }}>

frontend/src/pages/Main/Main.tsx

@@ -13,6 +13,7 @@ import { TfiKey } from "react-icons/tfi";
 
 import { Link, useNavigate } from "react-router-dom";
 import { Book } from "../../types/Book";
+import { secondary } from "../../colors";
 import { useAuth } from "../../shared/utils/useAuthentication";
 import { ModalContext } from "../../App";
 import { modalTypes } from "../../shared/components/modals/types";
@@ -94,12 +95,16 @@ export const Main = (): React.JSX.Element => {
             onChange={(ev) => setTitle(ev.target.value)}
             style={{
               borderRadius: "20px 0px 0px 20px",
+              border: "2px solid black",
               borderRight: "none",
             }}
           />
           <Button
             style={{
               borderRadius: "0px 5px 5px 0px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
             }}
             className='mr-2'
             disabled={activeModal?.type === scanner || isFetching}
@@ -130,6 +135,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -143,6 +151,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -163,6 +174,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
             }}
           >
             <ImBooks /> Browse library{" "}
@@ -172,6 +186,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginRight: "auto",
               marginLeft: "10px",
             }}

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

@@ -2,6 +2,7 @@ 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";
@@ -70,7 +71,12 @@ export const AuthenticationModal = ({
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={isUpdate ? "Set new Admin key" : "Admin Login"}
@@ -78,7 +84,9 @@ export const AuthenticationModal = ({
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         <Form
@@ -133,6 +141,9 @@ 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", {
@@ -155,6 +166,9 @@ 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,6 +5,7 @@ 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">;
@@ -28,20 +29,7 @@ export const BookModal = ({
   }, [book, reset]);
 
   const { scannerError, setScannerRef } = useScanner({
-    onDetected: async (result) => {
-      const googleBooks = await (
-        await fetch(
-          "https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
-        )
-      ).json();
-      if ("items" in googleBooks) {
-        console.log(googleBooks);
-        setValue(
-          "published",
-          googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
-        );
-        setValue("title", googleBooks.items[0].volumeInfo.title);
-      }
+    onDetected: (result) => {
       setValue("isbn", result);
       setShowScanner(false);
     },
@@ -50,7 +38,6 @@ export const BookModal = ({
   const values = useWatch({ control });
 
   const [submitError, setSubmitError] = useState<string | undefined>();
-
   const onSubmit = useCallback(
     async (data: Partial<BookForm>) => {
       setSubmitError(undefined);
@@ -93,31 +80,38 @@ export const BookModal = ({
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={`${!!book ? "Edit" : "Add new"} Book`}
-        icon={<ImBook size={50} className='ml-0 mr-auto' />}
+        icon={<ImBook size={50} className="ml-0 mr-auto" />}
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         {!showScanner && (
           <Form
-            className='mb-2'
+            className="mb-2"
             onSubmit={(ev) => {
               ev.preventDefault();
               onSubmit(values);
             }}
           >
-            <Form.Group as={Row} className='mb-2'>
-              <Col sm='2'>
+            <Form.Group as={Row} className="mb-2">
+              <Col sm="2">
                 <Form.Label>ISBN</Form.Label>
               </Col>
-              <Col className='d-flex flex-column'>
-                <div className='d-flex'>
+              <Col className="d-flex flex-column">
+                <div className="d-flex">
                   <Form.Control
                     {...register("isbn", { required: true, maxLength: 360 })}
                     isInvalid={!!formState.errors.isbn}
@@ -128,8 +122,11 @@ export const BookModal = ({
                   <Button
                     style={{
                       borderRadius: "0px 5px 5px 0px",
+                      backgroundColor: secondary,
+                      color: "black",
+                      border: "2px solid black",
                     }}
-                    className='mr-2 pt-0'
+                    className="mr-2 pt-0"
                     disabled={showScanner}
                     onClick={() => setShowScanner(true)}
                   >
@@ -138,7 +135,7 @@ export const BookModal = ({
                 </div>
                 <Form.Control.Feedback
                   style={{ display: !formState.errors.isbn ? "none" : "block" }}
-                  type='invalid'
+                  type="invalid"
                 >
                   {!formState.errors.isbn
                     ? "ISBN is required"
@@ -146,8 +143,8 @@ export const BookModal = ({
                 </Form.Control.Feedback>
               </Col>
             </Form.Group>
-            <Form.Group as={Row} className='mb-2'>
-              <Col sm='2'>
+            <Form.Group as={Row} className="mb-2">
+              <Col sm="2">
                 <Form.Label>Title</Form.Label>
               </Col>
               <Col>
@@ -156,15 +153,15 @@ export const BookModal = ({
                   isInvalid={!!formState.errors.title}
                 />
 
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {!values.title
                     ? "Title is required"
                     : formState.errors.title?.message}
                 </Form.Control.Feedback>
               </Col>
             </Form.Group>
-            <Form.Group as={Row} className='mb-2'>
-              <Col sm='2'>
+            <Form.Group as={Row} className="mb-2">
+              <Col sm="2">
                 <Form.Label>Year published</Form.Label>
               </Col>
               <Col>
@@ -190,15 +187,15 @@ export const BookModal = ({
                   isInvalid={!!formState.errors.published}
                 />
 
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {!values.published
                     ? "Year published is required"
                     : formState.errors.published?.message}
                 </Form.Control.Feedback>
               </Col>
             </Form.Group>
-            <Form.Group as={Row} className='mb-2'>
-              <Col sm='2'>
+            <Form.Group as={Row} className="mb-2">
+              <Col sm="2">
                 <Form.Label>Shelf</Form.Label>
               </Col>
               <Col>
@@ -208,24 +205,27 @@ export const BookModal = ({
                 >
                   {Object.keys(bookShelfs).map((key) => (
                     <option
-                      key='key'
+                      key="key"
                       value={bookShelfs[key as keyof typeof bookShelfs]}
                     >
                       {key}
                     </option>
                   ))}
                 </Form.Select>
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {!values.shelf
                     ? "Shelf is required"
                     : formState.errors.shelf?.message}
                 </Form.Control.Feedback>
               </Col>
             </Form.Group>
-            <div className='d-flex mx-auto mb-auto mt-2 w-100'>
+            <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",
                 }}
@@ -238,14 +238,15 @@ export const BookModal = ({
         )}
         {showScanner && (
           <div
-            className='w-100 overflow-hidden'
+            className="w-100 overflow-hidden"
             ref={(ref) => setScannerRef(ref)}
             style={{ position: "relative", height: "25vh" }}
           >
             <canvas
-              className='drawingBuffer w-100 position-absolute'
+              className="drawingBuffer w-100 position-absolute"
               style={{
                 height: "100%",
+                border: "2px solid black",
               }}
             />
           </div>
@@ -257,7 +258,7 @@ export const BookModal = ({
           </p>
         ) : null}
         {!!submitError && (
-          <Form.Control.Feedback style={{ display: "block" }} type='invalid'>
+          <Form.Control.Feedback style={{ display: "block" }} type="invalid">
             {submitError}
           </Form.Control.Feedback>
         )}

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, secondary } from "../../../colors";
+import { primary, primaryRGBA, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { CheckoutBookModalProps } from "./types";
 import { AiOutlineExclamationCircle } from "react-icons/ai";
@@ -30,9 +30,6 @@ export const CheckoutBookModal = ({
 
   const onSubmit = useCallback(
     async (data: Partial<BookCheckoutForm>) => {
-      if (!formState.isValid) {
-        return;
-      }
       if (!data.checkoutBy) {
         setError("checkoutBy", {
           message: `please enter ${
@@ -64,11 +61,16 @@ export const CheckoutBookModal = ({
         setFailed(await res.text());
       }
     },
-    [formState.isValid, isChechout, uuid, setError, onClose]
+    [uuid, onClose, setError, isChechout]
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={`${isChechout ? "Checkout" : "Return"} book '${title}'`}
@@ -82,7 +84,9 @@ export const CheckoutBookModal = ({
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         <Alert className='w-80 m-auto my-4' variant='warning'>
@@ -112,12 +116,6 @@ export const CheckoutBookModal = ({
                         "'null' is not a valid nickname"
                       );
                     },
-                    notUndefinedString: (value) => {
-                      return (
-                        value?.toLocaleLowerCase() !== "undefined" ||
-                        "'undefined' is not a valid nickname"
-                      );
-                    },
                   },
                 })}
                 isInvalid={!!formState.errors.checkoutBy}
@@ -180,10 +178,12 @@ export const CheckoutBookModal = ({
             <Button
               style={{
                 borderRadius: "5px",
+                backgroundColor: secondary,
+                color: "black",
+                border: "2px solid black",
                 marginLeft: "auto",
                 marginRight: "10px",
               }}
-              disabled={!formState.isValid}
               onClick={() => onSubmit(values)}
             >
               {`${isChechout ? "Checkout" : "Return"} book`}

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

@@ -1,5 +1,5 @@
 import { Button, Modal } from "react-bootstrap";
-import { primary, secondary } from "../../../colors";
+import { primary, primaryRGBA, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { ImBin } from "react-icons/im";
 import { useMutation } from "@tanstack/react-query";
@@ -24,7 +24,12 @@ export const DeleteBookModal = ({
   });
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={"Move to Shelf"}
@@ -32,13 +37,18 @@ 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",
             }}
@@ -49,6 +59,9 @@ 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,7 +13,13 @@ export const ModalHeader = ({
   icon?: JSX.Element;
 }): React.JSX.Element => {
   return (
-    <Modal.Header>
+    <Modal.Header
+      style={{
+        border: "2px solid black",
+        borderBottom: "none",
+        backgroundColor: primary,
+      }}
+    >
       <Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
         {typeof title === "string" ? (
           <>
@@ -28,6 +34,9 @@ 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,6 +1,7 @@
-import React, { useContext } from "react";
+import React 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";
 
@@ -16,13 +17,18 @@ export const ScannerModal = ({
   const { scannerError, setScannerRef } = useScanner({ onDetected });
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={"Scan barcode"}
         icon={<ImCamera size={50} className='ml-0 mr-auto' />}
       />
-      <Modal.Body>
+      <Modal.Body style={{ border: "2px solid black", borderTop: "none" }}>
         <div
           className='w-100 overflow-hidden'
           ref={(ref) => setScannerRef(ref)}
@@ -35,7 +41,7 @@ export const ScannerModal = ({
             className='drawingBuffer w-100 position-absolute'
             style={{
               height: "100%",
-              border: `2px solid black`,
+              border: "2px solid black",
             }}
           />
         </div>

middleware/.gitignore

@@ -1,2 +0,0 @@
-dist
-node_modules