refactor: change modal styles

- add dim color variable
- change order of keyframes
- remove border bottom of modal window in mobile media query
- set max-height of modal window

Refs: #649 (comment) #649 (comment) #649 (comment) #649 (comment)

frontend/src/color.css

@@ -15,4 +15,5 @@
   --light-blue-green: #d5eaf1;
   --blue: #279cf6;
   --red: #ff0000;
+  --dim: rgba(0, 0, 0, 0.4);
 }

frontend/src/components/Modal/ModalPortal/ModalPortal.module.css

@@ -14,12 +14,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
-  animation: dissolve 0.3s forwards;
   z-index: var(--modal-portal-z-index);
 }
 
 .dimmer-box {
   position: fixed;
   inset: 0;
+  background-color: var(--dim);
+  animation: dissolve 0.3s forwards;
 }

frontend/src/components/Modal/ModalWindow/ModalWindow.module.css

@@ -1,29 +1,28 @@
-@keyframes subtle-pop-up {
+@keyframes drag-up {
   from {
-    transform: scale(0.9);
+    transform: translateY(100px);
     opacity: 0;
   }
 
   to {
-    transform: scale(1);
+    transform: translateY(0);
     opacity: 1;
   }
 }
 
-@keyframes drag-up {
+@keyframes subtle-pop-up {
   from {
-    transform: translateY(100px);
+    transform: scale(0.9);
     opacity: 0;
   }
 
   to {
-    transform: translateY(0);
+    transform: scale(1);
     opacity: 1;
   }
 }
 
 .box {
-  border-radius: 8px;
   position: fixed;
   margin: auto;
   padding: 1.5rem;
@@ -41,13 +40,17 @@
     max-height: 400px;
     min-height: 150px;
     width: 100%;
+    border-radius: 8px 8px 0 0;
     animation: drag-up 0.3s forwards;
   }
 }
 
 @media only screen and (min-width: 420px) {
   .box {
-    inset: 4rem;
+    left: 4rem;
+    right: 4rem;
+    max-height: calc(100% - 8rem);
+    border-radius: 8px;
     animation: subtle-pop-up 0.3s forwards;
   }
 }