🎨 styles: button size small

:%s

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -103,6 +103,20 @@
       }
     }
   }
+  &.small {
+    .inner {
+      padding: .5rem 1rem;
+      &.onlyIcon {
+        padding: 1rem;
+      }
+      @screen md {
+        padding: .8rem 1.6rem;
+        &.onlyIcon {
+          padding: .8rem;
+        }
+      }
+    }
+  }
 
   &.large {
     .inner {

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
 interface Props {
     children?: React.ReactNode,
     type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,
     loading?: boolean,

src/components/common/ButtonIconBuy/ButtonIconBuy.tsx

@@ -4,13 +4,13 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon'
 
 interface Props {
     type?: 'primary' | 'light' | 'ghost',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     loading?: boolean,
     disabled?: boolean,
     onClick?: () => void,
 }
 
-const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => {
+const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
     return (
         <ButtonCommon
             type={type}

src/components/common/ProductCard/ProductCard.tsx

@@ -63,15 +63,15 @@ const ProductCard = ({
         {
           isSingleButton ?
             <div className={s.cardButton}>
-              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+              <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
             </div>
             :
             <>
               <div className={s.cardIcon}>
-                <ButtonIconBuy />
+                <ButtonIconBuy/>
               </div>
               <div className={s.cardButton}>
-                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+                <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
               </div>
             </>
         }