feat: Add minWidth and headerBackground props to Modal (#26)

* feat: Add minWidth and headerBackground props to Modal * test: Modal tests updated
pancakeswap · Mar 23, 2021 · ba5d231 · ba5d231
1 parent 60d9b34
commit ba5d231
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx
@@ -12,10 +12,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-iBPRYJ gkOLPp"
+        class="sc-iBPRYJ bQXnUd"
       >
         <div
-          class="sc-fubCfw lbhyFh"
+          class="sc-fubCfw gpMxBN"
         >
           <div
             class="sc-dlfnbm sc-hKgILt sc-pFZIQ isWJdv dRpfYw ePMCIJ"

diff --git a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx
@@ -9,10 +9,10 @@ it("renders ConnectModal correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-fubCfw bVmofg"
+        class="sc-fubCfw cNFQaY"
       >
         <div
-          class="sc-pFZIQ QVCVy"
+          class="sc-pFZIQ fDnVSK"
         >
           <div
             class="sc-eCssSg sc-jSgupP sc-jrAGrp jnvqfy cjuMmG eYDuGd"
@@ -465,10 +465,10 @@ it("renders AccountModal correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-fubCfw bVmofg"
+        class="sc-fubCfw cNFQaY"
       >
         <div
-          class="sc-pFZIQ QVCVy"
+          class="sc-pFZIQ fDnVSK"
         >
           <div
             class="sc-eCssSg sc-jSgupP sc-jrAGrp jnvqfy cjuMmG eYDuGd"

diff --git a/packages/pancake-uikit/src/widgets/Modal/Modal.tsx b/packages/pancake-uikit/src/widgets/Modal/Modal.tsx
@@ -11,9 +11,11 @@ interface Props extends InjectedProps {
   hideCloseButton?: boolean;
   onBack?: () => void;
   bodyPadding?: string;
+  headerBackground?: string;
+  minWidth?: string;
 }
 
-const StyledModal = styled.div`
+const StyledModal = styled.div<{ minWidth: string }>`
   background: ${({ theme }) => theme.modal.background};
   box-shadow: 0px 20px 36px -8px rgba(14, 14, 44, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.05);
   border: 1px solid ${({ theme }) => theme.colors.borderColor};
@@ -23,17 +25,18 @@ const StyledModal = styled.div`
   overflow-y: auto;
   ${({ theme }) => theme.mediaQueries.xs} {
     width: auto;
-    min-width: 360px;
+    min-width: ${({ minWidth }) => minWidth};
     max-width: 100%;
   }
 `;
 
-const ModalHeader = styled.div`
+const ModalHeader = styled.div<{ background: string }>`
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e9eaeb;
   align-items: center;
   padding: 12px 24px;
+  background: ${({ background }) => background};
 `;
 
 const ModalTitle = styled(Flex)`
@@ -48,9 +51,11 @@ const Modal: React.FC<Props> = ({
   children,
   hideCloseButton = false,
   bodyPadding = "24px",
+  headerBackground = "transparent",
+  minWidth = "360px",
 }) => (
-  <StyledModal>
-    <ModalHeader>
+  <StyledModal minWidth={minWidth}>
+    <ModalHeader background={headerBackground}>
       <ModalTitle>
         {onBack && (
           <IconButton variant="text" onClick={onBack} area-label="go back" mr="8px">