refactor: styleguide rules on SendIPFSTransaction page (#2320)

ArkEcosystem · Jul 1, 2020 · 0029254 · 0029254
1 parent 24de032
commit 0029254
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.stories.tsx b/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.stories.tsx
@@ -33,7 +33,7 @@ export const Default = () => {
 		},
 	];
 	return (
-		<div className="mt-15">
+		<div>
 			<SendIPFSTransaction assets={assets} />
 		</div>
 	);

diff --git a/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.tsx b/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.tsx
@@ -25,12 +25,12 @@ export const FirstStep = ({ assets = [] }: any) => {
 	}, [register]);
 
 	return (
-		<section data-testid="SendIPFSTransaction__step--first" className="space-y-8">
+		<section data-testid="SendIPFSTransaction__step--first">
 			<div>
 				<h1 className="mb-0">IPFS</h1>
 				<p className="text-theme-neutral-dark">Store an IPFS hasn on the network</p>
 			</div>
-			<div className="grid grid-flow-row gap-2">
+			<div className="mt-4 grid grid-flow-row gap-2">
 				<TransactionDetail border={false} label="Network">
 					<SelectAsset assets={assets} />
 				</TransactionDetail>
@@ -46,7 +46,7 @@ export const FirstStep = ({ assets = [] }: any) => {
 				<TransactionDetail border={false} label="Hash">
 					<Input name="hash" />
 				</TransactionDetail>
-				<TransactionDetail border={false} label="Fee ARK">
+				<TransactionDetail border={false} label="Fee ARK" className="pb-0">
 					<InputFee selectionBarState={selectionBarState} defaultValue={25} min={1} max={100} step={1} />
 				</TransactionDetail>
 			</div>
@@ -55,12 +55,12 @@ export const FirstStep = ({ assets = [] }: any) => {
 };
 
 export const SecondStep = () => (
-	<section data-testid="SendIPFSTransaction__step--second" className="space-y-8">
+	<section data-testid="SendIPFSTransaction__step--second">
 		<div>
 			<h1 className="mb-0">Transaction Review</h1>
 			<p className="text-theme-neutral-dark">Check the information again before voting</p>
 		</div>
-		<div className="grid grid-flow-row gap-2">
+		<div className="mt-4 grid grid-flow-row gap-2">
 			<TransactionDetail
 				border={false}
 				label="Network"
@@ -124,8 +124,8 @@ export const ThirdStep = () => {
 			<div>
 				<h1 className="mb-0">Passphrase</h1>
 				<p className="text-theme-neutral-dark">Confirm your password to continue</p>
-				<div className="grid grid-flow-row gap-2">
-					<TransactionDetail border={false} label="Your password">
+				<div className="mt-4 grid grid-flow-row gap-2">
+					<TransactionDetail border={false} label="Your password" className="pb-0">
 						<InputPassword name="passphras" />
 					</TransactionDetail>
 				</div>
@@ -141,6 +141,7 @@ export const FourthStep = () => (
 		</TransactionDetail>
 		<TransactionDetail
 			label="Amount"
+			className="pb-0"
 			extra={
 				<div className="ml-1 text-theme-danger">
 					<Circle className="bg-theme-background border-theme-danger-200" size="large">
@@ -181,7 +182,7 @@ export const SendIPFSTransaction = ({ onCopy, onSubmit, assets }: Props) => {
 				<Tabs activeId={activeTab}>
 					<StepIndicator size={4} activeIndex={activeTab} />
 
-					<div className="mt-10">
+					<div className="mt-8">
 						<TabPanel tabId={1}>
 							<FirstStep assets={assets} />
 						</TabPanel>
@@ -195,7 +196,7 @@ export const SendIPFSTransaction = ({ onCopy, onSubmit, assets }: Props) => {
 							<FourthStep />
 						</TabPanel>
 
-						<div className="flex justify-start mt-6 space-x-2">
+						<div className="flex justify-end mt-8 space-x-2">
 							{activeTab < 4 && (
 								<>
 									<Button

diff --git a/...ins/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap b/...ins/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap
@@ -27,13 +27,12 @@ exports[`SendIPFSTransaction should render 1`] = `
           />
         </ul>
         <div
-          class="mt-10"
+          class="mt-8"
         >
           <div
             data-testid="tab-pabel__active-panel"
           >
             <section
-              class="space-y-8"
               data-testid="SendIPFSTransaction__step--first"
             >
               <div>
@@ -49,7 +48,7 @@ exports[`SendIPFSTransaction should render 1`] = `
                 </p>
               </div>
               <div
-                class="grid grid-flow-row gap-2"
+                class="mt-4 grid grid-flow-row gap-2"
               >
                 <div
                   class="flex items-center py-4 true "
@@ -190,7 +189,7 @@ exports[`SendIPFSTransaction should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="flex items-center py-4 true "
+                  class="flex items-center py-4 true pb-0"
                 >
                   <div
                     class="flex-1"
@@ -291,7 +290,7 @@ exports[`SendIPFSTransaction should render 1`] = `
             </section>
           </div>
           <div
-            class="flex justify-start mt-6 space-x-2"
+            class="flex justify-end mt-8 space-x-2"
           >
             <button
               class="sc-AxjAm hQuXai"
@@ -321,7 +320,6 @@ exports[`SendIPFSTransaction should render 1`] = `
 exports[`SendIPFSTransaction should render 1st step 1`] = `
 <DocumentFragment>
   <section
-    class="space-y-8"
     data-testid="SendIPFSTransaction__step--first"
   >
     <div>
@@ -337,7 +335,7 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
       </p>
     </div>
     <div
-      class="grid grid-flow-row gap-2"
+      class="mt-4 grid grid-flow-row gap-2"
     >
       <div
         class="flex items-center py-4 true "
@@ -478,7 +476,7 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
         </div>
       </div>
       <div
-        class="flex items-center py-4 true "
+        class="flex items-center py-4 true pb-0"
       >
         <div
           class="flex-1"
@@ -583,7 +581,6 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
 exports[`SendIPFSTransaction should render 2nd step 1`] = `
 <DocumentFragment>
   <section
-    class="space-y-8"
     data-testid="SendIPFSTransaction__step--second"
   >
     <div>
@@ -599,7 +596,7 @@ exports[`SendIPFSTransaction should render 2nd step 1`] = `
       </p>
     </div>
     <div
-      class="grid grid-flow-row gap-2"
+      class="mt-4 grid grid-flow-row gap-2"
     >
       <div
         class="flex items-center py-4 true "
@@ -857,10 +854,10 @@ exports[`SendIPFSTransaction should render 3rd step 1`] = `
         Confirm your password to continue
       </p>
       <div
-        class="grid grid-flow-row gap-2"
+        class="mt-4 grid grid-flow-row gap-2"
       >
         <div
-          class="flex items-center py-4 true "
+          class="flex items-center py-4 true pb-0"
         >
           <div
             class="flex-1"
@@ -1163,7 +1160,7 @@ exports[`SendIPFSTransaction should render 4th step 1`] = `
           </div>
         </div>
         <div
-          class="flex items-center py-4 border-t border-dashed border-theme-neutral-300 "
+          class="flex items-center py-4 border-t border-dashed border-theme-neutral-300 pb-0"
         >
           <div
             class="flex-1"