From 9e2cc02dce6587cd62771e290f9c67743063b1bb Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 4 Sep 2021 22:02:13 -0500
Subject: [PATCH] Added badges to changelog

---
 src/components/common/features.css |  4 ++--
 src/data/Changelog.vue             | 37 +++++++++++++++++++++++++++---
 src/data/themes.ts                 |  6 +++++
 src/typings/theme.d.ts             |  3 +++
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/common/features.css b/src/components/common/features.css
index c312d14..63ba0a1 100644
--- a/src/components/common/features.css
+++ b/src/components/common/features.css
@@ -1,5 +1,5 @@
-.feature,
-.feature button {
+.feature:not(li),
+.feature:not(li) button {
     position: relative;
     padding: 5px;
     border-radius: var(--border-radius);
diff --git a/src/data/Changelog.vue b/src/data/Changelog.vue
index 74ea23b..28f9e40 100644
--- a/src/data/Changelog.vue
+++ b/src/data/Changelog.vue
@@ -8,9 +8,10 @@
                 <summary>v0.0 Initial Commit - <time>2021-09-04</time></summary>
                 This is the first release :D
                 <ul>
-                    <li>Did everything</li>
-                    <li>Had some fun</li>
-                    <li>Created some bugs to fix later</li>
+                    <li class="feature">Did everything</li>
+                    <li class="fix">Had some fun</li>
+                    <li class="breaking">Removed everything</li>
+                    <li class="balancing">Created some bugs to fix later</li>
                 </ul>
             </details>
         </template>
@@ -48,4 +49,34 @@ ul {
     padding: 5px 5px 5px 15px;
     list-style: inside;
 }
+
+li {
+    margin: 8px 0;
+}
+
+li::before {
+    padding: 2px 8px;
+    margin-right: 8px;
+    border-radius: var(--border-radius);
+}
+
+.feature::before {
+    content: "Feature";
+    background: var(--accent1);
+}
+
+.fix::before {
+    content: "Fix";
+    background: var(--accent2);
+}
+
+.balancing::before {
+    content: "Balancing";
+    background: var(--accent3);
+}
+
+.breaking::before {
+    content: "Breaking";
+    background: var(--danger);
+}
 </style>
diff --git a/src/data/themes.ts b/src/data/themes.ts
index 2fadc0e..4bf8d55 100644
--- a/src/data/themes.ts
+++ b/src/data/themes.ts
@@ -14,6 +14,9 @@ const defaultTheme: Theme = {
         "--danger": "rgb(220, 53, 69)",
         "--link": "#02f2f2",
         "--outline": "#dfdfdf",
+        "--accent1": "#627a82",
+        "--accent2": "#658262",
+        "--accent3": "#7c6282",
 
         "--border-radius": "15px",
         "--modal-border": "solid 2px var(--color)",
@@ -65,6 +68,9 @@ export default {
             "--danger": "#D08770",
             "--link": "#88C0D0",
             "--outline": "#3B4252",
+            "--accent1": "#B48EAD",
+            "--accent2": "#A3BE8C",
+            "--accent3": "#EBCB8B",
             "--border-radius": "4px",
             "--modal-border": "solid 2px #3B4252",
             "--feature-margin": "5px"
diff --git a/src/typings/theme.d.ts b/src/typings/theme.d.ts
index b92e3ce..ee9bafd 100644
--- a/src/typings/theme.d.ts
+++ b/src/typings/theme.d.ts
@@ -12,6 +12,9 @@ export interface Theme {
         "--danger": string;
         "--link": string;
         "--outline": string;
+        "--accent1": string;
+        "--accent2": string;
+        "--accent3": string;
         "--border-radius": string;
         "--modal-border": string;
         "--feature-margin": string;