feat(widget): mobile dialogs

JustaName-id · Nov 7, 2024 · ab83fe3 · ab83fe3
1 parent 43e8b6d
commit ab83fe3
Show file tree

Hide file tree

Showing 5 changed files with 337 additions and 260 deletions.
diff --git a/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx b/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx
@@ -124,7 +124,6 @@ export const JustVerifiedDialog: FC<JustVerifiedDialogProps> = ({
             gap: '20px',
             display: 'flex',
             flexDirection: 'column',
-            maxWidth: '500px',
           }}
         >
           <Flex justify="space-between" direction="row" gap="10px">

diff --git a/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css b/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css
@@ -1,120 +1,147 @@
 /* Overlay styles */
 .overlay {
-    position: fixed;
-    inset: 0;
-    transition: backdrop-filter 100ms ease;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
+  position: fixed;
+  inset: 0;
+  transition: backdrop-filter 100ms ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes overlayShow {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Content styles */
 .content {
-    background-color: var(--justweb3-background-color);
-    box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33);
-    position: fixed;
-    z-index: 9999;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 40px;
-    transition: all 0.4s ease-in-out;
-    animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
-    border-radius: 24px;
-    width: fit-content;
-    max-width: min(1200px, 90vw);
-    min-width: 390px;
-    min-height: 200px;
-    max-height: 80vh;
+  background-color: var(--justweb3-background-color);
+  box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33);
+  position: fixed;
+  z-index: 9999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 40px;
+  transition: all 0.4s ease-in-out;
+  animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: 24px;
+  width: fit-content;
+  max-width: min(1200px, 90vw);
+  min-width: 390px;
+  min-height: 200px;
+  max-height: 80vh;
 }
 
 .content:focus {
-    outline: none;
+  outline: none;
 }
 
 @keyframes contentShow {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.6);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
-@media (max-width: 768px) {
-    .content {
-        width: 100vw;
-        max-width: 100vw;
-        min-width: 100vw;
-        max-height: 100vh;
-        border-radius: 0;
-    }
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
-/* Fullscreen modifier */
-.fullScreen {
-    border-radius: 0;
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
     width: 100vw;
-    max-width: 100vw;
+    max-width: 100vw !important;
     min-width: 100vw;
-    min-height: 100vh;
     max-height: 100vh;
+    border-radius: 24px 24px 0 0;
+    bottom: 0;
+    left: 0;
+    top: auto;
+    transform: translateY(0);
+    animation: slideUp 550ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .content[data-state='closed'] {
+    animation: slideDown 550ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+/* Fullscreen modifier */
+.fullScreen {
+  border-radius: 0;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
+  min-height: 100vh;
+  max-height: 100vh;
 }
 
 /* Title styles */
 .title {
-    margin: 0;
-    font-weight: 500;
-    font-family: var(--justweb3-font-family), serif;
-    color: black;
-    font-size: 17px;
+  margin: 0;
+  font-weight: 500;
+  font-family: var(--justweb3-font-family), serif;
+  color: black;
+  font-size: 17px;
 }
 
 /* Description styles */
 .description {
-    margin: 10px 0 20px;
-    font-family: var(--justweb3-font-family), serif;
-    color: #6b7280;
-    font-size: 15px;
-    line-height: 1.5;
+  margin: 10px 0 20px;
+  font-family: var(--justweb3-font-family), serif;
+  color: #6b7280;
+  font-size: 15px;
+  line-height: 1.5;
 }
 
 /* DialogHeader styles */
 .dialogHeader {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
 
 .dialogHeader > * + * {
-    margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */
+  margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */
 }
 
 /* DialogFooter styles */
 .dialogFooter {
-    display: flex;
-    flex-direction: column-reverse;
-    padding-top: 20px;
+  display: flex;
+  flex-direction: column-reverse;
+  padding-top: 20px;
 }
 
 @media (min-width: 768px) {
-    .dialogFooter {
-        flex-direction: row;
-        justify-content: flex-end;
-    }
-
-    .dialogFooter > * + * {
-        margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */
-    }
+  .dialogFooter {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .dialogFooter > * + * {
+    margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */
+  }
 }
diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css
@@ -0,0 +1,17 @@
+.desktopSection {
+  display: none;
+}
+
+.mobileSection {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .desktopSection {
+    display: block;
+  }
+
+  .mobileSection {
+    display: none;
+  }
+}