From 2c2a9dd65d9f77d0a1a8d354047381a33e7a453b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 28 Dec 2022 17:37:55 -0800
Subject: [PATCH] CSS updates for modals (except search)

---
 components/AboutModal/index.scss | 11 ++++++++++-
 components/Dialog/index.scss     | 12 ++++++++++--
 components/HeaderMenu/index.scss |  4 ++++
 styles/globals.scss              | 14 +++++++++++++-
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss
index 938bbb33..a13fea89 100644
--- a/components/AboutModal/index.scss
+++ b/components/AboutModal/index.scss
@@ -3,6 +3,7 @@
   background: none;
   border: 0;
   inset: 0;
+  top: 0;
   display: grid;
   place-items: center;
   min-height: 100vh;
@@ -12,12 +13,19 @@
 }
 
 .About.Dialog {
-  width: $unit * 60;
   top: 0;
+  animation: none;
   transform: translate(-50%, 0);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin-top: $unit-10x;
+
+  @include breakpoint(phone) {
+    border-radius: 0;
+    transform: none;
+    margin: 0;
+  }
+
   section {
     margin-bottom: $unit;
 
@@ -102,4 +110,5 @@
   place-items: center;
   overflow-y: auto;
   z-index: 40;
+  padding-top: 10%;
 }
diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss
index 5ca5967f..07bfae94 100644
--- a/components/Dialog/index.scss
+++ b/components/Dialog/index.scss
@@ -2,9 +2,10 @@
   $multiplier: 4;
 
   animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
-    openModal;
+    openModalDesktop;
   background: var(--dialog-bg);
   border-radius: $card-corner;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: $unit * $multiplier;
@@ -23,8 +24,15 @@
   }
 
   @include breakpoint(phone) {
+    animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
+      openModalMobile;
     min-width: inherit;
-    min-height: inherit;
+    min-height: 80vh;
+    transform: initial;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: auto;
     width: 100%;
   }
 
diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 88065714..bbea705d 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -19,6 +19,10 @@
   color: var(--text-tertiary);
   font-weight: $normal;
 
+  @include breakpoint(phone) {
+    cursor: pointer;
+  }
+
   &:hover:not(.disabled) {
     background: var(--menu-bg-item-hover);
     color: var(--text-primary);
diff --git a/styles/globals.scss b/styles/globals.scss
index 79055b8a..5288caee 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -298,7 +298,7 @@ i.tag {
   }
 }
 
-@keyframes openModal {
+@keyframes openModalDesktop {
   0% {
     opacity: 0;
     transform: translate(-50%, -48%) scale(0.96);
@@ -309,3 +309,15 @@ i.tag {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+
+@keyframes openModalMobile {
+  0% {
+    opacity: 0;
+    transform: translate(0%, 100%);
+  }
+
+  100% {
+    // opacity: 1;
+    transform: translate(0, 30%);
+  }
+}