From 2fccac34714049486dd599405da15faa27969186 Mon Sep 17 00:00:00 2001
From: Yash raj chhabra <95337653+ychhabra-eightfold@users.noreply.github.com>
Date: Tue, 28 Jun 2022 21:10:31 +0530
Subject: [PATCH] fix: update button font sizes and outline colors (#206)

---
 src/components/Button/button.module.scss | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index fd1aafada..1adc42eea 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -176,9 +176,6 @@
     }
 
     &:active {
-        outline: 1px solid var(--button-focus-outline-color);
-        outline-offset: -1px;
-
         .counter {
             background-color: var(--button-counter-active-background-color);
         }
@@ -189,7 +186,7 @@
     // Button 1 (Mobile L)
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: $text-font-weight-semibold;
-    font-size: $text-font-size-5;
+    font-size: $text-font-size-4;
     line-height: $text-line-height-3;
 
     &.counter {
@@ -337,13 +334,11 @@
     &:hover {
         background-color: var(--button-hover-variant-background-color);
         color: var(--button-hover-foreground-color);
-        outline-color: var(--button-hover-variant-background-color);
     }
 
     &:active {
         background-color: var(--button-active-background-color);
         color: var(--button-active-foreground-color);
-        outline-color: var(--button-active-background-color);
     }
 }
 
@@ -356,13 +351,11 @@
     &:hover {
         background-color: var(--disruptive-color-10);
         color: var(--disruptive-color-70);
-        outline-color: var(--disruptive-color-20);
     }
 
     &:active {
         background-color: var(--disruptive-color-20);
         color: var(--disruptive-color-80);
-        outline-color: var(--disruptive-color-10);
     }
 }
 
@@ -375,13 +368,11 @@
     &:hover {
         background-color: var(--grey-color-10);
         color: var(--text-secondary-color);
-        outline-color: var(--grey-color-20);
     }
 
     &:active {
         background-color: var(--grey-color-20);
         color: var(--text-secondary-color);
-        outline-color: var(--grey-color-10);
     }
 }