chore: mobile layout adjustments

netpoe · netpoe · commit f14b65a04f4b · 2024-04-29T11:24:48.000-06:00
diff --git a/app/src/theme/variants/_svpervnder.scss b/app/src/theme/variants/_svpervnder.scss
@@ -1,5 +1,5 @@
 /* stylelint-disable CssSyntaxError */
-body[data-theme="lease-721"] {
+body[data-theme="svpervnder"] {
   // Status colors
   --color-status-info: #5356fc;
   --color-status-info-light: rgba(83, 86, 252, 0.7);
diff --git a/app/src/ui/modal/Modal.module.scss b/app/src/ui/modal/Modal.module.scss
@@ -72,13 +72,14 @@
     }
 
     &--fullscreen {
-      @include fullscreen();
-
-      &-on-mobile {
-        @media (max-width: $mq-medium) {
-          @include fullscreen();
-        }
+      @include atLargeTablet {
+        width: 75vw;
       }
+      position: absolute;
+      align-self: center;
+      width: 95vw;
+      max-height: 95%;
+      overflow-y: auto;
     }
 
     &--pullup {
@@ -94,13 +95,29 @@
 
   &__header {
     @include font-properties($typography-headline-2);
+    @include atLargeTablet {
+      padding: $space-ml;
+    }
+    display: flex;
+    justify-content: space-between;
     border-bottom: 1px solid var(--color-background);
     border-top-left-radius: $border-radius-modal;
     border-top-right-radius: $border-radius-modal;
-    padding: $space-ml;
+    padding: $space-default;
     color: var(--color-typography-text);
     background-color: var(--color-background);
 
+    &--left,
+    &--right {
+      display: block;
+
+      &-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+
     &--on-close {
       display: flex;
       justify-content: flex-end;
@@ -113,8 +130,10 @@
 
   &__content {
     @include font-properties($typography-text);
+    @include atLargeTablet {
+      padding: $space-ml;
+    }
     max-height: 65vh;
-    padding: $space-ml;
     overflow-y: auto;
     background-color: var(--color-background-contrast);
 
diff --git a/app/src/ui/modal/Modal.module.scss.d.ts b/app/src/ui/modal/Modal.module.scss.d.ts
@@ -6,12 +6,15 @@ export type Styles = {
   modal__content: string;
   modal__flat: string;
   modal__header: string;
+  "modal__header--left": string;
+  "modal__header--left-item": string;
   "modal__header--on-close": string;
   "modal__header--on-close-icon": string;
+  "modal__header--right": string;
+  "modal__header--right-item": string;
   modal__overlay: string;
   modal__wrapper: string;
   "modal__wrapper--fullscreen": string;
-  "modal__wrapper--fullscreen-on-mobile": string;
   "modal__wrapper--large": string;
   "modal__wrapper--medium": string;
   "modal__wrapper--pullup": string;
diff --git a/app/src/ui/modal/Modal.tsx b/app/src/ui/modal/Modal.tsx
@@ -4,7 +4,6 @@ import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
 
 import { Button } from "ui/button/Button";
-import { Grid } from "ui/grid/Grid";
 import { Icon } from "ui/icon/Icon";
 import { IconButton } from "../iconButton/IconButton";
 import { CloseIcon } from "../icons/CloseIcon";
@@ -104,7 +103,6 @@ export const Modal = ({
           aria-modal="true"
           className={clsx(styles.modal__wrapper, className, {
             [styles["modal__wrapper--fullscreen"]]: fullscreenVariant === "default",
-            [styles["modal__wrapper--fullscreen-on-mobile"]]: fullscreenVariant === "mobile-only",
             [styles["modal__wrapper--small"]]: size === "s",
             [styles["modal__wrapper--medium"]]: size === "m",
             [styles["modal__wrapper--large"]]: size === "l",
@@ -126,11 +124,11 @@ Modal.Header = ({ children, className, onClose, ...props }: ModalHeaderProps) =>
   if (onClose) {
     return (
       <div className={clsx(styles.modal__header, className)} {...props}>
-        <Grid.Row justify="between" align="center">
-          <Grid.Col lg={8} xs={8}>
-            {children}
-          </Grid.Col>
-          <Grid.Col lg={4} xs={4}>
+        <div className={styles["modal__header--left"]}>
+          <div className={styles["modal__header--left-item"]}>{children}</div>
+        </div>
+        <div className={styles["modal__header--right"]}>
+          <div className={styles["modal__header--right-item"]}>
             <div className={styles["modal__header--on-close"]}>
               <Button
                 size="xs"
@@ -142,8 +140,8 @@ Modal.Header = ({ children, className, onClose, ...props }: ModalHeaderProps) =>
                 <Icon name="icon-cross" />
               </Button>
             </div>
-          </Grid.Col>
-        </Grid.Row>
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.tsx
@@ -36,12 +36,12 @@ export const LarsKristoHellheads: React.FC<LatestCollectionProps> = ({ className
               <div className={styles["latest-collection__intro"]}>
                 <Typography.Headline5>Latest Collection</Typography.Headline5>
                 <Typography.Headline4 className={styles["latest-collection__intro--artist-name"]}>
-                  larskristo: hellheads
+                  Lars Kristo: Hellheadz
                 </Typography.Headline4>
-                <Typography.Description>31/150 Sold</Typography.Description>
+                <Typography.Description>31/222 Sold</Typography.Description>
                 <Typography.Text>
                   In 2022, Larskristo ventured deeper into the abyss, exploring the unsettling terrain of AI dark art.
-                  This foray birthed HellheadS—a chilling fusion of the ordinary and the grotesque. Here, everyday
+                  This foray birthed Hellheadz — a chilling fusion of the ordinary and the grotesque. Here, everyday
                   objects metamorphosed into eerie spectacles, blurring the lines between reality and nightmare.
                 </Typography.Text>
                 <Grid.Row>
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss
@@ -6,19 +6,32 @@
 
   &__header {
     &--row {
-      display: flex;
-
-      > div {
+      @include atLargeTablet {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-right: $space-default;
+
+        > div {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          margin-right: $space-default;
+        }
       }
     }
+
+    &--token-id {
+      @include atLargeTablet {
+        margin-bottom: 0;
+      }
+      margin-bottom: $space-default;
+    }
   }
 
   &__img-container {
+    @include atLargeTablet {
+      padding-top: 0;
+    }
     margin-bottom: $space-default;
+    padding-top: $space-default;
 
     img {
       width: 100%;
@@ -42,9 +55,22 @@
 
   &__forge-card {
     &--row {
+      @include atLargeTablet {
+        margin-bottom: $space-s;
+      }
       display: flex;
       justify-content: space-between;
-      margin-bottom: $space-s;
+
+      &:not(:last-child) {
+        margin-bottom: $space-ml;
+      }
+
+      &-price {
+        @include atLargeTablet {
+          padding: 0;
+        }
+        padding: $space-default;
+      }
 
       &-price,
       &-button {
@@ -66,7 +92,11 @@
       }
 
       &-details {
+        @include atLargeTablet {
+          justify-content: start;
+        }
         display: flex;
+        justify-content: space-between;
 
         p {
           margin-right: $space-m;
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss.d.ts b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss.d.ts
@@ -10,6 +10,7 @@ export type Styles = {
   "details-modal__forge-card--row-img": string;
   "details-modal__forge-card--row-price": string;
   "details-modal__header--row": string;
+  "details-modal__header--token-id": string;
   "details-modal__img-container": string;
   "details-modal__price-block": string;
   "details-modal__price-block--buy-now": string;
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.tsx
@@ -77,7 +77,7 @@ export const DetailsModal: React.FC<DetailsModalProps> = ({ onClose, className,
           <div>
             <Typography.Headline4 flat>{item.name} </Typography.Headline4>
           </div>
-          <div>
+          <div className={styles["details-modal__header--token-id"]}>
             <Button variant="outlined" color="secondary" size="xs">
               Token ID: {item.id!}
             </Button>
@@ -297,18 +297,20 @@ export const DetailsModal: React.FC<DetailsModalProps> = ({ onClose, className,
                     This foray birthed HellheadS—a chilling fusion of the ordinary and the grotesque. Here, everyday
                     objects metamorphosed into eerie spectacles, blurring the lines between reality and nightmare.
                   </Typography.Text>
-                  <Grid.Row justify="end">
-                    <Grid.Col lg={1}>
-                      <Typography.Anchor>
-                        <Icon name="icon-instagram" />
-                      </Typography.Anchor>
-                    </Grid.Col>
-                    <Grid.Col lg={1}>
-                      <Typography.Anchor>
-                        <Icon name="icon-tiktok" />
-                      </Typography.Anchor>
-                    </Grid.Col>
-                  </Grid.Row>
+                  <Grid.Container>
+                    <Grid.Row justify="end">
+                      <Grid.Col lg={1} xs={1}>
+                        <Typography.Anchor>
+                          <Icon name="icon-instagram" />
+                        </Typography.Anchor>
+                      </Grid.Col>
+                      <Grid.Col lg={1} xs={1}>
+                        <Typography.Anchor>
+                          <Icon name="icon-tiktok" />
+                        </Typography.Anchor>
+                      </Grid.Col>
+                    </Grid.Row>
+                  </Grid.Container>
                 </Card.Content>
               </Card>
               <Card className={styles["details-modal__details-card"]}>
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/grid-item/GridItem.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/grid-item/GridItem.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Grid } from "ui/grid/Grid";
 import { Card } from "ui/card/Card";
@@ -17,7 +17,7 @@ export const GridItem: React.FC<GridItemProps> = ({ item, index, handleExpand, c
 
   const ERC721 = useLarskristoHellheadsContext();
 
-  const handleMouseEnter = async () => {
+  useEffect(() => {
     if (tokenPrice) {
       return;
     }
@@ -30,8 +30,8 @@ export const GridItem: React.FC<GridItemProps> = ({ item, index, handleExpand, c
       setTokenPrice(result);
 
       setIsFetchingTokenPrice(false);
-    }, 500);
-  };
+    }, 100 * (index + 1));
+  }, [tokenPrice?.rawValue]);
 
   const renderTokenPrice = () => {
     if (tokenPrice?.rawValue === BigInt(0)) {
@@ -50,13 +50,7 @@ export const GridItem: React.FC<GridItemProps> = ({ item, index, handleExpand, c
   };
 
   return (
-    <Grid.Col
-      lg={3}
-      xs={6}
-      key={item.thumbnail}
-      className={clsx(styles["grid-item"], className)}
-      onMouseEnter={handleMouseEnter}
-    >
+    <Grid.Col lg={3} xs={12} key={item.thumbnail} className={clsx(styles["grid-item"], className)}>
       <Card className={styles["grid-item"]} withSpotlightEffect>
         <div className={styles["grid-item__img"]}>
           <img src={item.thumbnail} alt={item.name} />
