Updated button styles (#61)

elasticpath · Sep 10, 2020 · 1ad9f0f · 1ad9f0f
1 parent 1b7be6a
commit 1ad9f0f
Show file tree

Hide file tree

Showing 17 changed files with 63 additions and 46 deletions.
diff --git a/src/AccountDropdown.scss b/src/AccountDropdown.scss
@@ -2,6 +2,7 @@
 @import './theme/common.scss';
 
 .accountdropdown {
+  width: 50px;
   position: relative;
 
   &__btn {

diff --git a/src/AccountDropdown.tsx b/src/AccountDropdown.tsx
@@ -63,7 +63,7 @@ export const AccountDropdown: React.FC = (props) => {
                   </Link>
                 </li>
                 <li className="accountdropdown__listitem accountdropdown__itembtns">
-                  <button className="epbtn --primary --fullwidth" type="button" onClick={logout}>
+                  <button className="epbtn --secondary --fullwidth" type="button" onClick={logout}>
                     {t('logout')}
                   </button>
                 </li>

diff --git a/src/AddressForm.scss b/src/AddressForm.scss
@@ -49,10 +49,6 @@
     color: $mainErrorColor;
   }
 
-  .epbtn {
-    width: 100px;
-  }
-
   .epbtn + .epbtn {
     margin-left: 10px;
   }

diff --git a/src/AddressForm.tsx b/src/AddressForm.tsx
@@ -279,7 +279,7 @@ export const AddressForm: React.FC<AddressFormParams> = (props) => {
               <button className="epbtn --bordered" type="button" onClick={handleClose}>
                 {t('cancel')}
               </button>
-              <button className="epbtn --primary" type="submit">
+              <button className="epbtn --secondary" type="submit">
                 {t('save')}
               </button>
             </div>

diff --git a/src/AppHeader.scss b/src/AppHeader.scss
@@ -68,7 +68,7 @@
     }
   }
 
-  @media (max-width: $mobileWidth) {
+  @media (max-width: $mobileWidth - 1px) {
     &__search {
       flex: 0;
     }
@@ -80,16 +80,20 @@
     &__accountm,
     &__search,
     &__language,
-    &__moltincartcontainer,
     &__account {
       margin-right: 10px;
     }
 
-    &__moltincartcontainer & {
+    &__moltincartcontainer {
+      margin: 0;
+    }
+
+      &__moltincartcontainer & {
       &__cartbtn.--bordered {
         border: none;
 
         &:hover {
+          border: none;
           background: transparent;
         }
       }
@@ -107,7 +111,7 @@
     }
   }
 
-  @media (min-width: $mobileWidth - 1px) {
+  @media (min-width: $mobileWidth) {
     &__cartbtn {
       padding: 10px 15px;
     }

diff --git a/src/AppHeader.tsx b/src/AppHeader.tsx
@@ -44,7 +44,7 @@ export const AppHeader: React.FC = () => {
           <LanguageDropdown />
         </div>
         <div className="appheader__moltincartcontainer">
-          <button className="appheader__cartbtn epbtn --bordered" aria-label={t('cart')} onClick={handleCartModal}>
+          <button className="epbtn --ghost appheader__cartbtn --bordered" aria-label={t('cart')} onClick={handleCartModal}>
             <span className="appheader__cartbtntxt">
               {t('cart')}
               {' ('}

diff --git a/src/DeleteAddressDialog.scss b/src/DeleteAddressDialog.scss
@@ -49,10 +49,6 @@
     color: $mainErrorColor;
   }
 
-  .epbtn {
-    width: 100px;
-  }
-
   .epbtn + .epbtn {
     margin-left: 10px;
   }

diff --git a/src/DeleteAddressDialog.tsx b/src/DeleteAddressDialog.tsx
@@ -37,7 +37,7 @@ export const DeleteAddressDialog: React.FC<DeleteAddressDialogParams> = (props)
         <button className="epbtn" type="button" onClick={handleCancelDelete}>
           {t('cancel')}
         </button>
-        <button className="epbtn --primary" type="button" onClick={onDeleteAddress}>
+        <button className="epbtn --secondary" type="button" onClick={onDeleteAddress}>
           {t('delete')}
         </button>
       </div>

diff --git a/src/Home.scss b/src/Home.scss
@@ -4,7 +4,6 @@
   $block: &;
 
   .epbtn {
-    min-width: 120px;
     white-space: nowrap;
   }
 

diff --git a/src/Home.tsx b/src/Home.tsx
@@ -38,7 +38,7 @@ export const Home: React.FC = () => {
             <h1 className="home__bannerheading">{t('home-1-heading')}</h1>
             <div className="home__bannertxt">
               <p>{t('home-1-content')}</p>
-              <button type="button" className="epbtn --primary">{t('learn-more')}</button>
+              <button type="button" className="epbtn --secondary">{t('learn-more')}</button>
             </div>
           </div>
         </div>
@@ -54,7 +54,7 @@ export const Home: React.FC = () => {
                     <p className="home__titlesmall">{t('home-2-subheading')}</p>
                     <p className="home__title">{t('home-2-heading')}</p>
                     <div className="home__goodsbtns">
-                      <button type="button" className="epbtn --primary">{t('learn-more')}</button>
+                      <button type="button" className="epbtn --secondary">{t('learn-more')}</button>
                     </div>
                   </div>
                   <ImageContainer imgUrl={productImage1} alt={productFileName1} imgClassName="home__goodsimage" />
@@ -66,7 +66,7 @@ export const Home: React.FC = () => {
                     <p className="home__titlesmall">{t('home-3-subheading')}</p>
                     <p className="home__title">{t('home-3-heading')}</p>
                     <p className="home__description">{t('home-3-content')}</p>
-                    <button type="button" className="epbtn --primary">{t('add-to-cart')}</button>
+                    <button type="button" className="epbtn --secondary">{t('add-to-cart')}</button>
                   </div>
                   <ImageContainer imgUrl={productImage2} alt={productFileName2} imgClassName="home__goodsimage" />
                 </div>
@@ -113,7 +113,7 @@ export const Home: React.FC = () => {
             <h2 className="home__bannerheading">{t('home-7-heading')}</h2>
             <div className="home__bannertxt">
               <p>{t('home-7-content')}</p>
-              <button type="button" className="epbtn --primary">{t('learn-more')}</button>
+              <button type="button" className="epbtn --secondary">{t('learn-more')}</button>
             </div>
           </div>
         </div>
@@ -173,7 +173,7 @@ export const Home: React.FC = () => {
                     <p className="home__description">{t('home-11-content-1')}</p>
                     <p className="home__description">{t('home-11-content-2')}</p>
                     <div className="home__goodsbtns">
-                      <button type="button" className="epbtn --primary">{t('bellvie-help')}</button>
+                      <button type="button" className="epbtn --secondary">{t('bellvie-help')}</button>
                     </div>
                   </div>
                 </div>
@@ -186,7 +186,7 @@ export const Home: React.FC = () => {
                     <p className="home__description">{t('home-12-content-1')}</p>
                     <p className="home__description">{t('home-12-content-2')}</p>
                     <div className="home__goodsbtns">
-                      <button type="button" className="epbtn --primary">{t('about')}</button>
+                      <button type="button" className="epbtn --secondary">{t('about')}</button>
                     </div>
                   </div>
                 </div>

diff --git a/src/LoginDialog.tsx b/src/LoginDialog.tsx
@@ -113,10 +113,10 @@ export const LoginDialog: React.FC<AppModalLoginMainProps> = (props) => {
               </div>
             </div>
             <div className="epform__group --btn-container">
-              <button className="epbtn --primary" id="login_modal_login_button" type="submit" disabled={isLoading}>
+              <button className="epbtn --secondary" id="login_modal_login_button" type="submit" disabled={isLoading}>
                 {t('login')}
               </button>
-              <Link to={registrationUrl} className="epbtn --primary" id="login_modal_register_button" onClick={registerNewUser}>
+              <Link to={registrationUrl} className="epbtn --secondary" id="login_modal_register_button" onClick={registerNewUser}>
                 {t('register')}
               </Link>
             </div>

diff --git a/src/Product.tsx b/src/Product.tsx
@@ -99,7 +99,7 @@ export const Product: React.FC = () => {
             <div className="product__moltinbtncontainer">
               {productId &&
                 <button
-                  className="epbtn --primary"
+                  className="epbtn --secondary"
                   onClick={handleAddToCart}
                 >{t('add-to-cart')}</button>
               }

diff --git a/src/Profile.tsx b/src/Profile.tsx
@@ -109,8 +109,8 @@ export const Profile: React.FC = (props) => {
                   </div>
                 </div>
                 <div className="epform__group">
-                  <button className="epbtn --primary" type="submit">{t('save')}</button>
-                  <button className="epbtn --primary" type="submit" onClick={handleHideForm}>{t('cancel')}</button>
+                  <button className="epbtn --secondary" type="submit">{t('save')}</button>
+                  <button className="epbtn --bordered" type="submit" onClick={handleHideForm}>{t('cancel')}</button>
                 </div>
               </form>
             </div>

diff --git a/src/Promotion.tsx b/src/Promotion.tsx
@@ -66,7 +66,7 @@ export const Promotion: React.FC<PromotionProps> = (props) => {
             </div>
           </div>
           <div className="epform__group --btn-container">
-            <button className="epbtn --bordered" type="submit" disabled={!values.promoCode}>
+            <button className="epbtn --ghost" type="submit" disabled={!values.promoCode}>
               {t('apply')}
             </button>
           </div>

diff --git a/src/RegistrationForm.tsx b/src/RegistrationForm.tsx
@@ -140,7 +140,7 @@ export const RegistrationForm: React.FC = (props) => {
             </div>
           </div>
           <div className="epform__group --btn-container">
-            <button className="epbtn --primary" id="registration_form_register_button" type="submit" disabled={isLoading}>
+            <button className="epbtn --secondary" id="registration_form_register_button" type="submit" disabled={isLoading}>
               {t('submit')}
             </button>
           </div>

diff --git a/src/index.scss b/src/index.scss
@@ -32,12 +32,12 @@ img, svg {
   position: relative;
   display: inline-block;
   text-align: center;
-  padding: 8px 10px;
   font-size: $sizeInitial;
-  background-color: white;
-  border: 1px solid transparent;
+  background-color: $mainBackgroundColor;
+  border: 1px solid $mainBackgroundColor;
   color: $btnColor;
   cursor: pointer;
+  padding: 10px 15px;
 
   &.--bordered {
     border: 1px solid $btnColor;
@@ -48,42 +48,60 @@ img, svg {
   }
 
   &.--primary {
-    background-color: $btnColor;
-    color: white;
+    background-color: $buttonActiveColor;
+    color: $mainNavigationColor;
+    border: 1px solid $buttonActiveColor;
 
     &:hover {
-      background-color: adjust-color($color: $btnColor, $lightness: 5%);
+      background-color: $btnPrimaryHoverColor;
+      border: 1px solid $btnPrimaryHoverColor;
     }
 
     &:active {
-      background-color: adjust-color($color: $btnColor, $lightness: -5%);
+      background: $mainColor;
+      border: $mainColor;
     }
   }
 
   &.--secondary {
-    background-color: $buttonActiveColor;
-    border-color: $buttonActiveColor;
+    background-color: $firstComplimentColor;
+    border: 1px solid $firstComplimentColor;
     color: $mainBackgroundColor;
 
     &:hover {
-      background-color: adjust-color($color: $buttonActiveColor, $lightness: 5%);
+      background-color: $btnSecondaryHoverColor;
+      border: 1px solid $btnSecondaryHoverColor;
     }
 
     &:active {
-      background-color: adjust-color($color: $buttonActiveColor, $lightness: -5%);
+      background-color: $btnSecondaryActiveColor;
+      border: 1px solid $btnSecondaryActiveColor;
     }
   }
 
-  &:hover {
-    background-color: change-color($color: $btnColor, $saturation: 40%, $lightness: 95%);
+
+  &.--ghost {
+    background-color: $mainBackgroundColor;
+    border: 1px solid $firstComplimentColor;
+    color: $firstComplimentColor;
+
+    &:hover {
+      background-color: $firstComplimentColor;
+      border: 1px solid $firstComplimentColor;
+      color: $mainBackgroundColor;
+    }
+
+    &:active {
+      background-color: $btnSecondaryHoverColor;
+      border: 1px solid $btnSecondaryHoverColor;
+    }
   }
 
-  &:focus {
-    box-shadow: 0 0 0px 2px btnFocusOutlineColor;
+  &:hover {
+    background-color: change-color($color: $btnColor, $saturation: 40%, $lightness: 95%);
   }
 
   &:active {
-    top: 1px;
     background-color: change-color($color: $btnColor, $saturation: 20%, $lightness: 85%);
   }
 

diff --git a/src/theme/common.scss b/src/theme/common.scss
@@ -36,6 +36,9 @@ $mainErrorColor: #E00646;
 
 $btnColor: hsl(190, 70%, 34%);
 $btnFocusOutlineColor: change-color($color: $btnColor, $saturation: 35%, $lightness: 75%);
+$btnPrimaryHoverColor: #2E343D;
+$btnSecondaryHoverColor: #115666;
+$btnSecondaryActiveColor: #0C3D47;
 
 $maxScrollWidth: 34px;