From 549645fe2761a21824607ffebf409fc52d6cb359 Mon Sep 17 00:00:00 2001
From: Oleg Chendighelean <oleg.chendighelean@trili.tech>
Date: Tue, 17 Sep 2024 15:33:22 +0100
Subject: [PATCH] Update breakpoints

---
 apps/web/src/Layout.tsx                       | 20 ++++++-------
 .../components/AccountCard/AccountBalance.tsx |  4 +--
 .../AccountCard/AccountCard.stories.tsx       |  2 +-
 .../components/AccountCard/AccountCard.tsx    |  2 +-
 .../AddressAutocomplete/Suggestions.tsx       |  2 +-
 .../components/BackButton/BaseBackButton.tsx  |  4 +--
 .../CloseButton/BaseCloseButton.tsx           |  4 +--
 .../ColorSchemeModeToggle.tsx                 |  2 +-
 .../components/EmptyMessage/EmptyMessage.tsx  |  4 +--
 apps/web/src/components/Footer/Footer.tsx     |  4 +--
 apps/web/src/components/Header/Actions.tsx    |  4 +--
 apps/web/src/components/Header/Header.tsx     |  8 +++---
 apps/web/src/components/Main/Main.tsx         |  8 +++---
 .../Menu/AddressBookMenu/AddressBookMenu.tsx  |  2 +-
 .../src/components/Menu/AppsMenu/AppsMenu.tsx |  2 +-
 .../components/Menu/DrawerContentWrapper.tsx  |  2 +-
 .../Menu/ErrorLogsMenu/ErrorLogsMenu.tsx      |  2 +-
 apps/web/src/components/Menu/GenericMenu.tsx  |  4 +--
 .../Menu/NetworkMenu/NetworkMenu.tsx          |  2 +-
 .../components/MnemonicWord/MnemonicWord.tsx  | 10 +++----
 apps/web/src/components/Navbar/Navbar.tsx     |  6 ++--
 .../OnboardOptions/OnboardOptions.tsx         |  2 +-
 .../RecordSeedphraseModal.tsx                 |  2 +-
 .../src/components/TabSwitch/TabSwitch.tsx    |  2 +-
 apps/web/src/styles/theme.ts                  | 28 +++++++++----------
 apps/web/src/views/NFTs/NFTDrawer.tsx         |  2 +-
 .../NFTDrawerCard/AttributesAccordion.tsx     |  6 ++--
 .../NFTs/NFTDrawerCard/NFTDrawerCard.tsx      | 10 +++----
 apps/web/src/views/NFTs/NFTs.tsx              |  6 ++--
 apps/web/src/views/Tokens/RecipientsPage.tsx  |  2 +-
 apps/web/src/views/Tokens/Token.tsx           |  8 +++---
 apps/web/src/views/Welcome/Welcome.tsx        | 16 +++++------
 32 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/apps/web/src/Layout.tsx b/apps/web/src/Layout.tsx
