Updated button styles (#61)

petro97 · web-flow · commit 1ad9f0f32a05 · 2020-09-10T10:23:47.000-04:00
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;
 

Original file line number	Diff line number	Diff line change
`@@ -49,10 +49,6 @@`
`49`	`49`	`color: $mainErrorColor;`
`50`	`50`	`}`
`51`	`51`
`52`		`- .epbtn {`
`53`		`- width: 100px;`
`54`		`- }`
`55`		`-`
`56`	`52`	`.epbtn + .epbtn {`
`57`	`53`	`margin-left: 10px;`
`58`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`
`71`		`- @media (max-width: $mobileWidth) {`
	`71`	`+ @media (max-width: $mobileWidth - 1px) {`
`72`	`72`	`&__search {`
`73`	`73`	`flex: 0;`
`74`	`74`	`}`
`@@ -80,16 +80,20 @@`
`80`	`80`	`&__accountm,`
`81`	`81`	`&__search,`
`82`	`82`	`&__language,`
`83`		`- &__moltincartcontainer,`
`84`	`83`	`&__account {`
`85`	`84`	`margin-right: 10px;`
`86`	`85`	`}`
`87`	`86`
`88`		`- &__moltincartcontainer & {`
	`87`	`+ &__moltincartcontainer {`
	`88`	`+ margin: 0;`
	`89`	`+ }`
	`90`	`+`
	`91`	`+ &__moltincartcontainer & {`
`89`	`92`	`&__cartbtn.--bordered {`
`90`	`93`	`border: none;`
`91`	`94`
`92`	`95`	`&:hover {`
	`96`	`+ border: none;`
`93`	`97`	`background: transparent;`
`94`	`98`	`}`
`95`	`99`	`}`
`@@ -107,7 +111,7 @@`
`107`	`111`	`}`
`108`	`112`	`}`
`109`	`113`
`110`		`- @media (min-width: $mobileWidth - 1px) {`
	`114`	`+ @media (min-width: $mobileWidth) {`
`111`	`115`	`&__cartbtn {`
`112`	`116`	`padding: 10px 15px;`
`113`	`117`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`$block: &;`
`5`	`5`
`6`	`6`	`.epbtn {`
`7`		`- min-width: 120px;`
`8`	`7`	`white-space: nowrap;`
`9`	`8`	`}`
`10`	`9`