Merge branch 'main' of https://github.com/DHBWLoerrach/TIF22A_AnwProjekt_B

anwendung/src/components/Button.jsx

@@ -17,6 +17,8 @@ export default function Button(p) {
     let iconHTML = p.icon;
     let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
     let onClick = p.onClick;
+    let color = p.color;
+    let fontColor = p.fontColor;
 
     //if parameters are not set, they are set to default values
     if (height == null) height = 50;
@@ -24,6 +26,8 @@ export default function Button(p) {
     if (iconWidth == null) iconWidth = width-10;
     if (iconHeight == null) iconHeight = height-10;
     if (onClick == null) onClick = () => {};
+    if (color == null) color = "#363636";
+    if (fontColor == null) fontColor = "white";
 
     //build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
     if (iconHTML != null) {
@@ -38,13 +42,13 @@ export default function Button(p) {
     //return the button
     return (
         <>
-            <button className={"round-border button font font-middle"}
+            <button className={"round-border button font font-small"}
                     style={{
-                        width: width,
-                        height: height,
                         display: "flex",
                         alignItems: "center",
-                        justifyContent: "center"
+                        justifyContent: "center",
+                        backgroundColor: color,
+                        color: fontColor
                     }}
                     onClick={onClick}>
                 {text}

anwendung/src/components/PopUp.jsx

@@ -0,0 +1,48 @@
+import Button from "@/components/Button";
+import {useState} from "react";
+
+let shown = false;
+
+export default function PopUp() {
+    const [displayState, setDisplayState] = useState("none");
+
+    function toggleModal() {
+        shown = !shown;
+        if (shown)
+        {
+            setDisplayState("block");
+        }
+        else
+        {
+            setDisplayState("none");
+        }
+        console.log("test");
+    }
+
+    function on_abgeben_pressed()
+    {
+
+    }
+
+    return (
+        <>
+            <Button text={"Abgeben"} onClick={toggleModal}/>
+
+            <div style={{
+                display: displayState
+            }}>
+
+                <div className={"modal-container"}>
+                    <div className={"modal"}>
+                        <p className={"font-middle"}>Kalender wirklich abgeben?</p>
+                        <div>
+                            <Button text={"Abbrechen"} color={"#363636"}  onClick={toggleModal}/>
+                            <Button text={"Abgeben"} color={"#7a7a7a"}  onClick={on_abgeben_pressed}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

anwendung/src/pages/index.js

@@ -4,14 +4,21 @@ import StatusBar from "@/components/StatusBar";
 import Button from "@/components/Button";
 import {arrowLeft, arrowRight} from "@/components/Icons";
 import WeekSelector from "@/components/WeekSelector";
+import PopUp from "@/components/PopUp";
+
 
 const inter = Inter({subsets: ['latin']})
 
 export default function Home(p) {
 
-    const [pr, setPr] = useState(0)
+
 
     return (
+
+        <>
             <WeekSelector />
+            <PopUp/>
+        </>
+
     )
 }

anwendung/src/styles/globals.css

@@ -8,13 +8,6 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
 
 body {
   color: rgb(var(--foreground-rgb));
@@ -34,28 +27,30 @@ Button
  */
 .round-border
 {
-  border-radius: 10px;
+  border-radius: 5px;
   border-width: 0;
 }
 
 .font-small
 {
-  font-size: 15px;
+  font-size: 10px;
 }
 
 .font-middle
 {
-  font-size: 20px ;
+  font-size: 12px ;
 }
 
 .font-big
 {
-  font-size: 30px;
+  font-size: 16px;
 }
 
 .button
 {
-  background-color: #0d52ce;
+  background-color: #363636;
+  padding: 5px;
+  color: white;
 }
 
 .button:hover
@@ -125,6 +120,7 @@ Step Progress Bar
   z-index: -1;
 }
 
+
 .dateElement{
   display: flex;
   margin-left: 20px;
@@ -139,3 +135,49 @@ Step Progress Bar
 .weekSelector {
   display: flex;
 }
+
+/*
+Popup
+ */
+
+.modal-container
+{
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal
+{
+  width: 300px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+}
+
+.modal p
+{
+  text-align: center;
+}
+
+.modal div
+{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: end;
+  gap: 5px;
+}