restyle buttons to new icon-btn

src/app/vault/password-generator.component.html

@@ -18,7 +18,7 @@
           <div class="action-buttons">
             <button
               type="button"
-              class="btn primary"
+              class="icon-btn primary"
               appStopClick
               appA11yTitle="{{ 'copyPassword' | i18n }}"
               (click)="copy()"
@@ -27,7 +27,7 @@
             </button>
             <button
               type="button"
-              class="btn primary"
+              class="icon-btn primary"
               appStopClick
               appA11yTitle="{{ 'regeneratePassword' | i18n }}"
               (click)="regenerate()"
@@ -41,7 +41,7 @@
           <div class="action-buttons">
             <button
               type="button"
-              class="btn primary"
+              class="icon-btn primary"
               appStopClick
               appA11yTitle="{{ 'copyUsername' | i18n }}"
               (click)="copy()"
@@ -50,7 +50,7 @@
             </button>
             <button
               type="button"
-              class="btn primary"
+              class="icon-btn primary"
               appStopClick
               appA11yTitle="{{ 'regenerateUsername' | i18n }}"
               (click)="regenerate()"

src/scss/box.scss

@@ -355,33 +355,7 @@
     margin-left: 5px;
 
     .row-btn {
-      cursor: pointer;
-      padding: 10px 8px;
-      background: none;
-      border: none;
-
-      @include themify($themes) {
-        color: themed("boxRowButtonColor");
-      }
-
-      &:hover,
-      &:focus {
-        @include themify($themes) {
-          color: themed("boxRowButtonHoverColor");
-        }
-      }
-
-      &.disabled {
-        @include themify($themes) {
-          color: themed("disabledIconColor");
-        }
-
-        &:hover {
-          @include themify($themes) {
-            color: themed("disabledIconColor");
-          }
-        }
-      }
+      @extend .icon-btn;
     }
 
     &.no-pad .row-btn {

src/scss/buttons.scss

@@ -115,3 +115,57 @@
     }
   }
 }
+
+.icon-btn {
+  cursor: pointer;
+  padding: 10px 8px;
+  background: none;
+  border: none;
+
+  @include themify($themes) {
+    color: themed("boxRowButtonColor");
+  }
+
+  &.primary {
+    @include themify($themes) {
+      color: themed("buttonPrimaryColor");
+    }
+  }
+
+  &.danger {
+    @include themify($themes) {
+      color: themed("buttonDangerColor");
+    }
+  }
+
+  &:hover,
+  &:focus {
+    @include themify($themes) {
+      color: themed("boxRowButtonHoverColor");
+    }
+
+    &.primary {
+      @include themify($themes) {
+        color: darken(themed("buttonPrimaryColor"), 6%);
+      }
+    }
+
+    &.danger {
+      @include themify($themes) {
+        color: darken(themed("buttonDangerColor"), 6%);
+      }
+    }
+  }
+
+  &.disabled {
+    @include themify($themes) {
+      color: themed("disabledIconColor");
+    }
+
+    &:hover {
+      @include themify($themes) {
+        color: themed("disabledIconColor");
+      }
+    }
+  }
+}