updated modal styles

src/components/UI/Backdrop.js

@@ -1,6 +1,11 @@
 import React from 'react'
 
 const backdrop = ({ toggleBackdrop, show }) =>
-  show ? <div onClick={toggleBackdrop} className='backdrop'></div> : null
+  show ? (
+    <div
+      onClick={toggleBackdrop}
+      className={`backdrop ${show ? 'hideB' : ''}`}
+    ></div>
+  ) : null
 
 export default backdrop

src/static/sass/components/_backdrop.scss

@@ -5,6 +5,15 @@
   z-index: 100;
   left: 0;
   top: 0;
-   background-color: rgba($color-background, .7);
+  animation: fadeIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-   transition: all .3s;
+  background-color: rgba($color-background, 0.7);
+}
+
+@keyframes fadeIn {
+  0% {
+    background: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background: rgba(0, 0, 0, 0.7);
+  }
 }

src/static/sass/components/_modal.scss

@@ -7,8 +7,8 @@
   color: #fff;
   height: 52rem;
   opacity: 0;
-   box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
+  box-shadow: 0 1.5rem 4rem rgba($color-dark, 0.15);
-   transition: all .3s;
+  transition: all 0.3s;
 
   @include responsive(tab_port) {
     height: 38rem;
@@ -18,7 +18,6 @@
     height: 50rem;
   }
 
-
   &__container {
     background: linear-gradient(90deg, #000 50%, transparent);
     width: 70%;
@@ -27,7 +26,12 @@
     padding-left: 5rem;
 
     @include responsive(tab_port) {
-         background: linear-gradient(90deg, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.733), transparent);
+      background: linear-gradient(
+        90deg,
+        rgb(0, 0, 0) 55%,
+        rgba(0, 0, 0, 0.733),
+        transparent
+      );
       width: 88%;
     }
 
@@ -61,7 +65,7 @@
   }
 
   &__episode {
-      padding-top: .5rem;
+    padding-top: 0.5rem;
     font-size: 2rem;
   }
 
@@ -99,13 +103,13 @@
     cursor: pointer;
     background-color: transparent;
     color: #fff;
-      border: .5px solid $color-modal-grey-2;
+    border: 0.5px solid $color-modal-grey-2;
     border-radius: 2px;
     font-size: 1.5rem;
     margin-top: 2rem;
     margin-right: 1rem;
     padding: 1rem 2rem 1rem 2rem;
-      transition: all .2s;
+    transition: all 0.2s;
 
     @include responsive(phone) {
       margin-top: 1rem;
@@ -130,7 +134,7 @@
 }
 
 .show {
-   transition: .5s .3s ease-out;
+  transition: 0.3s 0.3s ease-out;
   top: 25%;
   left: 0;
   visibility: visible;
@@ -139,4 +143,5 @@
 
 .hide {
   visibility: hidden;
+  transition: 0.3s ease-out;
 }