feat: Make buttons look more clickable (#19698)

Signed-off-by: Keith Chong <[email protected]>

Author: keithchong

src/styles/elements/buttons.scss

@@ -1,3 +1,5 @@
+@import '../theme';
+
 .argo-button {
     cursor: pointer;
     position: relative;
@@ -41,6 +43,10 @@
     &--base {
         color: $argo-color-gray-1;
         background-color: $argo-color-gray-6;
+        @include themify($themes) {
+            box-shadow: 1px 2px 5px 1px themed('shadow');
+        }
+        margin-right: 2px;
 
         &:not(.disabled):not([disabled]) {
             &:hover {
@@ -95,7 +101,8 @@
 
     &--base-o {
         color: $argo-color-teal-6;
-        box-shadow: inset 0 0 0 1px $argo-color-teal-5;
+        box-shadow: 1px 2px 5px 1px $argo-color-teal-5;
+        margin-left: 2px;
 
         &:not(.disabled):not([disabled]) {
             &:hover {
@@ -237,6 +244,7 @@
     &--special {
         color: #fff;
         background: $argo-color-teal-7;
+        box-shadow: 1px 2px 5px 1px $argo-color-gray-7;
         &:not(.disabled) {
             &:hover {
                 color: #fff;

src/styles/theme.scss

@@ -15,6 +15,7 @@ $themes: (
         layout-loader-bg: rgba($argo-color-gray-7, 0.4),
         overlay: rgba(222, 222, 222, 0.62),
         shadow: $argo-color-gray-5,
+        shadow-gray-8: $argo-color-gray-8,
         border: $argo-color-gray-3
     ),
     dark: (
@@ -31,6 +32,7 @@ $themes: (
         layout-loader-bg: rgba($argo-color-gray-3, 0.4),
         overlay: rgba(70, 70, 70, 0.62),
         shadow: $dark-theme-background-1,
+        shadow-gray-8: $argo-color-gray-9,
         border: $argo-color-gray-7
     )
 );