Adds info drawer that adjusts sidebar view based on screensize (#251)

renderer/intl/locales/en-US.json

@@ -349,6 +349,9 @@
   "Ld49Lh": {
     "message": "What would you like to name this account? This name is only visible to you."
   },
+  "Lv0zJu": {
+    "message": "Details"
+  },
   "M+isB1": {
     "message": "Bridge Provider"
   },

renderer/layouts/WithExplanatorySidebar.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { ReactNode } from "react";
 
 import { COLORS } from "@/ui/colors";
+import InfoDrawer from "@/ui/InfoDrawer/InfoDrawer";
 
 type Props = {
   heading: ReactNode;
@@ -18,7 +19,7 @@ export function WithExplanatorySidebar({
   children,
 }: Props) {
   return (
-    <Flex gap={16}>
+    <Flex gap={{ base: 4, lg: 16 }}>
       <Box
         maxW={{
           base: "100%",
@@ -28,20 +29,17 @@ export function WithExplanatorySidebar({
       >
         {children}
       </Box>
-      <Box
-        display={{
-          base: "none",
-          lg: "block",
-        }}
-      >
-        <Heading fontSize="2xl" mb={4}>
-          {heading}
-        </Heading>
-        <Description>{description}</Description>
-        <Box mt={8}>
-          <Image src={imgSrc} alt="" />
+      <InfoDrawer>
+        <Box>
+          <Heading fontSize="2xl" mb={4}>
+            {heading}
+          </Heading>
+          <Description>{description}</Description>
+          <Box mt={8}>
+            <Image src={imgSrc} alt="" />
+          </Box>
         </Box>
-      </Box>
+      </InfoDrawer>
     </Flex>
   );
 }

renderer/pages/send/index.tsx

@@ -1,12 +1,10 @@
-import { Heading, Text, Flex, Box } from "@chakra-ui/react";
-import Image from "next/image";
+import { Heading } from "@chakra-ui/react";
 import { defineMessages, useIntl } from "react-intl";
 
 import { SendAssetsForm } from "@/components/SendAssetsForm/SendAssetsForm";
 import treasureChest from "@/images/treasure-chest.svg";
 import MainLayout from "@/layouts/MainLayout";
-import { COLORS } from "@/ui/colors";
-
+import { WithExplanatorySidebar } from "@/layouts/WithExplanatorySidebar";
 const messages = defineMessages({
   heading: {
     defaultMessage: "Send",
@@ -28,26 +26,13 @@ export default function Send() {
       <Heading fontSize={28} lineHeight="160%" mb={5}>
         {formatMessage(messages.heading)}
       </Heading>
-      <Flex gap={16}>
-        <Box maxW="592px" w="100%">
-          <SendAssetsForm />
-        </Box>
-        <Box>
-          <Heading fontSize="2xl" mb={4}>
-            {formatMessage(messages.aboutFees)}
-          </Heading>
-          <Text
-            fontSize="sm"
-            maxW="340px"
-            mb={8}
-            color={COLORS.GRAY_MEDIUM}
-            _dark={{ color: COLORS.DARK_MODE.GRAY_LIGHT }}
-          >
-            {formatMessage(messages.feeAmount)}
-          </Text>
-          <Image src={treasureChest} alt="" />
-        </Box>
-      </Flex>
+      <WithExplanatorySidebar
+        heading={formatMessage(messages.aboutFees)}
+        description={formatMessage(messages.feeAmount)}
+        imgSrc={treasureChest}
+      >
+        <SendAssetsForm />
+      </WithExplanatorySidebar>
     </MainLayout>
   );
 }

renderer/ui/InfoDrawer/InfoDrawer.tsx

@@ -0,0 +1,85 @@
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerOverlay,
+  useDisclosure,
+  Box,
+  useBreakpointValue,
+  IconButton,
+} from "@chakra-ui/react";
+import React from "react";
+import { MdInfo } from "react-icons/md";
+import { defineMessages, useIntl } from "react-intl";
+
+import { PillButton } from "@/ui/PillButton/PillButton";
+
+const messages = defineMessages({
+  details: {
+    defaultMessage: "Details",
+  },
+});
+
+interface InfoButtonProps {
+  children: React.ReactNode;
+}
+
+const InfoButton: React.FC<InfoButtonProps> = ({ children }) => {
+  const { formatMessage } = useIntl();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const displayMode = useBreakpointValue({
+    base: "sm",
+    md: "md",
+    lg: "lg",
+  });
+
+  // Large display mode shows no drawer
+  if (displayMode === "lg") {
+    return <Box>{children}</Box>;
+  }
+
+  return (
+    <>
+      {displayMode === "sm" ? (
+        <IconButton
+          icon={<MdInfo />}
+          aria-label={formatMessage(messages.details)}
+          onClick={onOpen}
+          rounded="full"
+          variant="outline"
+          borderColor="black"
+          _hover={{
+            bg: "rgba(0, 0, 0, 0.05)",
+          }}
+        />
+      ) : (
+        <PillButton
+          size="sm"
+          height="fit-content"
+          variant="inverted"
+          borderWidth={1}
+          gap={2}
+          onClick={onOpen}
+        >
+          <MdInfo />
+          {formatMessage(messages.details)}
+        </PillButton>
+      )}
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
+        <DrawerOverlay />
+        <DrawerContent px={4} pt={16}>
+          <DrawerCloseButton
+            mt={1}
+            borderRadius="full"
+            borderWidth={1}
+            borderColor="black"
+          />
+          <DrawerBody>{children}</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default InfoButton;