From dd0914cd891407e9dab11ccd1123390d7e0bf5a4 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 10 Apr 2023 20:46:25 +1000
Subject: [PATCH] started removal of rounded borders

---
 resources/js/components/SMButton.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index 9166469..3b735e7 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -154,16 +154,21 @@ a:visited.sm-button,
     font-weight: 800;
     border-width: 2px;
     border-style: solid;
-    border-radius: 24px;
-    transition: background-color 0.1s, color 0.1s;
-    background-color: $secondary-color;
-    border-color: $secondary-color;
+    // border-radius: 24px;
+    // transition: background-color 0.1s, color 0.1s;
+    // background-color: $secondary-color;
+    // border-color: $secondary-color;
     min-width: 7rem;
     text-align: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: transparent;
+    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.1s ease-in-out;
+
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -227,15 +232,16 @@ a:visited.sm-button,
 
     &:hover:not(:disabled) {
         text-decoration: none;
-        color: $secondary-color;
+        background-color: rgba(255, 255, 255, 0.25);
+        box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.2);
     }
 
     &.primary {
-        background-color: $primary-color;
-        border-color: $primary-color;
+        // background-color: $primary-color;
+        // border-color: $primary-color;
 
         &:hover:not(:disabled) {
-            color: $primary-color;
+            // color: $primary-color;
         }
     }
 
@@ -299,10 +305,6 @@ a:visited.sm-button,
         }
     }
 
-    &:hover:not(:disabled) {
-        background-color: #fff;
-    }
-
     ion-icon {
         height: 1.2rem;
         width: 1.2rem;