fix(alert): Spacing (#155)

pancakeswap · Jan 27, 2021 · d897ce8 · d897ce8
1 parent 4f5ca8b
commit d897ce8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/src/__tests__/components/alert.test.tsx b/src/__tests__/components/alert.test.tsx
@@ -8,10 +8,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-eCssSg sc-fubCfw cntkGK bbUrQL"
+        class="sc-eCssSg sc-fubCfw cntkGK jErUdc"
       >
         <div
-          class="sc-jSgupP jOSdzM"
+          class="sc-jSgupP jjCMEU"
         >
           <svg
             class="sc-bdfBwQ gcQKnf"
@@ -26,7 +26,7 @@ it("renders correctly", () => {
           </svg>
         </div>
         <div
-          class="sc-gKsewC eRYALI"
+          class="sc-gKsewC bkaskd"
         >
           <div
             class="sc-gsTCUz cFAeYW"

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -45,29 +45,30 @@ const getIcon = (variant: AlertProps["variant"] = variants.INFO) => {
 };
 
 const IconLabel = styled.div<ThemedIconLabel>`
-  align-items: ${({ hasDescription }) => (hasDescription ? "start" : "center")};
   background-color: ${getThemeColor};
   border-radius: 16px 0 0 16px;
   color: ${({ theme }) => theme.alert.background};
-  display: flex;
-  flex: none;
-  justify-content: center;
-  min-height: 56px;
   padding: 12px;
 `;
 
-const Details = styled.div`
+const withHandlerSpacing = 32 + 12 + 8; // button size + inner spacing + handler position
+const Details = styled.div<{ hasHandler: boolean }>`
   flex: 1;
-  padding: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+  padding-right: ${({ hasHandler }) => (hasHandler ? `${withHandlerSpacing}px` : "12px")};
+  padding-top: 12px;
 `;
 
 const CloseHandler = styled.div`
   border-radius: 0 16px 16px 0;
-  padding: 12px 12px 12px 0;
+  right: 8px;
+  position: absolute;
+  top: 8px;
 `;
 
-const StyledAlert = styled(Flex)<{ hasDescription: boolean }>`
-  align-items: ${({ hasDescription }) => (hasDescription ? "stretch" : "center")};
+const StyledAlert = styled(Flex)`
+  position: relative;
   background-color: ${({ theme }) => theme.alert.background};
   border-radius: 16px;
   box-shadow: 0px 20px 36px -8px rgba(14, 14, 44, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.05);
@@ -77,11 +78,11 @@ const Alert: React.FC<AlertProps> = ({ title, description, variant, onClick }) =
   const Icon = getIcon(variant);
 
   return (
-    <StyledAlert hasDescription={!!description}>
+    <StyledAlert>
       <IconLabel variant={variant} hasDescription={!!description}>
         <Icon color="currentColor" width="24px" />
       </IconLabel>
-      <Details>
+      <Details hasHandler={!!onClick}>
         <Text bold>{title}</Text>
         {description && <Text as="p">{description}</Text>}
       </Details>

diff --git a/src/components/Alert/index.stories.tsx b/src/components/Alert/index.stories.tsx
@@ -17,7 +17,7 @@ export default {
 
 export const Default: React.FC = () => {
   return (
-    <div style={{ padding: "32px", width: "375px" }}>
+    <div style={{ padding: "32px", width: "400px" }}>
       <Row>
         <Alert title="Info" description="A description of the info alert" />
       </Row>
@@ -38,15 +38,20 @@ const handleClick = noop;
 
 export const WithHandler: React.FC = () => {
   return (
-    <div style={{ padding: "32px", width: "375px" }}>
+    <div style={{ padding: "32px", width: "400px" }}>
       <Row>
         <Alert onClick={handleClick} title="Info" />
       </Row>
       <Row>
-        <Alert onClick={handleClick} title="Success" variant="success" />
+        <Alert
+          onClick={handleClick}
+          title="Success"
+          description="A description of the success alert"
+          variant="success"
+        />
       </Row>
       <Row>
-        <Alert onClick={handleClick} title="Danger" variant="danger" />
+        <Alert onClick={handleClick} title="Danger A description of the warning alert" variant="danger" />
       </Row>
       <Row>
         <Alert onClick={handleClick} title="Warning" variant="warning" />