Merge branch 'master' into rename-sdkwells

BeanstalkFarms · Jul 17, 2023 · 43474f3 · 43474f3
2 parents d54466a + 467ee77
commit 43474f3
Show file tree

Hide file tree

Showing 49 changed files with 16,797 additions and 474 deletions.
diff --git a/projects/dex-ui/src/breakpoints.ts b/projects/dex-ui/src/breakpoints.ts
@@ -0,0 +1,3 @@
+export const size = {
+    mobile: '769px',
+}
diff --git a/projects/dex-ui/src/components/BottomDrawer.tsx b/projects/dex-ui/src/components/BottomDrawer.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import { FC } from "src/types";
+import styled from "styled-components";
+import { BodyXS } from "./Typography";
+import x from "src/assets/images/x.svg";
+import { ImageButton } from "./ImageButton";
+import { size } from "src/breakpoints";
+
+interface Composition {
+  Header: typeof Header;
+  Body: typeof Body;
+  Footer: typeof Footer;
+  Row: typeof Row;
+  Key: typeof Key;
+  Value: typeof Value;
+}
+
+type Props = {
+  showDrawer: boolean;
+  headerText?:
+    | string
+    | number
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | React.ReactFragment
+    | React.ReactPortal;
+  toggleDrawer?: (isDrawerOpen: boolean) => void;
+};
+
+export const BottomDrawer: FC<Props> & Composition = ({ children, showDrawer, headerText, toggleDrawer }) => {
+  return (
+    <>
+      <Container showDrawer={showDrawer} data-trace="true">
+        <Header>
+          {headerText}
+          <ImageButton src={x} alt="Close drawer" size={10} onClick={() => toggleDrawer!(false)} />
+        </Header>
+        {children}
+      </Container>
+      <Background showDrawer={showDrawer} onClick={() => toggleDrawer!(false)} />
+    </>
+  );
+};
+
+const Background = styled.div<Props>`
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  z-index: 9995;
+  transition: all 0.3s ease-in-out;
+  opacity: ${({ showDrawer }) => (showDrawer ? "1" : "0")};
+  display: ${({ showDrawer }) => (showDrawer ? "flex" : "none")};
+`;
+
+const Container = styled.div<Props>`
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  width: 100vw;
+  left: 0;
+  transition: all 0.3s ease-in-out;
+  bottom: ${({ showDrawer }) => (showDrawer ? "0" : "-100%")};
+  outline: 0.5px solid #9ca3af;
+  outline-offset: -0.5px;
+  z-index: 9996;
+  @media (min-width: ${size.mobile}) {
+    display: none;
+  }
+`;
+const Header = styled.div`
+  background-color: #f9f8f6;
+  border-bottom: 0.5px solid #9ca3af;
+  display: flex;
+  flex-direction: row;
+  padding: 8px 12px;
+  justify-content: space-between;
+`;
+const Body = styled.div`
+  display: flex;
+  ${BodyXS}
+  flex-direction: column;
+  background-color: #fff;
+  flex: 2;
+  padding: 12px 12px;
+  gap: 8px;
+`;
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 12px 16px;
+  background-color: #fff;
+  border-top: 0.5px solid #9ca3af;
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  ${BodyXS}
+`;
+const Key = styled.div`
+  color: #4b5563;
+`;
+const Value = styled.div`
+  display: flex;
+  flex: 2;
+  justify-content: flex-end;
+`;
+
+BottomDrawer.Header = Header;
+BottomDrawer.Body = Body;
+BottomDrawer.Footer = Footer;
+BottomDrawer.Row = Row;
+BottomDrawer.Key = Key;
+BottomDrawer.Value = Value;
diff --git a/projects/dex-ui/src/components/Checkbox.tsx b/projects/dex-ui/src/components/Checkbox.tsx
@@ -1,6 +1,8 @@
 import { FC } from "src/types";
 import React from "react";
 import styled from "styled-components";
+import { BodyXS } from "./Typography";
+import { size } from "src/breakpoints";
 
 type Props = {
   label?: string;
@@ -62,6 +64,10 @@ const StyledCheckboxContainer = styled.div<CheckboxProps>`
   position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
   top: ${(props) => (props.mode === "checkOnly" ? "0px" : "2px")};
   cursor: pointer;
+  @media (max-width: ${size.mobile}) {
+    width: 14px;
+    height: 14px;
+  }
 `;
 
 const Checkmark = styled.div<CheckboxProps>`
@@ -77,6 +83,10 @@ const Checkmark = styled.div<CheckboxProps>`
   filter: ${(props) => (props.checkboxColor ? "brightness(100%);" : "brightness(0%);")}
   opacity: ${(props) => (props.checked ? "1" : "0")};
   z-index: 2;
+  @media (max-width: ${size.mobile}) {
+    width: 7px;
+    height: 7px;
+  }
 `;
 
 const HoverCheckmark = styled.div<CheckboxProps>`
@@ -95,6 +105,10 @@ const HoverCheckmark = styled.div<CheckboxProps>`
     filter: brightness(50%);
   }
   z-index: 1;
