From 85d00ca3054aec67f8f03a5da7c92e98a1f2fc6e Mon Sep 17 00:00:00 2001
From: okbel <curciobel@gmail.com>
Date: Tue, 1 Jun 2021 09:42:45 -0300
Subject: [PATCH] More design updates

---
 .../CheckoutSidebarView/CheckoutSidebarView.tsx      |  2 +-
 .../PaymentMethodView/PaymentMethodView.module.css   |  2 +-
 .../checkout/PaymentMethodView/PaymentMethodView.tsx | 12 ++++++------
 .../checkout/ShippingView/ShippingView.module.css    |  2 +-
 components/checkout/ShippingView/ShippingView.tsx    |  4 ++--
 components/ui/Button/Button.module.css               |  6 +++++-
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
index c9dab3d83..bff5e347d 100644
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -180,7 +180,7 @@ const CheckoutSidebarView: FC = () => {
               {/* <Button Component="a" width="100%">
                 Confirm Purchase
               </Button> */}
-              <Button Component="a" width="100%" variant="ghost">
+              <Button Component="a" width="100%" variant="ghost" disabled>
                 Continue
               </Button>
             </div>
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
index 2e90f873d..f08bd528f 100644
--- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
@@ -12,7 +12,7 @@
 
 .fieldset .input,
 .fieldset .select {
-  @apply p-2 border border-accent-3 w-full text-sm font-normal;
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
 }
 
 .fieldset .input:focus,
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
index 383e8f014..28c1d0ff7 100644
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -53,7 +53,7 @@ const PaymentMethodView: FC = () => {
               <input className={s.input} />
             </div>
           </div>
-          <hr className="border-accent-3 my-6" />
+          <hr className="border-accent-2 my-6" />
           <div className="grid gap-3 grid-flow-row grid-cols-12">
             <div className={cn(s.fieldset, 'col-span-6')}>
               <label className={s.label}>First Name</label>
@@ -92,13 +92,13 @@ const PaymentMethodView: FC = () => {
               <option>Hong Kong</option>
             </select>
           </div>
-          <div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 ">
-            <Button Component="a" width="100%" variant="ghost">
-              Continue
-            </Button>
-          </div>
         </div>
       </div>
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+        <Button Component="a" width="100%" variant="ghost">
+          Continue
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css
index 7b8c40ef6..d2005a8b0 100644
--- a/components/checkout/ShippingView/ShippingView.module.css
+++ b/components/checkout/ShippingView/ShippingView.module.css
@@ -12,7 +12,7 @@
 
 .fieldset .input,
 .fieldset .select {
-  @apply p-2 border border-accent-3 w-full text-sm font-normal;
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
 }
 
 .fieldset .input:focus,
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
index 24c7513bb..ccc27112a 100644
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -45,7 +45,7 @@ const PaymentMethodView: FC = () => {
               Use a different shipping address
             </span>
           </div>
-          <hr className="border-accent-3 my-6" />
+          <hr className="border-accent-2 my-6" />
           <div className="grid gap-3 grid-flow-row grid-cols-12">
             <div className={cn(s.fieldset, 'col-span-6')}>
               <label className={s.label}>First Name</label>
@@ -86,7 +86,7 @@ const PaymentMethodView: FC = () => {
           </div>
         </div>
       </div>
-      <div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 p-6">
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
         <Button Component="a" width="100%" variant="ghost">
           Continue
         </Button>
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 4735d316a..35ba2cf27 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -27,7 +27,11 @@
 }
 
 .ghost {
-  @apply border border-accent-3 bg-accent-0 text-accent-9 text-sm;
+  @apply border border-accent-2 bg-accent-0 text-accent-9 text-sm;
+}
+
+.ghost:hover {
+  @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
 .disabled,