refactor: create reusable buttons

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -1,21 +1,28 @@
-.subtle {
+@use '../../../theme/viewerDefs' as *;
+
+.baseIconButton {
   aspect-ratio: 1;
   height: 2rem;
-  height: 2rem;
+  width: 2rem;
   display: grid;
   place-content: center;
 
-  background: $gray-1050;
-  color: $blue-400;
   border: 1px solid transparent;
   border-radius: 3px;
 
+  cursor: pointer;
+}
+
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
   &:hover:not(:disabled):not(:active) {
     background: $gray-1000;
     color: $blue-500;
   }
 
-  &:active {
+  &:active:not(:disabled){
     background: $gray-1100;
     border-color: $gray-1250;
   }
@@ -24,3 +31,37 @@
     background: $gray-1050;
   }
 }
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}