refactoring for css

client/src/App.scss

@@ -8,8 +8,9 @@ html {
 
 body {
     color: settings.$body-color;
-    @include mixins.breakpoint(medium) {
-        color: black;
-    }
+}
+
+* {
+    transition: settings.$transition;
 }
 

client/src/components/ui/Button/button.scss

-
 @use 'styles/settings';
+@use 'styles/functions';
 
 .button {
     padding: 14px 50px;
-    font-size: 18px;
+    font-size: functions.toRem(18);
     font-weight: settings.$weight-bold;
-    background: radial-gradient(60% 100% at 50% 0%, #D298FF 0.01%, settings.$primary 100%);
+    background: radial-gradient(60% 100% at 50% 0%, #D298FF 0%, settings.$primary 100%);
     box-shadow: 0px 5px 15px rgba(settings.$primary, 0.25);
     border-radius: 25px;
     display: inline-block;
-    color: #fff;
-    transition: 300ms ease;
+    color: settings.$white;
     text-transform: uppercase;
     user-select: none;
-}
 
-.button:hover {
-    box-shadow: 0px 10px 25px rgba(settings.$primary, 0.35);
-    cursor: pointer;
-    color: #fff;
-    transform: translateY(-5%);
-}
+    &:hover,
+    &:focus {
+        box-shadow: 0px 10px 25px rgba(settings.$primary, 0.35);
+        cursor: pointer;
+        color: settings.$white;
+        transform: translateY(-5%);
+    }
 
-.button:active {
-    transform: scale(0.9);
+    &:active {
+        transform: scale(0.9);
+    }
 }
-

client/src/pages/Home/home.scss

+

client/src/styles/functions.scss

-
 @function toRem($px) {
-    @return ($px / 16px)+0rem;
+    @return ($px / 16)+0rem;
 }
 
 @function getFrom($map, $key) {
@@ -13,6 +12,5 @@
 }
 
 @function hoverify($color) {
-    @return scale-color($color, $lightness: +5%, $hue: +5%); 
+    @return color.scale-color($color, $lightness: +5%, $hue: +5%); 
 }
-

client/src/styles/mixins.scss

-
 @use 'functions.scss';
 @use 'settings.scss';
 
@@ -7,4 +6,3 @@
         @content;
     }
 }
-

client/src/styles/settings.scss

-
 // Colors
 $primary: #AC42FF;
 $secondary: #F15154;
@@ -37,3 +36,5 @@ $breakpoints: (
     'xlarge': 1420px
 );
 
+// General
+$transition: 300ms ease;