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); + } + } +}