Merge pull request #206 from makeopensource/47-buttons-hover

#47 - Buttons change on hover

Author: RA341

devU-client/src/assets/global.scss

@@ -46,13 +46,20 @@
     background-color: var(--primary);
     border: 3px solid var(--primary);
     color: #fff; // primary button always white text
+    &:hover{
+      background-color: var(--hover-darker);
+      border: 3px solid var(--hover-darker);
+    }
   }
 
   button.btnSecondary {
     @extend .btn;
     background-color: var(--btn-secondary-background);
     color: var(--btn-secondary-text);
     border: 3px solid var(--btn-secondary-border);
+    &:hover{
+      background-color: var(--hover-lighter);
+    }
   }
 
   button.btnDelete {
@@ -97,6 +104,10 @@
     --btn-secondary-background: #FFF;
     --btn-secondary-text: var(--primary);
 
+    --hover-darker: var(--purple-darker);
+    --hover-lighter: var(--purple-lightest);
+
+
     --btn-delete-border: var(--red);
     --btn-delete-background: #FFF;
     --btn-delete-text: var(--red);
@@ -123,6 +134,8 @@
     --red-lighter: #FFA3A3;
     --red: #8A2626;
 
+    --purple-lightest: #efecfd;
+    --purple-lighterer: #9885f0;
     --purple-lighter: #7257EB;
     --purple: #52468A;
     --purple-darker: #2F2363;
@@ -160,6 +173,9 @@
     --btn-secondary-background: var(--purple-darker);
     --btn-secondary-text: #FFF;
 
+    --hover-darker: var(--purple-lighterer);
+    --hover-lighter: var(--purple);
+
     --btn-text-color: var(--purple-lighter)
 
     --btn-delete-border: var(--red-lighter);