diff --git a/src/angular/frontend/src/app/components/dashboard/dashboard.component.html b/src/angular/frontend/src/app/components/dashboard/dashboard.component.html
index 4350d8f..8e9c25b 100644
--- a/src/angular/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/src/angular/frontend/src/app/components/dashboard/dashboard.component.html
@@ -15,7 +15,7 @@
{{description}}
-
View {{label}}
+
diff --git a/src/angular/frontend/src/app/components/dashboard/dashboard.component.scss b/src/angular/frontend/src/app/components/dashboard/dashboard.component.scss
index 4d3a725..7275af3 100644
--- a/src/angular/frontend/src/app/components/dashboard/dashboard.component.scss
+++ b/src/angular/frontend/src/app/components/dashboard/dashboard.component.scss
@@ -17,5 +17,10 @@
.description {
color: var(--neutral-30);
}
+
+ .actions {
+ display: flex;
+ gap: 1rem;
+ }
}
}
diff --git a/src/angular/frontend/src/styles.scss b/src/angular/frontend/src/styles.scss
index 930112d..2737dc5 100644
--- a/src/angular/frontend/src/styles.scss
+++ b/src/angular/frontend/src/styles.scss
@@ -20,3 +20,46 @@ body {
scrollbar-color: var(--neutral-70)var(--neutral-80);
scrollbar-width: thin;
}
+
+button {
+ border: none;
+
+ padding: 0.5rem 1rem;
+ border-radius: 0.25rem;
+ font-weight: bold;
+
+ white-space: nowrap;
+
+ background-color: var(--button-bg-color);
+ color: var(--button-fg-color);
+
+ &:hover {
+ background-color: var(--button-bg-hover-color);
+ cursor: pointer;
+ }
+
+ --button-fg-color: var(--neutral-90);
+
+ &.primary {
+ --button-bg-color: var(--primary-30);
+ --button-bg-hover-color: var(--primary-20);
+ }
+
+ &.secondary {
+ --button-bg-color: var(--secondary-30);
+ --button-bg-hover-color: var(--secondary-20);
+ }
+
+ &.outline {
+ padding: calc(0.5rem - 1px) calc(1rem - 1px);
+ border: 1px solid var(--button-bg-color);
+ background-color: transparent;
+ color: var(--button-bg-color);
+
+ &:hover {
+ border: 1px solid var(--button-bg-hover-color);
+ background-color: transparent;
+ color: var(--button-bg-hover-color);
+ }
+ }
+}