[DPCP-190] [DPCP-189] [DPCP-185] snaps (#22)

* ar(whim): expand oneiros * ar(whim): expand oneiros * ar(whim): expand oneiros
dreampipcom · Jan 15, 2025 · a327d4b · a327d4b
1 parent 901dedf
commit a327d4b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 41 deletions.
diff --git a/src/atoms/04_Logo/Logo.tsx b/src/atoms/04_Logo/Logo.tsx
@@ -1,4 +1,4 @@
-/* eslint no-unused-vars:0, no-shadow:0, @typescript-eslint/no-explicit-any:0 */
+/* eslint no-underscore-dangle:0, max-len:0, no-unused-vars:0, no-shadow:0, @typescript-eslint/no-explicit-any:0 */
 // @atoms/Button.tsx
 import clsx from 'clsx';
 import MLink from '@mui/material/Link';
@@ -8,6 +8,7 @@ export enum ELogoSize {
   SMALL = 'small',
   MEDIUM = 'medium',
   LARGE = 'large',
+  RESPONSIVE = 'responsive',
 }
 
 export interface ILogo {
@@ -28,24 +29,59 @@ export const HLogo = function ({
   ];
   const styles = clsx(sx);
 
-  const sizeMap = {
+  const _sizeMap = {
     [ELogoSize.LARGE]: {
       width: 180,
-      height: 'auto',
+      desktop: 180,
     },
     [ELogoSize.MEDIUM]: {
       width: 120,
-      height: 'auto',
+      desktop: 120,
     },
     [ELogoSize.SMALL]: {
       width: 80,
-      height: 'auto',
+      desktop: 80,
+    },
+    [ELogoSize.RESPONSIVE]: {
+      width: 80,
+      desktop: 120,
     },
   };
 
+  const sizeMap =
+    size === ELogoSize.RESPONSIVE
+      ? {
+          [ELogoSize.LARGE]: {
+            width: 80,
+            desktop: 120,
+          },
+          [ELogoSize.MEDIUM]: {
+            width: 80,
+            desktop: 120,
+          },
+          [ELogoSize.SMALL]: {
+            width: 80,
+            desktop: 120,
+          },
+          [ELogoSize.RESPONSIVE]: {
+            width: 80,
+            desktop: 120,
+          },
+        }
+      : _sizeMap;
+
   return (
-    <MLink id={id} className={styles} href="https://dreampip.com">
-      <Logo width={sizeMap[size].width} height={sizeMap[size].height} />
+    <MLink id={id} className={styles} href="https://www.dreampip.com">
+      <Logo
+        className="hidden md:block"
+        width={sizeMap[size].desktop}
+        height={sizeMap[size].desktop}
+      />
+      <Logo
+        className="block md:hidden"
+        width={sizeMap[size].width}
+        height={sizeMap[size].width}
+      />
     </MLink>
   );
 };

diff --git a/src/atoms/04_Logo/assets/components/Logo.tsx b/src/atoms/04_Logo/assets/components/Logo.tsx
@@ -5,25 +5,13 @@ import React from 'react';
 
 interface LogoProps {
   color?: string;
-  width?: number | string;
-  height?: number | string;
 }
 
 type TComponent = React.FC<LogoProps & React.SVGProps<SVGSVGElement>>;
 
-const Logo: TComponent = function ({
-  color = 'black',
-  width = 24,
-  height = 24,
-  ...props
-}: LogoProps) {
+const Logo: TComponent = function ({ color = 'black', ...props }: LogoProps) {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" {...props}>
       <g fill={color}>
         <svg
           version="1.1"

diff --git a/src/atoms/04_Logo/index.ts b/src/atoms/04_Logo/index.ts
@@ -1,3 +1,3 @@
 // @atoms/Logo/index.ts
-export { default as Logo } from './Logo';
+export { default as Logo, ELogoSize } from './Logo';
 export const logoName = 'logo';
diff --git a/src/molecules/06_Nav/Nav.tsx b/src/molecules/06_Nav/Nav.tsx
@@ -9,7 +9,7 @@ import { AudioPlayer } from '../02_AudioPlayer';
 import { Button, ButtonVariant, EButtonTheme } from '../../atoms/01_Button';
 import { Typography } from '../../atoms/02_Typography';
 import { Link } from '../../atoms/03_Link';
-import { Logo } from '../../atoms/04_Logo';
+import { Logo, ELogoSize } from '../../atoms/04_Logo';
 import { SystemIcon, EIcon, EIconCollection } from '../../atoms/05_SystemIcon';
 import { Image } from '../../atoms/08_Image';
 import {
@@ -184,10 +184,10 @@ export const DEFAULT_PROMO = {
     //   type: ESpotMessageType.OFFER,
     // },
   ],
-  // image: {
-  //   mobile: 'https://www.dreampip.com/og-image.png',
-  //   desktop: 'https://i.giphy.com/26DNfl7IrX8b40klW.webp',
-  // },
+  image: {
+    mobile: 'https://www.dreampip.com/og-image.png',
+    desktop: 'https://i.giphy.com/26DNfl7IrX8b40klW.webp',
+  },
   variant: ESpotVariant.TWO_CENTER_ALWAYS,
   status: ESpotStatus.ACTIVE,
 };
@@ -641,7 +641,7 @@ export const HNav = function ({
       [`class01
         sticky
         top-a0
-        z-50
+        z-999
         `]: true,
     },
   ];
@@ -677,17 +677,13 @@ export const HNav = function ({
             className="grid min-h-a9 !bg-primary-dark dark:!bg-primary-soft"
           />
         ) : undefined}
-        <Grid
-          full
-          variant={EGridVariant.DEFAULT}
-          bleed={EBleedVariant.RESPONSIVE}
-        >
+        <Grid full variant={EGridVariant.DEFAULT} bleed={EBleedVariant.ZERO}>
           <div className={toolsStyles}>
             <Grid
               variant={EGridVariant.DEFAULT}
-              bleed={EBleedVariant.HORIZONTAL}
+              bleed={EBleedVariant.DEFAULT}
               gradient={EGradientVariant.SOFT}
-              className="grid !p-a2 !px-a3 auto-rows-fr"
+              className="grid px-a2"
             >
               <div className="justify-self-start self-center col-span-3 col-start-1 md:!col-span-2 md:!col-start-1">
                 {!hideMenu ? (
@@ -737,12 +733,8 @@ export const HNav = function ({
                   </Typography>
                 ) : undefined}
               </div>
-              <div className="justify-self-center self-center col-span-3 col-start-4 md:!col-span-2 md:!col-start-4">
-                <Link href="/">
-                  <span style={{ display: 'flex', height: 120, width: 100 }}>
-                    <Logo theme={theme} />
-                  </span>
-                </Link>
+              <div className="justify-self-end md:justify-self-center self-start md:self-center col-span-3 col-start-4 md:!col-span-2 md:!col-start-4">
+                <Logo size={ELogoSize.RESPONSIVE} theme={theme} />
               </div>
               {!hideControls ? (
                 <HControls