feat: update sprinkles breakpoints (#4480)

update breakpoints
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/Navbar.css.ts

@@ -20,7 +20,7 @@ export const nav = style([
 export const logoContainer = style([
   sprinkles({
     display: 'flex',
-    marginRight: { mobile: '12', desktopXl: '20' },
+    marginRight: { sm: '12', xxl: '20' },
     alignItems: 'center',
   }),
 ])

src/components/NavBar/Navbar.tsx

@@ -65,7 +65,7 @@ const Navbar = () => {
   const { pathname } = useLocation()
   const nftFlag = useNftFlag()
 
-  if (windowWidth && windowWidth < breakpoints.desktopXl) {
+  if (windowWidth && windowWidth < breakpoints.xl) {
     return <MobileNavbar />
   }
 

src/components/NavBar/SearchBar.css.ts

@@ -8,14 +8,14 @@ const DESKTOP_NAVBAR_WIDTH = '360px'
 const baseSearchStyle = style([
   sprinkles({
     paddingY: '12',
-    width: { mobile: 'viewWidth' },
+    width: { sm: 'viewWidth' },
     borderStyle: 'solid',
     borderWidth: '1px',
     borderColor: 'medGray',
   }),
   {
     '@media': {
-      [`screen and (min-width: ${breakpoints.tabletSm}px)`]: {
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
         width: DESKTOP_NAVBAR_WIDTH,
       },
     },

src/components/NavBar/SearchBar.tsx

@@ -318,15 +318,15 @@ export const SearchBar = () => {
     setSearchValue('')
   }, [pathname])
 
-  const isMobile = useMemo(() => windowWidth && windowWidth <= breakpoints.tabletSm, [windowWidth])
+  const isMobile = useMemo(() => windowWidth && windowWidth <= breakpoints.sm, [windowWidth])
 
   return (
     <>
       <Box
-        position={{ mobile: isOpen ? 'absolute' : 'relative', tabletSm: 'relative' }}
-        top={{ mobile: '0', tabletSm: 'unset' }}
-        left={{ mobile: '0', tabletSm: 'unset' }}
-        width={{ mobile: isOpen ? 'viewWidth' : 'auto', tabletSm: 'auto' }}
+        position={{ sm: isOpen ? 'absolute' : 'relative', md: 'relative' }}
+        top={{ sm: '0', md: 'unset' }}
+        left={{ sm: '0', md: 'unset' }}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
         style={{ zIndex: '1000' }}
       >
@@ -335,16 +335,16 @@ export const SearchBar = () => {
           borderRadius={isOpen ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
           borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          display={{ mobile: isOpen ? 'flex' : 'none', desktopXl: 'flex' }}
+          display={{ sm: isOpen ? 'flex' : 'none', xxl: 'flex' }}
           justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
           onFocus={() => !isOpen && toggleOpen()}
           onClick={() => !isOpen && toggleOpen()}
           gap="12"
         >
-          <Box display={{ mobile: 'none', tabletSm: 'flex' }}>
+          <Box display={{ sm: 'none', md: 'flex' }}>
             <MagnifyingGlassIcon />
           </Box>
-          <Box display={{ mobile: 'flex', tabletSm: 'none' }} color="placeholder" onClick={toggleOpen}>
+          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
             <ChevronLeftIcon />
           </Box>
           <Box
@@ -359,7 +359,7 @@ export const SearchBar = () => {
             value={searchValue}
           />
         </Row>
-        <Box display={{ mobile: isOpen ? 'none' : 'flex', desktopXl: 'none' }}>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', xxl: 'none' }}>
           <NavIcon onClick={toggleOpen}>
             <NavMagnifyingGlassIcon width={28} height={28} />
           </NavIcon>

src/nft/components/collection/Card.css.ts

@@ -11,7 +11,7 @@ export const card = style([
     boxSizing: 'border-box',
     WebkitBoxSizing: 'border-box',
     '@media': {
-      [`(max-width: ${breakpoints.tabletSm - 1}px)`]: {
+      [`(max-width: ${breakpoints.sm - 1}px)`]: {
         ':hover': {
           borderColor: themeVars.colors.medGray,
           cursor: 'pointer',
@@ -48,7 +48,7 @@ export const button = style([
     width: 'full',
     position: 'relative',
     paddingY: '8',
-    marginTop: { mobile: '8', tabletSm: '10' },
+    marginTop: { sm: '8', md: '10' },
     marginBottom: '12',
     borderRadius: '12',
     border: 'none',
@@ -78,7 +78,7 @@ export const marketplaceIcon = style([
 export const erc1155ButtonRow = sprinkles({
   flexShrink: '0',
   gap: '12',
-  marginTop: { mobile: '8', tabletSm: '10' },
+  marginTop: { sm: '8', md: '10' },
   marginBottom: '12',
 })
 

src/nft/components/collection/CollectionNfts.css.ts

@@ -6,7 +6,7 @@ export const assetList = style([
   sprinkles({
     display: 'grid',
     marginTop: '24',
-    gap: { mobile: '8', tablet: '12', tabletXl: '20' },
+    gap: { sm: '8', md: '12', lg: '20' },
   }),
   {
     gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr) )',

src/nft/components/collection/CollectionStats.css.ts

@@ -5,12 +5,12 @@ import { breakpoints, sprinkles } from '../../css/sprinkles.css'
 
 export const statsText = style([
   sprinkles({
-    marginTop: { mobile: '8', tabletSm: '40' },
-    marginBottom: { mobile: '0', tabletSm: '28' },
+    marginTop: { sm: '8', md: '40' },
+    marginBottom: { sm: '0', md: '28' },
   }),
   {
     '@media': {
-      [`(max-width: ${breakpoints.tabletSm - 1}px)`]: {
+      [`(max-width: ${breakpoints.sm - 1}px)`]: {
         marginLeft: '68px',
       },
     },
@@ -38,7 +38,7 @@ export const collectionImage = style([
     verticalAlign: 'top',
     top: '-118px',
     '@media': {
-      [`(max-width: ${breakpoints.tabletSm - 1}px)`]: {
+      [`(max-width: ${breakpoints.sm - 1}px)`]: {
         width: '60px',
         height: '60px',
         borderWidth: '2px',

src/nft/components/collection/CollectionStats.tsx

@@ -137,7 +137,7 @@ const CollectionName = ({
         </Box>
         {isVerified && <VerifiedIcon style={{ width: '32px', height: '32px' }} />}
         <Row
-          display={{ mobile: 'none', tabletSm: 'flex' }}
+          display={{ sm: 'none', md: 'flex' }}
           alignItems="center"
           justifyContent="center"
           marginLeft="32"
@@ -211,7 +211,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
   }, [descriptionRef, baseRef])
 
   return (
-    <Box ref={baseRef} marginTop={{ mobile: '12', tabletSm: '16' }} style={{ maxWidth: '680px' }}>
+    <Box ref={baseRef} marginTop={{ sm: '12', md: '16' }} style={{ maxWidth: '680px' }}>
       <Box
         ref={descriptionRef}
         className={clsx(styles.description, styles.nameText, readMore && styles.descriptionOpen)}
@@ -248,7 +248,7 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
   const floorPriceStr = ethNumberStandardFormatter(stats.floorPrice)
 
   return (
-    <Row gap={{ mobile: '20', tabletSm: '60' }} {...props}>
+    <Row gap={{ sm: '20', md: '60' }} {...props}>
       <StatsItem label="Items" isMobile={isMobile ?? false}>
         {totalSupplyStr}
       </StatsItem>

src/nft/components/explore/Banner.css.ts

@@ -3,8 +3,8 @@ import { breakpoints, sprinkles } from 'nft/css/sprinkles.css'
 
 export const section = style([
   sprinkles({
-    paddingLeft: { mobile: '16', desktopL: '0' },
-    paddingRight: { mobile: '16', desktopL: '0' },
+    paddingLeft: { sm: '16', xl: '0' },
+    paddingRight: { sm: '16', xl: '0' },
   }),
   {
     maxWidth: '1000px',
@@ -63,7 +63,7 @@ export const collectionDetails = style([
   }),
   {
     '@media': {
-      [`screen and (min-width: ${breakpoints.tabletL}px)`]: {
+      [`screen and (min-width: ${breakpoints.md}px)`]: {
         width: '40%',
       },
     },

src/nft/css/sprinkles.css.ts

@@ -235,27 +235,24 @@ const borderWidth = ['1px', '1.5px', '2px', '4px']
 const borderStyle = ['none', 'solid'] as const
 
 export const breakpoints = {
-  tabletSm: 656,
-  tablet: 708,
-  tabletL: 784,
-  tabletXl: 830,
-  desktop: 948,
-  desktopL: 1030,
-  desktopXl: 1260,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+  xxxl: 1920,
 }
 
 const layoutStyles = defineProperties({
   conditions: {
-    mobile: {},
-    tabletSm: { '@media': `screen and (min-width: ${breakpoints.tabletSm}px)` },
-    tablet: { '@media': `screen and (min-width: ${breakpoints.tablet})` },
-    tabletL: { '@media': `screen and (min-width: ${breakpoints.tabletL}px)` },
-    tabletXl: { '@media': `screen and (min-width: ${breakpoints.tabletXl}px)` },
-    desktop: { '@media': `screen and (min-width: ${breakpoints.desktop}px)` },
-    desktopL: { '@media': `screen and (min-width: ${breakpoints.desktopL}px)` },
-    desktopXl: { '@media': `screen and (min-width: ${breakpoints.desktopXl}px)` },
+    sm: {},
+    md: { '@media': `screen and (min-width: ${breakpoints.sm}px)` },
+    lg: { '@media': `screen and (min-width: ${breakpoints.md}px)` },
+    xl: { '@media': `screen and (min-width: ${breakpoints.lg}px)` },
+    xxl: { '@media': `screen and (min-width: ${breakpoints.xl}px)` },
+    xxxl: { '@media': `screen and (min-width: ${breakpoints.xxl}px)` },
   },
-  defaultCondition: 'mobile',
+  defaultCondition: 'sm',
   properties: {
     alignItems: flexAlignment,
     alignSelf: flexAlignment,

src/nft/hooks/useIsMobile.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 const isClient = typeof window === 'object'
 
 function getIsMobile() {
-  return isClient ? window.innerWidth < breakpoints.tabletSm : false
+  return isClient ? window.innerWidth < breakpoints.sm : false
 }
 
 export function useIsMobile(): boolean {