index 2892324237..0ed3ff98e6 100644
--- a/apps/web/src/Layout.tsx
+++ b/apps/web/src/Layout.tsx
@@ -13,19 +13,19 @@ export const Layout = () => {
   return (
     <Grid
       justifyContent="center"
-      gridGap={{ lg: "20px", base: "12px" }}
-      gridTemplateRows={{ base: "auto auto 1fr auto", lg: "auto auto 1fr auto" }}
-      gridTemplateColumns={{ base: "1fr", lg: "340px minmax(min-content, 1060px)" }}
+      gridGap={{ md: "20px", base: "12px" }}
+      gridTemplateRows={{ base: "auto auto 1fr auto", md: "auto auto 1fr auto" }}
+      gridTemplateColumns={{ base: "1fr", md: "340px minmax(min-content, 1060px)" }}
       gridTemplateAreas={{
         base: '"header" "sidebar" "main" "footer" "nav"',
-        lg: `"header header" "sidebar nav" "sidebar main" "footer main"`,
+        md: `"header header" "sidebar nav" "sidebar main" "footer main"`,
       }}
-      height={{ lg: "100vh", base: "100dvh" }}
-      padding={{ lg: "20px 46px 0", base: "54px 0 0" }}
+      height={{ md: "100vh", base: "100dvh" }}
+      padding={{ md: "20px 46px 0", base: "54px 0 0" }}
       data-testid="signed-in-layout"
     >
       <GridItem
-        position={{ base: "fixed", lg: "static" }}
+        position={{ base: "fixed", md: "static" }}
         zIndex={{ base: 2 }}
         top={{ base: 0 }}
         left={{ base: 0 }}
@@ -47,7 +47,7 @@ export const Layout = () => {
         gridArea="main"
         paddingX={{
           base: "12px",
-          lg: "0",
+          md: "0",
         }}
       >
         <Main />
@@ -56,7 +56,7 @@ export const Layout = () => {
         gridArea="sidebar"
         paddingX={{
           base: "12px",
-          lg: "0",
+          md: "0",
         }}
       >
         <Sidebar />
@@ -64,7 +64,7 @@ export const Layout = () => {
       <GridItem
         gridArea="footer"
         marginTop={{ base: "20px" }}
-        marginBottom={{ base: "20px", lg: "46px" }}
+        marginBottom={{ base: "20px", md: "46px" }}
       >
         <Footer />
       </GridItem>
diff --git a/apps/web/src/components/AccountCard/AccountBalance.tsx b/apps/web/src/components/AccountCard/AccountBalance.tsx
index 6c8cd7b0a0..1a6caa071d 100644
--- a/apps/web/src/components/AccountCard/AccountBalance.tsx
+++ b/apps/web/src/components/AccountCard/AccountBalance.tsx
@@ -27,7 +27,7 @@ export const AccountBalance = () => {
         <Text
           display={{
             base: "none",
-            lg: "block",
+            md: "block",
           }}
           color={color("600")}
           fontWeight="600"
@@ -49,7 +49,7 @@ export const AccountBalance = () => {
       <Flex
         alignItems="center"
         justifyContent="space-between"
-        marginTop={{ base: "20px", lg: "40px" }}
+        marginTop={{ base: "20px", md: "40px" }}
       >
         <IconButtonWithText
           as={Link}
diff --git a/apps/web/src/components/AccountCard/AccountCard.stories.tsx b/apps/web/src/components/AccountCard/AccountCard.stories.tsx
index b2146d780d..ad486a1826 100644
--- a/apps/web/src/components/AccountCard/AccountCard.stories.tsx
+++ b/apps/web/src/components/AccountCard/AccountCard.stories.tsx
@@ -44,7 +44,7 @@ const meta: Meta<StoryProps> = {
 
     return (
       <Provider store={store}>
-        <Box width="100%" maxWidth={{ lg: "600px" }}>
+        <Box width="100%" maxWidth={{ md: "600px" }}>
           <AccountCard />
         </Box>
       </Provider>
diff --git a/apps/web/src/components/AccountCard/AccountCard.tsx b/apps/web/src/components/AccountCard/AccountCard.tsx
index a2578ed810..dc9aaeb246 100644
--- a/apps/web/src/components/AccountCard/AccountCard.tsx
+++ b/apps/web/src/components/AccountCard/AccountCard.tsx
@@ -17,7 +17,7 @@ export const AccountCard = () => {
     <Card
       gap={{
         base: "16px",
-        lg: "20px",
+        md: "20px",
       }}
       padding="8px 8px 20px 8px"
       borderRadius="40px"
diff --git a/apps/web/src/components/AddressAutocomplete/Suggestions.tsx b/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
index 32f1a4953a..b4130894e9 100644
--- a/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
+++ b/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
@@ -30,7 +30,7 @@ export const Suggestions = ({
       border="1px solid"
       borderColor={color("400")}
       borderRadius="8px"
-      transform={{ base: "translateY(calc(-100% - 66px))", lg: "unset" }}
+      transform={{ base: "translateY(calc(-100% - 66px))", md: "unset" }}
       data-testid="suggestions-list"
       listStyleType="none"
     >
diff --git a/apps/web/src/components/BackButton/BaseBackButton.tsx b/apps/web/src/components/BackButton/BaseBackButton.tsx
index 7631a517ea..83e4dfbebb 100644
--- a/apps/web/src/components/BackButton/BaseBackButton.tsx
+++ b/apps/web/src/components/BackButton/BaseBackButton.tsx
@@ -7,11 +7,11 @@ export const BaseBackButton = (props: Omit<IconButtonProps, "aria-label">) => (
     position="absolute"
     top={{
       base: "12px",
-      lg: "18px",
+      md: "18px",
     }}
     left={{
       base: "12px",
-      lg: "18px",
+      md: "18px",
     }}
     padding="0"
     aria-label="Go back"
diff --git a/apps/web/src/components/CloseButton/BaseCloseButton.tsx b/apps/web/src/components/CloseButton/BaseCloseButton.tsx
index e6ec6cef98..0604627f39 100644
--- a/apps/web/src/components/CloseButton/BaseCloseButton.tsx
+++ b/apps/web/src/components/CloseButton/BaseCloseButton.tsx
@@ -7,11 +7,11 @@ export const BaseCloseButton = (props: Omit<IconButtonProps, "aria-label">) => (
     position="absolute"
     top={{
       base: "12px",
-      lg: "18px",
+      md: "18px",
     }}
     right={{
       base: "12px",
-      lg: "18px",
+      md: "18px",
     }}
     padding="0"
     icon={<CloseIcon width="24px" height="24px" />}
diff --git a/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx b/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
index 963cb278ab..60aca752e1 100644
--- a/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
+++ b/apps/web/src/components/ColorSchemeModeToggle/ColorSchemeModeToggle.tsx
@@ -11,7 +11,7 @@ export const ColorSchemeModeToggle = () => {
       gap="14px"
       display={{
         base: "none",
-        lg: "flex",
+        md: "flex",
       }}
     >
       {switchText}
diff --git a/apps/web/src/components/EmptyMessage/EmptyMessage.tsx b/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
index 98924266be..f21fcc660b 100644
--- a/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
+++ b/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
@@ -30,7 +30,7 @@ export const EmptyMessage = ({
       data-testid="empty-state-message"
       {...props}
     >
-      <Text color={color("900")} fontWeight="600" size={{ base: "xl", lg: "2xl" }}>
+      <Text color={color("900")} fontWeight="600" size={{ base: "xl", md: "2xl" }}>
         {title}
       </Text>
       {subtitle && (
@@ -39,7 +39,7 @@ export const EmptyMessage = ({
           whiteSpace="pre-line"
           size={{
             base: "md",
-            lg: "lg",
+            md: "lg",
           }}
         >
           {subtitle}
diff --git a/apps/web/src/components/Footer/Footer.tsx b/apps/web/src/components/Footer/Footer.tsx
index 1f92082532..58705694c3 100644
--- a/apps/web/src/components/Footer/Footer.tsx
+++ b/apps/web/src/components/Footer/Footer.tsx
@@ -9,11 +9,11 @@ export const Footer = () => {
     <Flex
       justifyContent={{
         base: "center",
-        lg: "flex-start",
+        md: "flex-start",
       }}
       fontSize={{
         base: "sm",
-        lg: "md",
+        md: "md",
       }}
       lineHeight="1"
     >
diff --git a/apps/web/src/components/Header/Actions.tsx b/apps/web/src/components/Header/Actions.tsx
index d65bacac24..fe875644d9 100644
--- a/apps/web/src/components/Header/Actions.tsx
+++ b/apps/web/src/components/Header/Actions.tsx
@@ -18,7 +18,7 @@ export const Actions = () => {
             as={MenuIcon}
             width={{
               base: "18px",
-              lg: "24px",
+              md: "24px",
             }}
             height="auto"
           />
@@ -27,7 +27,7 @@ export const Actions = () => {
         onClick={() => openWith(<Menu />)}
         size={{
           base: "md",
-          lg: "lg",
+          md: "lg",
         }}
         variant="iconButtonSolid"
       />
diff --git a/apps/web/src/components/Header/Header.tsx b/apps/web/src/components/Header/Header.tsx
index ccda161ead..dc61e205fd 100644
--- a/apps/web/src/components/Header/Header.tsx
+++ b/apps/web/src/components/Header/Header.tsx
@@ -23,7 +23,7 @@ export const Header = () => {
       width: "42px",
       height: "42px",
     },
-    lg: {
+    md: {
       width: "48px",
       height: "48px",
     },
@@ -52,11 +52,11 @@ export const Header = () => {
     <Card
       justifyContent="space-between"
       flexDirection="row"
-      padding={{ base: "6px 12px", lg: "10px 20px" }}
-      borderRadius={{ base: 0, lg: "100px" }}
+      padding={{ base: "6px 12px", md: "10px 20px" }}
+      borderRadius={{ base: 0, md: "100px" }}
       boxShadow={{
         base: "0px 4px 10px 0px rgba(45, 55, 72, 0.06)",
-        lg: "2px 4px 12px 0px rgba(45, 55, 72, 0.05)",
+        md: "2px 4px 12px 0px rgba(45, 55, 72, 0.05)",
       }}
     >
       {mode(<Icon as={LogoLightIcon} {...size} />, <Icon as={LogoDarkIcon} {...size} />)(colorMode)}
diff --git a/apps/web/src/components/Main/Main.tsx b/apps/web/src/components/Main/Main.tsx
index ddb9525b50..9f7ee63858 100644
--- a/apps/web/src/components/Main/Main.tsx
+++ b/apps/web/src/components/Main/Main.tsx
@@ -9,9 +9,9 @@ import { Tokens } from "../../views/Tokens";
 export const Main = () => (
   <Box
     overflowY="auto"
-    height={{ lg: "calc(100% + 29px)" }}
-    marginTop={{ lg: "-75px" }}
-    paddingTop={{ lg: "75px" }}
+    height={{ md: "calc(100% + 29px)" }}
+    marginTop={{ md: "-75px" }}
+    paddingTop={{ md: "75px" }}
     borderRadius="30px"
   >
     <Card minHeight="full" borderRadius="30px">
@@ -19,7 +19,7 @@ export const Main = () => (
         as={Flex}
         padding={{
           base: "18px",
-          lg: "40px",
+          md: "40px",
         }}
       >
         <Routes>
diff --git a/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx b/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx
index 498b999dc7..6aaed72656 100644
--- a/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx
+++ b/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx
@@ -106,7 +106,7 @@ export const AddressBookMenu = () => {
       >
         Add Contact
       </Button>
-      <Divider marginTop={{ base: "36px", lg: "40px" }} />
+      <Divider marginTop={{ base: "36px", md: "40px" }} />
       {contacts.length ? (
         <VStack
           alignItems="flex-start"
diff --git a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
index 8a43458f19..9cf8113f9d 100644
--- a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
+++ b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
@@ -21,7 +21,7 @@ export const AppsMenu = () => {
       >
         Connect
       </Button>
-      <Divider marginTop={{ base: "36px", lg: "40px" }} />
+      <Divider marginTop={{ base: "36px", md: "40px" }} />
       <BeaconPeers />
     </DrawerContentWrapper>
   );
diff --git a/apps/web/src/components/Menu/DrawerContentWrapper.tsx b/apps/web/src/components/Menu/DrawerContentWrapper.tsx
index b566b33dbe..6bcc86a029 100644
--- a/apps/web/src/components/Menu/DrawerContentWrapper.tsx
+++ b/apps/web/src/components/Menu/DrawerContentWrapper.tsx
@@ -19,7 +19,7 @@ export const DrawerContentWrapper = ({
     <>
       <DrawerBackButton />
       <DrawerCloseButton />
-      <DrawerBody as={Flex} flexDirection="column" paddingTop={{ base: "78px", lg: "90px" }}>
+      <DrawerBody as={Flex} flexDirection="column" paddingTop={{ base: "78px", md: "90px" }}>
         {title && (
           <Heading color={color("900")} size="2xl">
             {title}
diff --git a/apps/web/src/components/Menu/ErrorLogsMenu/ErrorLogsMenu.tsx b/apps/web/src/components/Menu/ErrorLogsMenu/ErrorLogsMenu.tsx
index b5dc06cb80..b25692467a 100644
--- a/apps/web/src/components/Menu/ErrorLogsMenu/ErrorLogsMenu.tsx
+++ b/apps/web/src/components/Menu/ErrorLogsMenu/ErrorLogsMenu.tsx
@@ -33,7 +33,7 @@ export const ErrorLogsMenu = () => {
           </Button>
         </Flex>
       )}
-      <Divider marginTop={{ base: "36px", lg: "40px" }} />
+      <Divider marginTop={{ base: "36px", md: "40px" }} />
       {errors.length ? (
         <Box overflowY="auto">
           <VStack
diff --git a/apps/web/src/components/Menu/GenericMenu.tsx b/apps/web/src/components/Menu/GenericMenu.tsx
index 6384f4318d..e8794a9a96 100644
--- a/apps/web/src/components/Menu/GenericMenu.tsx
+++ b/apps/web/src/components/Menu/GenericMenu.tsx
@@ -12,8 +12,8 @@ type GenericMenuProps = {
 export const GenericMenu = ({ title, menuItems }: GenericMenuProps) => (
   <DrawerContentWrapper title={title}>
     <VStack
-      gap={{ base: "18px", lg: "24px" }}
-      marginTop={title ? { base: "36px", lg: "40px" } : 0}
+      gap={{ base: "18px", md: "24px" }}
+      marginTop={title ? { base: "36px", md: "40px" } : 0}
       divider={<Divider />}
       spacing="0"
     >
diff --git a/apps/web/src/components/Menu/NetworkMenu/NetworkMenu.tsx b/apps/web/src/components/Menu/NetworkMenu/NetworkMenu.tsx
index 47481a57e2..604e1c47fc 100644
--- a/apps/web/src/components/Menu/NetworkMenu/NetworkMenu.tsx
+++ b/apps/web/src/components/Menu/NetworkMenu/NetworkMenu.tsx
@@ -106,7 +106,7 @@ export const NetworkMenu = () => {
       >
         Add New
       </Button>
-      <Divider marginTop={{ base: "36px", lg: "40px" }} />
+      <Divider marginTop={{ base: "36px", md: "40px" }} />
       <RadioGroup onChange={selectNetwork} value={currentNetwork.name}>
         <VStack
           alignItems="flex-start"
diff --git a/apps/web/src/components/MnemonicWord/MnemonicWord.tsx b/apps/web/src/components/MnemonicWord/MnemonicWord.tsx
index 5909ed6986..5454be18e0 100644
--- a/apps/web/src/components/MnemonicWord/MnemonicWord.tsx
+++ b/apps/web/src/components/MnemonicWord/MnemonicWord.tsx
@@ -18,11 +18,11 @@ export const MnemonicWord = ({ index, word, autocompleteProps, ...props }: Mnemo
       <Text
         position="absolute"
         zIndex={1}
-        marginTop={{ lg: "11px", base: "8px" }}
-        marginLeft={{ lg: "16px", base: "10px" }}
+        marginTop={{ md: "11px", base: "8px" }}
+        marginLeft={{ md: "16px", base: "10px" }}
         color={color("300")}
         textAlign="right"
-        size={{ lg: "lg", base: "xs" }}
+        size={{ md: "lg", base: "xs" }}
       >
         {String(index + 1).padStart(2, "0")}.
       </Text>
@@ -31,8 +31,8 @@ export const MnemonicWord = ({ index, word, autocompleteProps, ...props }: Mnemo
         <Text
           alignSelf="center"
           paddingRight="10px"
-          paddingLeft={{ base: "30px", lg: "48px" }}
-          fontSize={{ base: "xs", lg: "lg" }}
+          paddingLeft={{ base: "30px", md: "48px" }}
+          fontSize={{ base: "xs", md: "lg" }}
           fontWeight="medium"
         >
           {word}
diff --git a/apps/web/src/components/Navbar/Navbar.tsx b/apps/web/src/components/Navbar/Navbar.tsx
index 2a35be3991..502ef979bf 100644
--- a/apps/web/src/components/Navbar/Navbar.tsx
+++ b/apps/web/src/components/Navbar/Navbar.tsx
@@ -24,12 +24,12 @@ const tabs = [
 export const Navbar = () => (
   <Card
     zIndex={1}
-    padding={{ base: "6px 12px", lg: "10px" }}
+    padding={{ base: "6px 12px", md: "10px" }}
     opacity={0.95}
-    borderRadius={{ base: 0, lg: "100px" }}
+    borderRadius={{ base: 0, md: "100px" }}
     boxShadow={{
       base: "-2px -4px 10px 0px rgba(45, 55, 72, 0.06)",
-      lg: "2px 4px 12px 0px rgba(45, 55, 72, 0.05)",
+      md: "2px 4px 12px 0px rgba(45, 55, 72, 0.05)",
     }}
   >
     <Tabs defaultIndex={-1} isFitted variant="solid-rounded">
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
index 82e19951b6..8ec26e02d8 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
@@ -41,7 +41,7 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
       </Heading>
 
       <Center flexDirection="column" gap="36px" width="full" height="full">
-        <Flex gap={{ base: "24px", lg: "30px" }} marginTop="30px" color={color("white", "black")}>
+        <Flex gap={{ base: "24px", md: "30px" }} marginTop="30px" color={color("white", "black")}>
           <AccountTileWrapper>
             <OnboardWithGoogleButton />
           </AccountTileWrapper>
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx b/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
index 3a7a6a3aa2..d0504bdf59 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/RecordSeedphraseModal.tsx
@@ -54,7 +54,7 @@ export const RecordSeedphraseModal = ({ seedPhrase }: CopySeedphraseModalProps)
             <MnemonicWord
               key={index}
               as={Flex}
-              height={{ lg: "48px", base: "34px" }}
+              height={{ md: "48px", base: "34px" }}
               color="black"
               border="1px solid"
               borderWidth="1.5px"
diff --git a/apps/web/src/components/TabSwitch/TabSwitch.tsx b/apps/web/src/components/TabSwitch/TabSwitch.tsx
index 04467c865d..b78d2190fb 100644
--- a/apps/web/src/components/TabSwitch/TabSwitch.tsx
+++ b/apps/web/src/components/TabSwitch/TabSwitch.tsx
@@ -27,7 +27,7 @@ import { useColor } from "../../styles/useColor";
 export const TabSwitch = ({ options }: { options: string[] }) => {
   const color = useColor();
   const { selectedIndex, setSelectedIndex } = useTabsContext();
-  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const isMobile = useBreakpointValue({ base: true, md: false });
   const [isAccordionCollapsed, setIsAccordionCollapsed] = useState(true);
   const currentTab = options[selectedIndex];
 
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index 67caf812a2..431f0d5533 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -139,12 +139,12 @@ const theme = extendTheme({
         mnemonic: {
           field: {
             borderRadius: "34px",
-            height: { lg: "48px", base: "34px" },
+            height: { md: "48px", base: "34px" },
             border: "1px solid",
             background: "none",
             borderColor: "gray.100",
-            fontSize: { lg: "18px", base: "12px" },
-            paddingLeft: { base: "30px", lg: "50px" },
+            fontSize: { md: "18px", base: "12px" },
+            paddingLeft: { base: "30px", md: "50px" },
             paddingRight: "10px",
             _placeholder: {
               color: "gray.400",
@@ -489,16 +489,16 @@ const theme = extendTheme({
           width: "100%",
           minWidth: {
             base: "100%",
-            lg: "506px",
+            md: "506px",
           },
         },
         header: {
-          padding: { base: "12px", lg: "20px" },
+          padding: { base: "12px", md: "20px" },
         },
         body: {
           paddingTop: 0,
           paddingBottom: "20px",
-          paddingX: { base: "12px", lg: "30px" },
+          paddingX: { base: "12px", md: "30px" },
         },
       },
     },
@@ -506,7 +506,7 @@ const theme = extendTheme({
       sizes: {
         xl: {
           dialog: {
-            minWidth: { base: "100%", lg: "536px" },
+            minWidth: { base: "100%", md: "536px" },
             maxWidth: "100%",
             marginX: 0,
           },
@@ -524,24 +524,24 @@ const theme = extendTheme({
         dialog: {
           borderTopRightRadius: "30px",
           borderTopLeftRadius: "30px",
-          borderBottomRightRadius: { lg: "30px", base: 0 },
-          borderBottomLeftRadius: { lg: "30px", base: 0 },
+          borderBottomRightRadius: { md: "30px", base: 0 },
+          borderBottomLeftRadius: { md: "30px", base: 0 },
           background: "white",
           border: "1.5px solid",
           borderColor: "gray.100",
           padding: {
             base: "36px",
-            lg: "42px",
+            md: "42px",
           },
           marginBottom: {
-            lg: "auto",
+            md: "auto",
           },
           minWidth: {
             base: "100%",
-            lg: "508px",
+            md: "508px",
           },
           width: {
-            lg: "508px",
+            md: "508px",
           },
         },
         header: {
@@ -566,7 +566,7 @@ const theme = extendTheme({
       variants: {
         onboarding: {
           dialog: {
-            marginBottom: { base: 0, lg: "100px" },
+            marginBottom: { base: 0, md: "100px" },
           },
         },
       },
diff --git a/apps/web/src/views/NFTs/NFTDrawer.tsx b/apps/web/src/views/NFTs/NFTDrawer.tsx
index e907828296..e8cc1337d5 100644
--- a/apps/web/src/views/NFTs/NFTDrawer.tsx
+++ b/apps/web/src/views/NFTs/NFTDrawer.tsx
@@ -6,7 +6,7 @@ import { DrawerCloseButton } from "../../components/CloseButton";
 
 export const NFTDrawer = ({ nft }: { nft: NFTBalance }) => (
   <>
-    <DrawerHeader justifyContent="flex-end" display="flex" minHeight={{ base: "54px", lg: "70px" }}>
+    <DrawerHeader justifyContent="flex-end" display="flex" minHeight={{ base: "54px", md: "70px" }}>
       <DrawerCloseButton />
     </DrawerHeader>
     <DrawerBody>
diff --git a/apps/web/src/views/NFTs/NFTDrawerCard/AttributesAccordion.tsx b/apps/web/src/views/NFTs/NFTDrawerCard/AttributesAccordion.tsx
index 84e962292b..9c4e50f055 100644
--- a/apps/web/src/views/NFTs/NFTDrawerCard/AttributesAccordion.tsx
+++ b/apps/web/src/views/NFTs/NFTDrawerCard/AttributesAccordion.tsx
@@ -38,12 +38,12 @@ export const AttributesAccordion = ({
           <AccordionIcon />
         </AccordionButton>
         <AccordionPanel>
-          <Wrap spacing={{ base: "12px", lg: "10px" }}>
+          <Wrap spacing={{ base: "12px", md: "10px" }}>
             {attributes.map(attr => (
               <WrapItem key={attr.name} flex="1" data-testid="nft-attribute">
                 <Card
-                  width={{ lg: "142px", base: "165px" }}
-                  height={{ lg: "142px", base: "165px" }}
+                  width={{ md: "142px", base: "165px" }}
+                  height={{ md: "142px", base: "165px" }}
                   marginBottom="2px"
                   background={color("100")}
                 >
diff --git a/apps/web/src/views/NFTs/NFTDrawerCard/NFTDrawerCard.tsx b/apps/web/src/views/NFTs/NFTDrawerCard/NFTDrawerCard.tsx
index 38aa9767f0..281a1545e7 100644
--- a/apps/web/src/views/NFTs/NFTDrawerCard/NFTDrawerCard.tsx
+++ b/apps/web/src/views/NFTs/NFTDrawerCard/NFTDrawerCard.tsx
@@ -26,12 +26,12 @@ export const NFTDrawerCard = ({ nft }: { nft: NFTBalance }) => {
         <CardBody
           justifyContent="center"
           display="flex"
-          maxHeight={{ base: "366px", lg: "446px" }}
+          maxHeight={{ base: "366px", md: "446px" }}
           padding="0"
           aspectRatio={1}
         >
           <Square
-            maxHeight={{ base: "366px", lg: "446px" }}
+            maxHeight={{ base: "366px", md: "446px" }}
             background={color("50")}
             borderRadius="6px"
             size="full"
@@ -40,7 +40,7 @@ export const NFTDrawerCard = ({ nft }: { nft: NFTBalance }) => {
               <ReactPlayer data-testid="nft-video" loop playing url={url} />
             ) : (
               <Image
-                maxHeight={{ base: "366px", lg: "446px" }}
+                maxHeight={{ base: "366px", md: "446px" }}
                 borderRadius="6px"
                 objectFit="contain"
                 data-testid="nft-image"
@@ -77,9 +77,9 @@ export const NFTDrawerCard = ({ nft }: { nft: NFTBalance }) => {
 
       <AttributesAccordion marginTop="20px" nft={nft} />
 
-      <PropertiesAccordion marginTop={{ base: "24px", lg: "30px" }} nft={nft} />
+      <PropertiesAccordion marginTop={{ base: "24px", md: "30px" }} nft={nft} />
 
-      <JSONAccordion marginTop={{ base: "24px", lg: "30px" }} nft={nft} />
+      <JSONAccordion marginTop={{ base: "24px", md: "30px" }} nft={nft} />
     </Flex>
   );
 };
diff --git a/apps/web/src/views/NFTs/NFTs.tsx b/apps/web/src/views/NFTs/NFTs.tsx
index 12b41db85c..4f4c7e150d 100644
--- a/apps/web/src/views/NFTs/NFTs.tsx
+++ b/apps/web/src/views/NFTs/NFTs.tsx
@@ -21,12 +21,12 @@ export const NFTs = () => {
 
   const gridTemplateColumns = {
     base: "repeat(auto-fit, minmax(min(100%/2, max(157px, 100%/5)), 1fr))",
-    lg: "repeat(auto-fit, minmax(min(100%/2, max(236px, 100%/5)), 1fr))",
+    md: "repeat(auto-fit, minmax(min(100%/2, max(236px, 100%/5)), 1fr))",
   };
 
   return (
     <>
-      <Flex zIndex={1} flexDirection="column" flexGrow={1} gap={{ base: "12px", lg: "30px" }}>
+      <Flex zIndex={1} flexDirection="column" flexGrow={1} gap={{ base: "12px", md: "30px" }}>
         {nfts.length ? (
           <>
             <Flex justifyContent="space-between">
@@ -38,7 +38,7 @@ export const NFTs = () => {
             <SimpleGrid
               gridTemplateColumns={gridTemplateColumns}
               spacingX="12px"
-              spacingY={{ base: "18px", lg: "30px" }}
+              spacingY={{ base: "18px", md: "30px" }}
             >
               {nfts.map(nft => (
                 <NFTCard
diff --git a/apps/web/src/views/Tokens/RecipientsPage.tsx b/apps/web/src/views/Tokens/RecipientsPage.tsx
index 2020059b19..2bce7eadc4 100644
--- a/apps/web/src/views/Tokens/RecipientsPage.tsx
+++ b/apps/web/src/views/Tokens/RecipientsPage.tsx
@@ -17,7 +17,7 @@ import { AccountTile } from "../../components/AccountTile";
 
 export const RecipientsPage = () => {
   const accounts = useAppSelector(s => s.accounts.items);
-  const showAmount = useBreakpointValue({ base: false, lg: true });
+  const showAmount = useBreakpointValue({ base: false, md: true });
   const { goBack } = useDynamicModalContext();
   const getBalance = useGetAccountBalance();
 
diff --git a/apps/web/src/views/Tokens/Token.tsx b/apps/web/src/views/Tokens/Token.tsx
index e33c52f674..f9ff8e6382 100644
--- a/apps/web/src/views/Tokens/Token.tsx
+++ b/apps/web/src/views/Tokens/Token.tsx
@@ -24,14 +24,14 @@ export const Token = ({ token }: TokenProps) => {
   return (
     <Grid
       as="li"
-      gridRowGap={{ base: "18px", lg: "0" }}
+      gridRowGap={{ base: "18px", md: "0" }}
       gridTemplateColumns={{
         base: "auto",
-        lg: "1fr 1fr auto",
+        md: "1fr 1fr auto",
       }}
       gridTemplateAreas={{
         base: '"token token" "amount action"',
-        lg: '"token amount action"',
+        md: '"token amount action"',
       }}
       width="full"
       _first={{
@@ -43,7 +43,7 @@ export const Token = ({ token }: TokenProps) => {
       _notLast={{
         borderBottom: `1px solid ${color("100")}`,
       }}
-      paddingY={{ base: "18px", lg: "30px" }}
+      paddingY={{ base: "18px", md: "30px" }}
     >
       <Flex alignItems="center" flex="1" gridArea="token">
         <TokenIconWrapper>
diff --git a/apps/web/src/views/Welcome/Welcome.tsx b/apps/web/src/views/Welcome/Welcome.tsx
index 5661f488e3..efb4b48195 100644
--- a/apps/web/src/views/Welcome/Welcome.tsx
+++ b/apps/web/src/views/Welcome/Welcome.tsx
@@ -21,24 +21,24 @@ import { useColor } from "../../styles/useColor";
 
 export const Welcome = () => {
   const color = useColor();
-  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const isMobile = useBreakpointValue({ base: true, md: false });
   const { isOpen: isOnboarding } = useDynamicModalContext();
 
   return (
     <Grid
       justifyItems="center"
-      gridGap={{ base: "36px", lg: "60px" }}
-      gridTemplateRows={{ base: "130px auto", lg: "auto 444px auto" }}
+      gridGap={{ base: "36px", md: "60px" }}
+      gridTemplateRows={{ base: "130px auto", md: "auto 444px auto" }}
       gridTemplateAreas={{
         base: "'header' 'main'",
-        lg: `
+        md: `
      'header header header'
      'main main main'
      'copyright tezos-logo social'
     `,
       }}
       height="100vh"
-      padding={{ base: "24px 0 0 0", lg: "24px 46px 46px 46px" }}
+      padding={{ base: "24px 0 0 0", md: "24px 46px 46px 46px" }}
       data-testid="welcome-view"
     >
       <Flex
@@ -60,7 +60,7 @@ export const Welcome = () => {
       <Flex
         gridArea="main"
         display={isOnboarding ? "none" : "flex"}
-        width={{ base: "full", lg: "510px" }}
+        width={{ base: "full", md: "510px" }}
       >
         <Flex
           alignItems="center"
@@ -68,11 +68,11 @@ export const Welcome = () => {
           flexDirection="column"
           width="full"
           height="full"
-          padding={{ base: "36px 12px", lg: "36px 42px" }}
+          padding={{ base: "36px 12px", md: "36px 42px" }}
           border="1px solid"
           borderColor={color("100")}
           borderTopRadius="30px"
-          borderBottomRadius={{ base: 0, lg: "30px" }}
+          borderBottomRadius={{ base: 0, md: "30px" }}
           backgroundColor={color("white")}
         >
           <OnboardOptions>