trilitech · OKendigelyan · Sep 17, 2024 · Sep 17, 2024
diff --git 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,15 +56,15 @@ export const Layout = () => {
         gridArea="sidebar"
         paddingX={{
           base: "12px",
-          lg: "0",
+          md: "0",
         }}
       >
         <Sidebar />
       </GridItem>
       <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,17 +9,17 @@ 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">
       <CardBody
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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];