Popup Animated

anwendung/src/components/PopUp.jsx

@@ -13,11 +13,11 @@ export default function PopUp(p) {
             }}>
 
                 <div className={"modal-container"}>
-                    <div className={"modal"}>
+                    <div className={"modal box-shadow"}>
                         <p className={"font-middle"}>{p.hint}</p>
                         <div>
-                            <Button text={p.text1} color={"#363636"}  onClick={p.function1}/>
-                            <Button text={p.text2} color={"#7a7a7a"}  onClick={p.function2}/>
+                            <Button text={p.text1} color={"rgba(54,54,54,0.64)"} onClick={p.function1}/>
+                            <Button text={p.text2} color={"#77932b"} onClick={p.function2}/>
                         </div>
                     </div>
                 </div>

anwendung/src/styles/globals.css

@@ -56,6 +56,11 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
+.box-shadow-heavy
+{
+    box-shadow: 0 0 10px rgba(0, 0, 0,1);
+}
+
 /*
 Button
  */
@@ -188,23 +193,42 @@ Popup
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .modal {
+    height: 180px;
     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;
+    padding: 20px;
+    animation-name: modalgrow;
+    animation-duration: 0.2s;
+    animation-play-state: running;
+}
+
+@keyframes modalgrow {
+    from
+    {
+        height: 90px;
+        width: 150px;
+    }
+    to
+    {
+        height: 180px;
+        width: 300px;
+    }
 }
 
 .modal p {
     text-align: center;
+    pointer-events: none;
+    font-weight: bold;
+    font-size: 20px;
 }
 
 .modal div {
@@ -406,6 +430,7 @@ Login
     height: 350px;
 }
 
+
 .input-bordered {
     border: none;
     border-radius: 5px;