From 1095bf021825380cfb9b880d438f3e73baeaa473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Fri, 13 Jan 2023 15:35:22 +0800
Subject: [PATCH] Add more button colors, icon style for small buttons

Plus tag icon for the tag buttons
---
 app/components/expense-list/template.hbs |  4 +-
 app/styles/_buttons.scss                 | 47 +++++++++++++++++-------
 app/templates/components/icon-tag.hbs    |  1 +
 3 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 app/templates/components/icon-tag.hbs

diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs
index 64b033c..3633663 100644
--- a/app/components/expense-list/template.hbs
+++ b/app/components/expense-list/template.hbs
@@ -13,7 +13,9 @@
       </p>
       <p class="tags">
         {{#each expense.tags as |tag|}}
-          <button class="small" role="none">{{tag}}</button>
+          <button class="small yellow" role="none">
+            <IconTag />{{tag}}
+          </button>
         {{/each}}
       </p>
       {{#if this.showDeleteButton}}
diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
index eb0c2ff..db5a8bc 100644
--- a/app/styles/_buttons.scss
+++ b/app/styles/_buttons.scss
@@ -31,32 +31,53 @@ button, input[type=submit], .button {
   &.small {
     font-size: 0.86rem;
     padding: 0.2rem 0.8rem;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.4rem;
+    }
   }
 
   &.danger:not(:disabled) {
     color: $red;
     background-color: rgba(40, 21, 21, 0.6);
     border-color: rgba(40, 21, 21, 1);
-
-    &:hover {
-      background-color: rgba(40, 21, 21, 0.8);
-    }
-    &:focus, &:active, &.active {
-      border-color: $red;
-    }
+    &:hover { background-color: rgba(40, 21, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $red; }
   }
 
   &.green:not(:disabled) {
     color: $green;
     background-color: rgba(21, 40, 21, 0.6);
     border-color: rgba(21, 40, 21, 1);
+    &:hover { background-color: rgba(21, 40, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $green; }
+  }
 
-    &:hover {
-      background-color: rgba(21, 40, 21, 0.8);
-    }
-    &:focus, &:active, &.active {
-      border-color: $green;
-    }
+  &.pink:not(:disabled) {
+    color: $pink;
+    background-color: rgba(40, 21, 40, 0.6);
+    border-color: rgba(40, 21, 40, 1);
+    &:hover { background-color: rgba(40, 21, 40, 0.8); }
+    &:focus, &:active, &.active { border-color: $pink; }
+  }
+
+  &.purple:not(:disabled) {
+    color: $purple;
+    background-color: rgba(24, 21, 40, 0.6);
+    border-color: rgba(24, 21, 40, 1);
+    &:hover { background-color: rgba(24, 21, 40, 0.8); }
+    &:focus, &:active, &.active { border-color: $purple; }
+  }
+
+  &.yellow:not(:disabled) {
+    color: $yellow;
+    background-color: rgba(40, 40, 21, 0.6);
+    border-color: rgba(40, 40, 21, 1);
+    &:hover { background-color: rgba(40, 40, 21, 0.8); }
+    &:focus, &:active, &.active { border-color: $yellow; }
   }
 
   &.icon {
diff --git a/app/templates/components/icon-tag.hbs b/app/templates/components/icon-tag.hbs
new file mode 100644
index 0000000..7219b15
--- /dev/null
+++ b/app/templates/components/icon-tag.hbs
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
\ No newline at end of file