refactor: adjust paddings in Section component (#3430)

ArkEcosystem · Mar 3, 2021 · 4a97c83 · 4a97c83
1 parent 7198943
commit 4a97c83
Show file tree

Hide file tree

Showing 55 changed files with 3,683 additions and 3,413 deletions.
diff --git a/src/app/__snapshots__/App.test.tsx.snap b/src/app/__snapshots__/App.test.tsx.snap
@@ -47,10 +47,10 @@ exports[`App should close splash screen if not e2e 1`] = `
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="mx-auto w-72"
@@ -291,10 +291,10 @@ exports[`App should render application error if the app fails to boot 1`] = `
         class="flex flex-col flex-1"
       >
         <div
-          class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+          class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
         >
           <div
-            class="container py-16 px-14 mx-auto "
+            class="container px-10 mx-auto"
           >
             <div
               class="mx-auto w-64 lg:w-128"
@@ -384,10 +384,10 @@ exports[`App should render mock 1`] = `
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="mx-auto w-72"
@@ -636,10 +636,10 @@ exports[`App should render splash screen 1`] = `
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="mx-auto w-72"
@@ -883,10 +883,10 @@ exports[`App should render the offline screen if there is no internet connection
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="sm:mx-auto sm:w-full sm:max-w-md"
@@ -966,10 +966,10 @@ exports[`App should render welcome screen after splash screen 1`] = `
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="mx-auto w-72"
@@ -1218,10 +1218,10 @@ exports[`App shouldn't migrate profiles 1`] = `
           class="flex flex-col flex-1"
         >
           <div
-            class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
+            class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
           >
             <div
-              class="container py-16 px-14 mx-auto "
+              class="container px-10 mx-auto"
             >
               <div
                 class="mx-auto w-72"

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -8,8 +8,8 @@ type Props = {
 
 export const Header = ({ title, subtitle, extra }: Props) => (
 	<div className="flex justify-between items-end bg-theme-background">
-		<div>
-			<h1 className="mb-0 md:text-4xl" data-testid="header__title">
+		<div className="space-y-4">
+			<h1 className="mb-0 text-4xl" data-testid="header__title">
 				{title}
 			</h1>
 			{subtitle && (

diff --git a/src/app/components/Header/__snapshots__/Header.test.tsx.snap b/src/app/components/Header/__snapshots__/Header.test.tsx.snap
@@ -5,9 +5,11 @@ exports[`Header should render an header 1`] = `
   <div
     class="flex justify-between items-end bg-theme-background"
   >
-    <div>
+    <div
+      class="space-y-4"
+    >
       <h1
-        class="mb-0 md:text-4xl"
+        class="mb-0 text-4xl"
         data-testid="header__title"
       >
         Header test
@@ -22,9 +24,11 @@ exports[`Header should render an header with a subtitle 1`] = `
   <div
     class="flex justify-between items-end bg-theme-background"
   >
-    <div>
+    <div
+      class="space-y-4"
+    >
       <h1
-        class="mb-0 md:text-4xl"
+        class="mb-0 text-4xl"
         data-testid="header__title"
       >
         Header test
@@ -45,9 +49,11 @@ exports[`Header should render an header with extra 1`] = `
   <div
     class="flex justify-between items-end bg-theme-background"
   >
-    <div>
+    <div
+      class="space-y-4"
+    >
       <h1
-        class="mb-0 md:text-4xl"
+        class="mb-0 text-4xl"
         data-testid="header__title"
       >
         Header test

diff --git a/src/app/components/Layout/components/Section/Section.test.tsx b/src/app/components/Layout/components/Section/Section.test.tsx
@@ -15,4 +15,10 @@ describe("Section", () => {
 		expect(container).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
+
+	it("should render with border", () => {
+		const { container, asFragment } = render(<Section border />);
+		expect(container).toBeTruthy();
+		expect(asFragment()).toMatchSnapshot();
+	});
 });
diff --git a/src/app/components/Layout/components/Section/Section.tsx b/src/app/components/Layout/components/Section/Section.tsx
@@ -1,25 +1,41 @@
+import cn from "classnames";
 import React from "react";
 import tw, { css, styled } from "twin.macro";
 
 type SectionProps = {
 	children: React.ReactNode;
 	backgroundColor?: string;
+	border?: boolean;
 	className?: string;
 	innerClassName?: string;
 };
 
-const SectionWrapper = styled.div<{ backgroundColor?: string }>`
-	${tw`w-full`}
+const SectionWrapper = styled.div<{ backgroundColor?: string; border?: boolean }>`
+	${tw`w-full py-4 first:pt-8 last:pb-8`};
+
 	${({ backgroundColor }) =>
+		backgroundColor &&
 		css`
 			& {
-				background-color var(${backgroundColor});
+				background-color: var(${backgroundColor});
 			}
 		`};
+
+	${({ border }) =>
+		border && [
+			tw`border-b border-theme-secondary-300 dark:border-theme-secondary-800`,
+			css`
+				&.hasBorder + & {
+					${tw`pt-8`}
+				}
+			`,
+		]};
+
+	${({ backgroundColor, border }) => (backgroundColor ? tw`py-8` : border ? tw`pb-8` : "")};
 `;
 
-export const Section = ({ children, backgroundColor, className, innerClassName }: SectionProps) => (
-	<SectionWrapper backgroundColor={backgroundColor} className={className}>
-		<div className={`container py-16 px-14 mx-auto ${innerClassName || ""}`}>{children}</div>
+export const Section = ({ children, backgroundColor, border, className, innerClassName }: SectionProps) => (
+	<SectionWrapper backgroundColor={backgroundColor} border={border} className={cn(className, { hasBorder: border })}>
+		<div className={cn("container px-10 mx-auto", innerClassName)}>{children}</div>
 	</SectionWrapper>
 );
diff --git a/src/app/components/Layout/components/Section/__snapshots__/Section.test.tsx.snap b/src/app/components/Layout/components/Section/__snapshots__/Section.test.tsx.snap
@@ -3,10 +3,22 @@
 exports[`Section should render 1`] = `
 <DocumentFragment>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section should render with border 1`] = `
+<DocumentFragment>
+  <div
+    class="Section__SectionWrapper-sc-8cjvre-0 gGdSDT hasBorder"
+  >
+    <div
+      class="container px-10 mx-auto"
     />
   </div>
 </DocumentFragment>
@@ -15,10 +27,10 @@ exports[`Section should render 1`] = `
 exports[`Section should render with custom background color 1`] = `
 <DocumentFragment>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 kXEPyr"
+    class="Section__SectionWrapper-sc-8cjvre-0 dgHHTG"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     />
   </div>
 </DocumentFragment>

diff --git a/src/app/components/Layout/index.tsx b/src/app/components/Layout/index.tsx
@@ -1,4 +1,2 @@
-import { Page } from "./components/Page";
-import { Section } from "./components/Section";
-
-export { Page, Section };
+export * from "./components/Page";
+export * from "./components/Section";
diff --git a/src/domains/contact/pages/Contacts/__snapshots__/Contacts.test.tsx.snap b/src/domains/contact/pages/Contacts/__snapshots__/Contacts.test.tsx.snap
@@ -272,17 +272,19 @@ exports[`Contacts with contacts should render with contacts 1`] = `
       class="flex flex-col flex-1"
     >
       <div
-        class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
+        class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
       >
         <div
-          class="container py-16 px-14 mx-auto "
+          class="container px-10 mx-auto"
         >
           <div
             class="flex justify-between items-end bg-theme-background"
           >
-            <div>
+            <div
+              class="space-y-4"
+            >
               <h1
-                class="mb-0 md:text-4xl"
+                class="mb-0 text-4xl"
                 data-testid="header__title"
               >
                 My Contacts
@@ -345,10 +347,10 @@ exports[`Contacts with contacts should render with contacts 1`] = `
         </div>
       </div>
       <div
-        class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
+        class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex-1"
       >
         <div
-          class="container py-16 px-14 mx-auto "
+          class="container px-10 mx-auto"
         >
           <div
             class="w-full"
@@ -1292,17 +1294,19 @@ exports[`Contacts without contacts should render empty 1`] = `
       class="flex flex-col flex-1"
     >
       <div
-        class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
+        class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
       >
         <div
-          class="container py-16 px-14 mx-auto "
+          class="container px-10 mx-auto"
         >
           <div
             class="flex justify-between items-end bg-theme-background"
           >
-            <div>
+            <div
+              class="space-y-4"
+            >
               <h1
-                class="mb-0 md:text-4xl"
+                class="mb-0 text-4xl"
                 data-testid="header__title"
               >
                 My Contacts
@@ -1335,10 +1339,10 @@ exports[`Contacts without contacts should render empty 1`] = `
         </div>
       </div>
       <div
-        class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
+        class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex-1"
       >
         <div
-          class="container py-16 px-14 mx-auto "
+          class="container px-10 mx-auto"
         >
           <div
             class="text-center"

diff --git a/src/domains/dashboard/components/PortfolioChart/__snapshots__/PortfolioChart.test.tsx.snap b/src/domains/dashboard/components/PortfolioChart/__snapshots__/PortfolioChart.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`PortfolioChart should render 1`] = `
 <div>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     >
       <div
         class="-mb-2 text-4xl font-bold"
@@ -125,10 +125,10 @@ exports[`PortfolioChart should render hidden 1`] = `<div />`;
 exports[`PortfolioChart should render with balance 1`] = `
 <div>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     >
       <div
         class="-mb-2 text-4xl font-bold"

diff --git a/src/domains/dashboard/components/Transactions/Transactions.tsx b/src/domains/dashboard/components/Transactions/Transactions.tsx
@@ -95,7 +95,7 @@ export const Transactions = memo(
 		}
 
 		return (
-			<Section className="flex-1" data-testid="dashboard__transactions-view">
+			<Section data-testid="dashboard__transactions-view">
 				<div className="flex relative justify-between">
 					<div className="mb-8 text-4xl font-bold">{t("DASHBOARD.TRANSACTION_HISTORY.TITLE")}</div>
 					<FilterTransactions

diff --git a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Transactions should fetch more transactions 1`] = `
 <DocumentFragment>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     >
       <div
         class="flex relative justify-between"
@@ -1536,10 +1536,10 @@ exports[`Transactions should fetch more transactions 1`] = `
 exports[`Transactions should open detail modal on transaction row click 1`] = `
 <DocumentFragment>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     >
       <div
         class="flex relative justify-between"
@@ -2433,10 +2433,10 @@ exports[`Transactions should open detail modal on transaction row click 1`] = `
 exports[`Transactions should render 1`] = `
 <DocumentFragment>
   <div
-    class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
+    class="Section__SectionWrapper-sc-8cjvre-0 kJTPww"
   >
     <div
-      class="container py-16 px-14 mx-auto "
+      class="container px-10 mx-auto"
     >
       <div
         class="flex relative justify-between"