fix: new layout spacing and margins

Author: malessani

.do/deploy.template.yaml

@@ -232,7 +232,7 @@ const Checkout: React.FC<Props> = ({
 }
 
 const Sidebar = styled.div`
-  ${tw`flex flex-col min-h-full p-5 lg:pl-20 lg:pr-10 lg:pt-10 xl:pl-48 bg-gray-50`}
+  ${tw`flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12 bg-gray-50`}
 `
 const SummaryWrapper = styled.div`
   ${tw`flex-1`}

components/composite/Checkout/index.tsx

@@ -95,7 +95,7 @@ export const CheckoutSkeleton: React.FC = () => {
 }
 
 const Sidebar = styled.div`
-  ${tw`flex flex-col min-h-full p-5 lg:pl-20 lg:pr-10 pt-10 xl:pl-48`}
+  ${tw`flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12`}
 `
 const SummaryWrapper = styled.div`
   ${tw`flex-1`}

components/composite/CheckoutSkeleton/index.tsx

@@ -6,7 +6,7 @@ import { CheckCss } from "components/ui/form/CheckBox"
 import { RadioCss } from "components/ui/form/RadioButton"
 
 export const PaymentWrapper = styled.div`
-  ${tw`will-change-transform text-black border border-gray-300 mb-5 p-3 rounded bg-gray-50 relative transition duration-200 ease-in hover:border-primary group-hover:(cursor-pointer) group-last:mb-0`}
+  ${tw`will-change-transform text-black border border-gray-300 mb-5 p-4 rounded bg-gray-50 relative transition duration-200 ease-in hover:border-primary group-hover:(cursor-pointer) group-first:mt-6 group-last:mb-0`}
 
   label {
     ${tw`group-hover:(cursor-pointer)`}

components/composite/StepPayment/styled.tsx

@@ -200,7 +200,7 @@ export const StepShipping: React.FC<Props> = () => {
                             autoSelectSingleShippingMethod={autoSelectCallback}
                             loader={
                               <div className="animate-pulse">
-                                <div className="w-1/2 h-5 bg-gray-200" />
+                                <div className="w-1/2 h-5 bg-gray-200 mt-6" />
                                 <div className="h-20 my-5 bg-gray-200" />
                               </div>
                             }

components/composite/StepShipping/index.tsx

@@ -5,7 +5,7 @@ import tw from "twin.macro"
 import { RadioCss } from "components/ui/form/RadioButton"
 
 export const ShippingWrapper = styled.div`
-  ${tw`mb-5`}
+  ${tw`mb-5 mt-6`}
   :not(:first-of-type) {
     ${tw`pt-5 mt-5 border-dashed border-t-2`}
   }

components/composite/StepShipping/styled.tsx

@@ -90,7 +90,7 @@ const AccordionIcon = styled.div`
   }
 `
 const AccordionBody = styled.div`
-  ${tw`max-h-0 transition duration-200 ease-in opacity-0 lg:ml-8`}
+  ${tw`max-h-0 transition duration-200 ease-in opacity-0`}
   .active & {
     ${tw`max-h-full opacity-100`}
   }

components/ui/Accordion/index.tsx

@@ -25,7 +25,7 @@ interface WrapperProps {
 }
 
 const Wrapper = styled.div<WrapperProps>`
-  ${tw`p-5 lg:p-10 lg:pr-20 xl:pr-48 bg-gray-50 bg-white shadow-sm`}
+  ${tw`p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12 bg-gray-50 bg-white shadow-sm`}
   ${({ rounded }) => (rounded ? tw`rounded-md` : null)}
   ${({ fullHeight }) => (fullHeight ? tw`min-h-full ` : null)}
 `