+  @media (max-width: ${size.mobile}) {
+    width: 7px;
+    height: 7px;
+  }
 `;
 
 const CheckboxText = styled.div<CheckboxProps>`
@@ -108,4 +122,7 @@ const CheckboxText = styled.div<CheckboxProps>`
     font-weight: 600;
   }
   user-select: none;
+  @media (max-width: ${size.mobile}) {
+    ${BodyXS}
+  }
 `;
diff --git a/projects/dex-ui/src/components/ExpandBox.tsx b/projects/dex-ui/src/components/ExpandBox.tsx
@@ -1,9 +1,11 @@
 import React, { Children, useCallback, useState, MouseEvent as ReactMouseEvent } from "react";
 import { FC } from "src/types";
 import styled from "styled-components";
-import { BodyCaps, BodyS } from "./Typography";
+import { BodyCaps, BodyS, BodyXS } from "./Typography";
 import { ImageButton } from "./ImageButton";
 import { ChevronDown } from "./Icons";
+import { BottomDrawer } from "./BottomDrawer";
+import { size } from "src/breakpoints";
 
 interface Composition {
   Header: typeof Header;
@@ -17,8 +19,9 @@ interface Composition {
 type Props = {
   width?: number;
   open?: boolean;
+  drawerHeaderText?: string;
 };
-export const ExpandBox: FC<Props> & Composition = ({ width = 432, children }) => {
+export const ExpandBox: FC<Props> & Composition = ({ children, drawerHeaderText }) => {
   const [open, setOpen] = useState(false);
   const [header, body] = Children.toArray(children);
   if (!header || !body) throw new Error("ExpandBox must have two children, Header and Boxy");
@@ -32,7 +35,10 @@ export const ExpandBox: FC<Props> & Composition = ({ width = 432, children }) =>
   );
 
   return (
-    <Container width={width} open={open} onClick={toggle} data-trace="true">
+    <Container open={open} onClick={toggle} data-trace="true">
+      <BottomDrawer showDrawer={open} headerText={drawerHeaderText || header} toggleDrawer={setOpen}>
+        {body}
+      </BottomDrawer>
       <Header id="header" open={open}>
         {header}
         <ImageButton
@@ -44,8 +50,7 @@ export const ExpandBox: FC<Props> & Composition = ({ width = 432, children }) =>
           alt="Click to expand this box and learn how to earn yield"
         />
       </Header>
-
-      {open && body}
+      {open && <BodyContainer>{body}</BodyContainer>}
     </Container>
   );
 };
@@ -57,8 +62,6 @@ const Container = styled.div<Props>`
   border-left: 0.5px solid #9ca3af;
   border-right: 0.5px solid #9ca3af;
   border-bottom: ${(p) => (p.open ? "0.5px" : "0px")} solid #9caeaf;
-  width: ${(p) => p.width}px;
-  min-width: ${(p) => p.width}px;
   cursor: pointer;
   :hover {
     border-top: 0.5px solid #46b955;
@@ -79,15 +82,24 @@ const Header = styled.div<Props>`
   :hover {
     border-bottom: 0.5px solid ${(p) => (!p.open ? "#46b955" : "#9ca3af")};
   }
+
+  @media (max-width: ${size.mobile}) {
+    padding: 8px;
+  }
 `;
 const Body = styled.div`
   display: flex;
   flex-direction: column;
   background-color: #fff;
-  flex: 2;
   padding: 20px 16px;
   gap: 8px;
 `;
+
+const BodyContainer = styled.div`
+  @media (max-width: ${size.mobile}) {
+    display: none;
+  }
+`;
 const Footer = styled.div`
   display: flex;
   flex-direction: row;
@@ -115,7 +127,12 @@ const UserHeader = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
-  ${BodyCaps}
+  ${BodyXS}
+  text-transform: uppercase;
+
+  @media (min-width: ${size.mobile}) {
+    ${BodyCaps}
+  }
 `;
 
 ExpandBox.Header = UserHeader;

diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Discord, Github, Twitter } from "../Icons";
+import { size } from "src/breakpoints";
 
 export const Footer = () => (
   <Container>
@@ -21,13 +22,19 @@ export const Footer = () => (
 );
 
 const Container = styled.footer`
-  display: flex;
+  display: none;
   flex-direction: row;
   box-sizing: border-box;
   border: 1px solid black;
-  min-height: 72px;
+  height: 56px;
+  min-height: 56px;
   width: 100vw;
   align-items: stretch;
+  @media (min-width: ${size.mobile}) {
+    display: flex;
+    height: 72px;
+    min-height: 72px;
+  }
 `;
 
 const Box = styled.a`