Merge pull request #230 from jedmund/fix-mobile-visual-bugs

Fix mobile visual bugs

components/AccountModal/index.scss

@@ -10,6 +10,10 @@
     flex-direction: column;
     gap: $unit-2x;
     padding: 0 $unit-4x;
+
+    @include breakpoint(phone) {
+      gap: $unit-4x;
+    }
   }
 
   .DialogDescription {

components/DialogContent/index.scss

@@ -1,9 +1,11 @@
 .Dialog {
   position: fixed;
+  box-sizing: border-box;
   background: none;
   border: 0;
   inset: 0;
   display: grid;
+  padding: 0;
   place-items: center;
   min-height: 100vh;
   min-width: 100vw;
@@ -14,8 +16,8 @@
   .DialogContent {
     $multiplier: 4;
 
-    animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
+    // animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
-      none running openModalDesktop;
+    // none running openModalDesktop;
     background: var(--dialog-bg);
     border-radius: $card-corner;
     box-sizing: border-box;
@@ -40,14 +42,19 @@
     }
 
     @include breakpoint(phone) {
-      animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
+      // animation: slideUp;
-        openModalMobile;
+      // animation-duration: 3s;
+      // animation-fill-mode: forwards;
+      // animation-play-state: running;
+      // animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       min-width: inherit;
-      min-height: 80vh;
+      min-height: 90vh;
       transform: initial;
       left: 0;
       right: 0;
-      top: 0;
+      top: 5vh;
       height: auto;
       width: 100%;
     }

components/JobImage/index.scss

@@ -18,8 +18,9 @@
   max-width: $width;
   overflow: hidden;
   position: relative;
-  width: $width;
   transition: box-shadow 0.15s ease-in-out;
+  width: $width;
+  z-index: 1;
 
   // prettier-ignore
   @media only screen 
@@ -45,7 +46,7 @@
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
-    z-index: 2;
+    z-index: 4;
   }
 
   .JobAccessory.Button {
@@ -74,6 +75,6 @@
   .Overlay {
     background: none;
     position: absolute;
-    z-index: 1;
+    z-index: 2;
   }
 }

components/LoginModal/index.scss

@@ -1,6 +1,6 @@
 .Login.DialogContent {
   gap: $unit;
-  min-width: $unit * 52;
+  // min-width: $unit * 52;
 
   .Fields {
     display: flex;

components/SelectTableField/index.scss

@@ -1,17 +1,47 @@
 .TableField {
   align-items: center;
   display: grid;
-  gap: $unit * 2;
+  gap: $unit-2x;
   grid-template-columns: 1fr auto;
 
-  &.Image {
+  @include breakpoint(phone) {
-    grid-template-columns: 1fr auto 1fr;
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
   }
 
   .Left {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    gap: calc($unit / 2);
+    gap: $unit;
+    width: 100%;
+
+    .Info {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: center;
+      gap: $unit-half;
+    }
+
+    .Image {
+      display: none;
+
+      .preview {
+        $diameter: $unit-5x;
+        width: $diameter;
+        height: $diameter;
+
+        img {
+          width: $diameter;
+          height: $diameter;
+        }
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
 
     label {
       color: var(--text-tertiary);
@@ -30,6 +60,23 @@
     }
   }
 
+  .Right {
+    display: flex;
+    flex-direction: row;
+    gap: $unit-2x;
+    width: 100%;
+
+    @include breakpoint(phone) {
+      .Image {
+        display: none;
+      }
+    }
+
+    .SelectTrigger {
+      width: 100%;
+    }
+  }
+
   .preview {
     $diameter: $unit * 6;
     background-color: $grey-90;

components/SelectTableField/index.tsx

@@ -44,13 +44,15 @@ const SelectTableField = (props: Props) => {
   return (
     <div className={classNames({ TableField: true }, props.className)}>
       <div className="Left">
-        <h3>{props.label}</h3>
+        <div className="Info">
-        <p>{props.description}</p>
+          <h3>{props.label}</h3>
+          <p>{props.description}</p>
+        </div>
+        <div className="Image">{image()}</div>
       </div>
 
-      {image()}
-
       <div className="Right">
+        <div className="Image">{image()}</div>
         <Select
           name={props.name}
           open={props.open}

components/SignupModal/index.scss

@@ -1,6 +1,6 @@
 .Signup.DialogContent {
   gap: $unit;
-  min-width: $unit * 52;
+  // min-width: $unit * 52;
 
   .Fields {
     display: flex;

components/Switch/index.scss

@@ -3,6 +3,8 @@
   background: $grey-70;
   border-radius: calc($height / 2);
   border: none;
+  padding-left: $unit-half;
+  padding-right: $unit-half;
   position: relative;
   width: 58px;
   height: $height;
@@ -36,7 +38,7 @@
   height: 26px;
   width: 26px;
   transition: transform 100ms;
-  transform: translateX(-1px);
+  transform: translateX(0px);
 
   &:hover {
     cursor: pointer;
@@ -44,6 +46,6 @@
 
   &[data-state='checked'] {
     background: $grey-100;
-    transform: translateX(21px);
+    transform: translateX(24px);
   }
 }

styles/globals.scss

@@ -1,4 +1,5 @@
 @import '~meyer-reset-scss';
+@import 'keyframes.scss';
 @import 'themes.scss';
 
 html {
@@ -299,107 +300,3 @@ i.tag {
     grid-template-columns: 1fr 1fr;
   }
 }
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes openModalDesktop {
-  0% {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-
-  100% {
-    // opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes openModalMobile {
-  0% {
-    opacity: 0;
-    transform: translate(0%, 100%);
-  }
-
-  100% {
-    // opacity: 1;
-    transform: translate(0, 30%);
-  }
-}
-
-@keyframes slideLeft {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideRight {
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes fadeInFilter {
-  from {
-    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
-  }
-
-  to {
-    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
-  }
-}
-
-@keyframes scaleIn {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  20% {
-    opacity: 0.2;
-    transform: scale(0.4);
-  }
-  40% {
-    opacity: 0.4;
-    transform: scale(0.8);
-  }
-  60% {
-    opacity: 0.6;
-    transform: scale(1);
-  }
-  65% {
-    opacity: 0.65;
-    transform: scale(1.1);
-  }
-  70% {
-    opacity: 0.7;
-    transform: scale(1);
-  }
-  75% {
-    opacity: 0.75;
-    transform: scale(0.98);
-  }
-  80% {
-    opacity: 0.8;
-    transform: scale(1.02);
-  }
-  90% {
-    opacity: 0.9;
-    transform: scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

styles/keyframes.scss

@@ -0,0 +1,102 @@
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes openModalDesktop {
+  0% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  100% {
+    // opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translate(0%, 100%);
+  }
+
+  100% {
+    transform: translate(0, 5%);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeInFilter {
+  from {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
+  }
+
+  to {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: scale(0.4);
+  }
+  40% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  60% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  65% {
+    opacity: 0.65;
+    transform: scale(1.1);
+  }
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0.75;
+    transform: scale(0.98);
+  }
+  80% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+  90% {
+    opacity: 0.9;
+    transform: scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}