feat(Darkmode): add Darkmode

Merge pull request 'merge-checkout-modal-can-be-submitted-if-its-invalid' (#8 ) from checkout-modal-can-be-submitted-if-its-invalid into main
Reviewed-on: #8
2024-09-13 21:28:03 +02:00 · 2024-09-13 19:46:41 +02:00 · 2024-09-13 19:46:16 +02:00 · 2024-09-13 19:39:58 +02:00 · 2024-09-13 19:38:46 +02:00 · 2024-09-13 19:00:18 +02:00
16 changed files with 326 additions and 183 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.env
+n39env
+.vscode
--- a/createMR.py
+++ b/createMR.py
@ -0,0 +1,55 @@
+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)
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/frontend/src/App.tsx
+++ b/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 { primary } from "./colors";
+import * as colors from "./colors";
 import { ActiveModalProps } from "./shared/components/modals/types";

 export const AuthContext = createContext<{
@ -50,7 +50,6 @@ function App() {
      style={{
        height: "100vh",
        width: "100vw",
-        backgroundColor: primary,
        fontFamily: "New Amsterdam",
        overflow: "scroll",
      }}
--- a/frontend/src/darkmodeColors.ts
+++ b/frontend/src/darkmodeColors.ts
@ -0,0 +1,5 @@
+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";
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -12,49 +12,208 @@ body {
  }
 }

-#bootstrap-overrides .form-select .form-control {
-  background-color: #f2f2e8 !important;
-  border-color: #f2f2e8 !important;
+#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 {
+    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: #f2f2e8 !important;
+    color: #5e6268 !important;
+  }
+
+  table {
+    letter-spacing: 0.25em;
+  }
+
+  .bg-primary {
+    background-color: #f2f3f4 !important;
+  }
+
+  .modal-content {
+    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 {
+    background-color: #f9a9ab !important;
+  }
+
+  .page-link {
+    color: #5e6268 !important;
+    border: 2px solid #5e6268 !important;
+    background-color: transparent !important;
+  }
+
+  .active > .page-link {
+    background-color: #5e6268 !important;
+    color: #f2f3f4 !important;
+  }
+
+  .pagination {
+    margin-top: 10px !important;
+
+    li {
+      min-width: 40px;
+    }
+  }
 }

-#bootstrap-overrides .dropdown-toggle::after {
-  display: none;
-}
+@media (prefers-color-scheme: dark) {
+  #bootstrap-overrides {
+    background-color: #5e6268;
+    color: #f2f3f4;

-#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;
-}
+    .btn-primary {
+      background-color: #f2f3f4;
+      color: #5e6268;
+      border: 2px solid #5e6268;
+    }

-#bootstrap-overrides table {
-  letter-spacing: 0.25em;
-}
+    .form-control {
+      background-color: #f2f2e8 !important;
+      border-color: #5e6268 !important;
+      border-right: none;
+    }

-#bootstrap-overrides .bg-primary {
-  background-color: #f2f3f4 !important;
-}
+    .form-select .form-control {
+      background-color: #f2f2e8 !important;
+      border-color: #f2f2e8 !important;
+    }

-#bootstrap-overrides .modal-body {
-  background-color: #f2f3f4 !important;
-}
+    .dropdown-toggle::after {
+      display: none;
+    }

-#bootstrap-overrides .danger {
-  background-color: #f9a9ab !important;
-}
+    .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;
+    }

-#bootstrap-overrides .page-link {
-  color: black !important;
-  border: 2px solid black !important;
-  background-color: transparent !important;
-}
+    .table > :not(caption) > * > * {
+      background-color: #5e6268 !important;
+      color: #f2f2e8 !important;
+    }

-#bootstrap-overrides .active > .page-link {
-  background-color: black !important;
-  color: #f2f3f4 !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 {
--- a/frontend/src/pages/Library/components/Actions.tsx
+++ b/frontend/src/pages/Library/components/Actions.tsx
@ -2,7 +2,8 @@ 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 { secondary } from "../../../colors";
+import * as colors from "../../../colors";
+import * as dark from "../../../darkmodeColors";
 import { ModalContextType } from "../../../App";
 import { modalTypes } from "../../../shared/components/modals/types";
 import { useCallback } from "react";
