decentraland-ui2 2.5.3 → 3.0.0

package/dist/components/Navbar/Navbar.styled.js

@@ -1,123 +1,190 @@
-import zIndex from '@mui/material/styles/zIndex';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { AppBar, Box, Button, Link, Modal } from '@mui/material';
-import { Logo as LogoComponent } from '../Logo/Logo';
-const DclAppBar = styled(AppBar, {
-    shouldForwardProp: prop => !['isSubmenuOpen', 'isMobileOpen'].includes(prop)
-})(props => {
-    const { isSubmenuOpen, isMobileOpen } = props;
-    let openedStyles;
-    if (isSubmenuOpen || isMobileOpen) {
-        openedStyles = {
-            boxShadow: 'none',
-            backgroundImage: 'none'
-        };
+import * as colors from '../../theme/colors';
+const FONT_FAMILY = 'Inter, Helvetica, Arial, sans-serif';
+const MOBILE_BREAKPOINT = '@media (max-width: 991px)';
+const DESKTOP_BREAKPOINT = '@media (min-width: 992px)';
+const Z_INDEX = {
+    userCard: 1099,
+    navbar: 1100,
+    mobileMenu: 1101,
+    notificationPanel: 1102,
+    mobileOverlay: 1201
+};
+const NAV_SHADOW = '0px 1.333px 24px rgba(0,0,0,0.12), 0px 8px 13.333px rgba(0,0,0,0.14), 0px 4px 6.667px rgba(0,0,0,0.2)';
+const GLASS_BG = 'rgba(38, 38, 38, 0.8)';
+const GLASS_BORDER = '0.5px solid #5E5B67';
+const GLASS_SHADOW = '0 2px 20px 16px rgba(0, 0, 0, 0.25)';
+const GLASS_BLUR = 'blur(12.5px)';
+const avatarPulse = keyframes({
+    '0%': { opacity: 1 },
+    '50%': { opacity: 0.5 },
+    '100%': { opacity: 1 }
+});
+// NOTE: Do NOT use transform in this animation. backdrop-filter breaks when
+// the element has any transform set (even identity matrix), because it creates
+// a new stacking context that prevents the blur from seeing through to the page.
+const slideDown = keyframes({
+    from: {
+        opacity: 0
+    },
+    to: {
+        opacity: 1
     }
-    return { ...openedStyles };
 });
-const LogoLink = styled(Link, {
-    shouldForwardProp: prop => prop !== 'isMobile'
-})(props => {
-    const { isMobile } = props;
-    let mobileStyles;
-    if (isMobile) {
-        mobileStyles = {
-            zIndex: zIndex.appBar
-        };
+const bellShake = keyframes({
+    '0%, 100%': { transform: 'rotate(0deg)' },
+    '25%': { transform: 'rotate(8deg)' },
+    '50%': { transform: 'rotate(-8deg)' },
+    '75%': { transform: 'rotate(4deg)' }
+});
+const NavbarRoot = styled('nav')({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX.navbar,
+    fontFamily: FONT_FAMILY,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    // The navbar's own blur is on a ::before pseudo-element so that child
+    // dropdowns can have their own independent backdrop-filter. Nested
+    // backdrop-filter elements don't compose in CSS - the child would blur
+    // the parent's already-blurred content instead of the page behind.
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1,
+        background: 'rgba(22, 21, 24, 0.75)',
+        boxShadow: NAV_SHADOW,
+        backdropFilter: 'saturate(1.8) blur(20px)',
+        WebkitBackdropFilter: 'saturate(1.8) blur(20px)',
+        transition: 'background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease'
+    },
+    [MOBILE_BREAKPOINT]: {
+        height: 64,
+        padding: '12px 16px'
+    },
+    [DESKTOP_BREAKPOINT]: {
+        height: 92,
+        padding: '16px 54px',
+        '&::before': {
+            background: 'rgba(22, 21, 24, 0.4)'
+        }
     }
-    return {
-        height: '36px',
-        ...mobileStyles
-    };
 });
-const AppBarDesktopWrapper = styled(Box)(({ theme }) => ({
+const NavbarLeft = styled('div')({
     display: 'flex',
-    justifyContent: 'flex-start',
     alignItems: 'center',
-    [theme.breakpoints.down('sm')]: {
-        display: 'none'
+    [MOBILE_BREAKPOINT]: {
+        gap: 12
+    },
+    [DESKTOP_BREAKPOINT]: {
+        gap: 48
+    },
+    '& .mobile-only': {
+        display: 'flex',
+        [DESKTOP_BREAKPOINT]: { display: 'none' }
+    },
+    '& .desktop-only': {
+        display: 'none',
+        [DESKTOP_BREAKPOINT]: { display: 'flex' }
     }
-}));
-const AppBarWrapper = styled(Box)({
+});
+const NavbarRight = styled('div')({
     display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
     alignItems: 'center',
-    height: '66px'
+    gap: 16,
+    [DESKTOP_BREAKPOINT]: {
+        gap: 48
+    }
 });
-const AppBarTabletAndBelowWrapper = styled(Box)({
-    width: '85px',
+const NavbarRightGroup = styled('div')({
     display: 'flex',
     alignItems: 'center',
-    height: '66px',
-    justifyContent: 'space-between'
+    gap: 12,
+    [DESKTOP_BREAKPOINT]: {
+        gap: 24
+    }
 });
-const AppBarRightWrapper = styled(Box)({
+const LogoLink = styled('a')({
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    flexShrink: 0,
+    width: 40,
+    height: 40,
+    '& svg': {
+        width: '100%',
+        height: '100%'
+    }
 });
-const MenuIcon = styled(Button)({
-    height: '32px',
-    width: '32px',
-    minWidth: '32px',
-    position: 'relative',
-    padding: 0,
+const HamburgerButton = styled('button')({
+    all: 'unset',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 40,
+    height: 40,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: 8,
+    color: colors.neutral.white,
+    cursor: 'pointer',
+    flexShrink: 0,
+    transition: 'background-color 0.15s ease',
     '&:hover': {
-        backgroundColor: 'transparent'
+        backgroundColor: 'rgba(255, 255, 255, 0.15)'
+    },
+    '&:active': {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)'
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${colors.base.primary}`,
+        outlineOffset: 2
+    },
+    [DESKTOP_BREAKPOINT]: {
+        display: 'none'
     }
 });
-const MenuIconBar = styled('span', {
-    shouldForwardProp: prop => prop !== 'isOpen' && prop !== 'active'
-})(props => {
-    const { isOpen, theme } = props;
-    let openedStyles;
-    if (isOpen) {
-        openedStyles = {
-            '&:nth-of-type(1)': {
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%) rotate(45deg)',
-                width: '33.94px'
-            },
-            '&:nth-of-type(2)': {
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%) rotate(-45deg)',
-                width: '33.94px'
-            }
-        };
+const SignInButton = styled('button')({
+    all: 'unset',
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '8px 22px',
+    border: `1px solid ${colors.neutral.softWhite}`,
+    borderRadius: 6,
+    fontFamily: FONT_FAMILY,
+    fontWeight: 600,
+    fontSize: 15,
+    lineHeight: '24px',
+    letterSpacing: 0.46,
+    textTransform: 'uppercase',
+    color: colors.neutral.softWhite,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    transition: 'background-color 0.15s ease, border-color 0.15s ease',
+    '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        borderColor: 'rgba(255, 255, 255, 0.7)'
+    },
+    '&:active': {
+        backgroundColor: 'rgba(255, 255, 255, 0.12)'
+    },
+    '&:disabled': {
+        opacity: 0.5,
+        pointerEvents: 'none'
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${colors.base.primary}`,
+        outlineOffset: 2
     }
-    return {
-        transition: `all 0.3s ease`,
-        height: '2px',
-        width: '100%',
-        backgroundColor: theme.palette.text.primary,
-        position: 'absolute',
-        '&:nth-of-type(1)': {
-            top: '8px',
-            left: 0
-        },
-        '&:nth-of-type(2)': {
-            top: '21px',
-            left: 0
-        },
-        ...openedStyles
-    };
 });
-const MenuModal = styled(Modal)(() => {
-    return {
-        '& .MuiBackdrop-root.MuiModal-backdrop': {
-            backgroundColor: 'transparent'
-        }
-    };
-});
-const Logo = styled(LogoComponent)(({ theme }) => ({
-    width: theme.spacing(4.5),
-    height: theme.spacing(4.5),
-    [theme.breakpoints.down('sm')]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4)
-    }
-}));
-export { DclAppBar, LogoLink, AppBarDesktopWrapper, AppBarWrapper, AppBarTabletAndBelowWrapper, AppBarRightWrapper, MenuIcon, MenuIconBar, MenuModal, Logo };
+export { DESKTOP_BREAKPOINT, FONT_FAMILY, GLASS_BG, GLASS_BLUR, GLASS_BORDER, GLASS_SHADOW, HamburgerButton, LogoLink, MOBILE_BREAKPOINT, NavbarLeft, NavbarRight, NavbarRightGroup, NavbarRoot, SignInButton, Z_INDEX, avatarPulse, bellShake, slideDown };
 //# sourceMappingURL=Navbar.styled.js.map

package/dist/components/Navbar/Navbar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.styled.js","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.styled.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Navbar.styled.js","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/Navbar/Navbar.types.d.ts

@@ -1,58 +1,74 @@
-import { ChainSelectorProps, ChainSelectori18n } from '../ChainSelector/ChainSelector.types';
-import { UserMenuI18N, UserMenuProps } from '../UserMenu/UserMenu.types';
-declare enum NavbarPages {
-    MARKETPLACE = "marketplace",
-    CREATE = "create",
-    EXPLORE = "explore",
-    LEARN = "learn",
-    GOVERNANCE = "governance",
-    EXTRA = "extra"
-}
-type NavbarMenuI18nProps = Record<NavbarPages, string>;
-type NavbarSubMenuItemsProps = {
-    column1Title?: string;
-    column1: {
-        title: string;
-        description: string;
-        url: string;
-        eventTrackingName: string;
-        isExternal?: boolean;
-    }[];
-    column2Title?: string;
-    column2: {
-        title: string;
-        description: string;
-        url: string;
-        eventTrackingName: string;
-        isExternal?: boolean;
-    }[];
-    column3Title?: string;
-    column3?: {
-        title: string;
-        description: string;
-        url: string;
-        eventTrackingName: string;
-        isExternal?: boolean;
-    }[];
+import type { ReactNode } from 'react';
+import type { ChainId } from '@dcl/schemas';
+import type { Network } from '@dcl/schemas/dist/dapps/network';
+type NavbarI18n = {
+    signIn: string;
+    signingIn: string;
+    whatsOn: string;
+    shop: string;
+    shopAll: string;
+    wearables: string;
+    emotes: string;
+    names: string;
+    land: string;
+    merch: string;
+    create: string;
+    createInDecentraland: string;
+    publishWearablesEmotes: string;
+    publishLand: string;
+    learn: string;
+    getStarted: string;
+    startCreating: string;
+    seeWhatsNew: string;
+    viewProfile: string;
+    myAssets: string;
+    accountSettings: string;
+    marketplaceAuthorizations: string;
+    walletAddress: string;
+    addressCopied: string;
+    logout: string;
+    creditsExpiringIn: string;
+    creditsValueNote: string;
 };
-type NavbarSubmenuProps = {
-    marketplace: NavbarSubMenuItemsProps;
-    create: NavbarSubMenuItemsProps;
-    explore: NavbarSubMenuItemsProps;
-    learn: NavbarSubMenuItemsProps;
-    governance: NavbarSubMenuItemsProps;
+type NavbarProps = {
+    isSignedIn: boolean;
+    isSigningIn?: boolean;
+    isLoadingProfile?: boolean;
+    address?: string;
+    avatar?: {
+        name?: string;
+        avatar?: {
+            snapshots?: {
+                face256?: string;
+                body?: string;
+            };
+        };
+    };
+    i18n?: Partial<NavbarI18n>;
+    notificationSlot?: ReactNode;
+    /** Currently selected chain id */
+    selectedChain?: ChainId;
+    /** List of chains available for selection */
+    chains?: ChainId[];
+    /** Called when the user picks a different chain */
+    onSelectChain?: (chain: ChainId) => void;
+    /** MANA balances keyed by network */
+    manaBalances?: Partial<Record<Network, number>>;
+    /** Called when the user clicks a balance entry */
+    onClickBalance?: (network: Network) => void;
+    /** Credits balance to display in the navbar top bar */
+    creditsBalance?: {
+        balance: number;
+        expiresAt: number;
+    };
+    /** Called when the user clicks the credits balance */
+    onClickCredits?: () => void;
+    /** Called when the user card panel is toggled open or closed.
+     *  Consumers can use this to close other panels (e.g. notifications). */
+    onToggleUserCard?: (isOpen: boolean) => void;
+    /** When set, the matching navigation tab receives a visual highlight. */
+    activePage?: 'whatsOn' | 'shop' | 'create' | 'learn';
+    onClickSignIn: () => void;
+    onClickSignOut: () => void;
 };
-type NavbarProps = Omit<UserMenuProps, 'i18n'> & Partial<ChainSelectorProps> & {
-    i18nNavbar?: NavbarMenuI18nProps;
-    submenuItems?: NavbarSubmenuProps;
-    i18nUserMenu?: UserMenuI18N;
-    i18nChainSelector?: ChainSelectori18n;
-    activePage: NavbarPages | string;
-    onClickNavbarItem?: (event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
-        eventTrackingName: string;
-        url?: string;
-        isExternal?: boolean;
-    }) => void;
-};
-export { NavbarPages };
-export type { NavbarMenuI18nProps, NavbarSubMenuItemsProps, NavbarSubmenuProps, NavbarProps };
+export type { NavbarI18n, NavbarProps };

package/dist/components/Navbar/Navbar.types.js

@@ -1,11 +1,2 @@
-var NavbarPages;
-(function (NavbarPages) {
-    NavbarPages["MARKETPLACE"] = "marketplace";
-    NavbarPages["CREATE"] = "create";
-    NavbarPages["EXPLORE"] = "explore";
-    NavbarPages["LEARN"] = "learn";
-    NavbarPages["GOVERNANCE"] = "governance";
-    NavbarPages["EXTRA"] = "extra";
-})(NavbarPages || (NavbarPages = {}));
-export { NavbarPages };
+export {};
 //# sourceMappingURL=Navbar.types.js.map

package/dist/components/Navbar/Navbar.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.types.js","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.types.ts"],"names":[],"mappings":"AAGA,IAAK,WAOJ;AAPD,WAAK,WAAW;IACd,0CAA2B,CAAA;IAC3B,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,wCAAyB,CAAA;IACzB,8BAAe,CAAA;AACjB,CAAC,EAPI,WAAW,KAAX,WAAW,QAOf;AAoDD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Navbar.types.js","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.types.ts"],"names":[],"mappings":""}

package/dist/components/Navbar/NotificationBell.styled.d.ts

@@ -0,0 +1,61 @@
+declare const BellButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const NotificationBadge: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const NotificationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationPanel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const NotificationList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const NotificationItemDescription: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const NotificationItemTime: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const NotificationDot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationEmpty: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { BellButton, NotificationBadge, NotificationDot, NotificationEmpty, NotificationHeader, NotificationItemContent, NotificationItemDescription, NotificationItemImage, NotificationItemTime, NotificationItemTitle, NotificationList, NotificationListItem, NotificationPanel, NotificationTitle, NotificationWrapper };