@ -44,11 +45,7 @@ export const Actions = ({
  return (
    <>
      <Dropdown>
-        <Dropdown.Toggle
-          variant='success'
-          id='dropdown-basic'
-          style={{ backgroundColor: secondary, border: "2px solid black" }}
-        >
+        <Dropdown.Toggle variant='success' id='dropdown-basic'>
          <ImMenu size={25} color='black' />
        </Dropdown.Toggle>

@ -59,14 +56,7 @@ export const Actions = ({
              className='d-flex'
              onClick={() => setActiveModal({ type: bookModal, book, onClose })}
            >
-              <Badge
-                pill
-                className='ml-2 d-flex mr-2'
-                style={{
-                  border: "2px solid black",
-                  backgroundColor: "transparent",
-                }}
-              >
+              <Badge pill className='ml-2 d-flex mr-2'>
                <ImBook size={25} color='black' className='m-auto' />
              </Badge>
              <p className='m-auto' style={{ paddingLeft: "10px" }}>
@ -87,13 +77,7 @@ export const Actions = ({
                })
              }
            >
-              <Badge
-                pill
-                className='ml-2 d-flex mr-2'
-                style={{
-                  border: "2px solid black",
-                }}
-              >
+              <Badge pill className='ml-2 d-flex mr-2'>
                <ImBoxRemove size={25} color='black' className='m-auto' />
              </Badge>{" "}
              <p className='m-auto' style={{ paddingLeft: "10px" }}>
@ -130,13 +114,7 @@ export const Actions = ({
                setActiveModal({ type: del, uuid: book.uuid, onClose })
              }
            >
-              <Badge
-                pill
-                className='ml-2 d-flex danger mr-2'
-                style={{
-                  border: "2px solid black",
-                }}
-              >
+              <Badge pill className='ml-2 d-flex danger mr-2'>
                <ImBin size={25} color='black' className='m-auto' />
              </Badge>{" "}
              <p className='m-auto' style={{ paddingLeft: "10px" }}>
--- a/frontend/src/pages/Main/Main.tsx
+++ b/frontend/src/pages/Main/Main.tsx
@ -13,7 +13,6 @@ 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";
@ -95,16 +94,12 @@ 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}
@ -135,9 +130,6 @@ export const Main = (): React.JSX.Element => {
          <Button
            style={{
              borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
              marginLeft: "auto",
              marginRight: "10px",
            }}
@ -151,9 +143,6 @@ export const Main = (): React.JSX.Element => {
          <Button
            style={{
              borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
              marginLeft: "auto",
              marginRight: "10px",
            }}
@ -174,9 +163,6 @@ export const Main = (): React.JSX.Element => {
          <Button
            style={{
              borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
            }}
          >
            <ImBooks /> Browse library{" "}
@ -186,9 +172,6 @@ export const Main = (): React.JSX.Element => {
          <Button
            style={{
              borderRadius: "5px",
-              backgroundColor: secondary,
-              color: "black",
-              border: "2px solid black",
              marginRight: "auto",
              marginLeft: "10px",
            }}
--- a/frontend/src/shared/components/modals/AuthenticationModal.tsx
+++ b/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",
              }}
--- a/frontend/src/shared/components/modals/BookModal.tsx
+++ b/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">;
@ -29,7 +28,20 @@ export const BookModal = ({
  }, [book, reset]);

  const { scannerError, setScannerRef } = useScanner({
-    onDetected: (result) => {
+    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);
+      }
      setValue("isbn", result);
      setShowScanner(false);
    },
@ -38,6 +50,7 @@ export const BookModal = ({
  const values = useWatch({ control });

  const [submitError, setSubmitError] = useState<string | undefined>();
+
  const onSubmit = useCallback(
    async (data: Partial<BookForm>) => {
      setSubmitError(undefined);
@ -80,38 +93,31 @@ 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`}
-        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}
@ -122,11 +128,8 @@ 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)}
                  >
@ -135,7 +138,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"
@ -143,8 +146,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>
@ -153,15 +156,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>
@ -187,15 +190,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>
@ -205,27 +208,24 @@ 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,15 +238,14 @@ 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>
@ -258,7 +257,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>
        )}
--- a/frontend/src/shared/components/modals/CheckoutModal.tsx
+++ b/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";
@ -30,6 +30,9 @@ export const CheckoutBookModal = ({

  const onSubmit = useCallback(
    async (data: Partial<BookCheckoutForm>) => {
+      if (!formState.isValid) {
+        return;
+      }
      if (!data.checkoutBy) {
        setError("checkoutBy", {
          message: `please enter ${
@ -61,16 +64,11 @@ export const CheckoutBookModal = ({
        setFailed(await res.text());
      }
    },
-    [uuid, onClose, setError, isChechout]
+    [formState.isValid, isChechout, uuid, setError, onClose]
  );

  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}'`}
@ -84,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'>
@ -116,6 +112,12 @@ 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}
@ -178,12 +180,10 @@ 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`}
--- a/frontend/src/shared/components/modals/DeleteBookModal.tsx
+++ b/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",
            }}
--- a/frontend/src/shared/components/modals/ModalHeader.tsx
+++ b/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",
          }}
--- a/frontend/src/shared/components/modals/ScannerModal.tsx
+++ b/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>
--- a/1
+++ b/1
--- a/middleware/.gitignore
+++ b/middleware/.gitignore
@ -0,0 +1,2 @@
+dist
+node_modules
Author	SHA1	Message	Date
0ry5	2016a8619d	feat(Darkmode): add Darkmode	2024-09-13 21:28:03 +02:00
0Ry5	04d9b86419	Merge pull request 'merge-checkout-modal-can-be-submitted-if-its-invalid' (#8 ) from checkout-modal-can-be-submitted-if-its-invalid into main Reviewed-on: #8	2024-09-13 19:46:41 +02:00
0ry5	6940fab53a	fix(CheckoutModal): no submit if invalid form	2024-09-13 19:46:16 +02:00
0Ry5	6d0a62ec21	Merge pull request 'merge-try-google-books-api-for-book-identification-by-isbn' (#7 ) from try-google-books-api-for-book-identification-by-isbn into main Reviewed-on: #7	2024-09-13 19:39:58 +02:00
0ry5	f35c4c473d	feat(GoogleApi): add google api to BookModal	2024-09-13 19:38:46 +02:00
0ry5	af569cbde6	remove shell script	2024-09-13 19:00:18 +02:00
0ry5	dfb8ffb94b	test	2024-09-13 18:53:35 +02:00