From 6091c22707c7da51170a1aff3ada88c4194ad2e2 Mon Sep 17 00:00:00 2001
From: Xander Vertegaal <a.j.j.vertegaal@uu.nl>
Date: Fri, 30 Aug 2024 12:17:04 +0200
Subject: [PATCH] Fix button styling

---
 .../spindle/export-button/export-button.component.html |  2 +-
 .../spindle/export-button/export-button.component.scss | 10 +++++-----
 .../spindle/export-button/export-button.component.ts   |  4 ++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/spindle/export-button/export-button.component.html b/frontend/src/app/spindle/export-button/export-button.component.html
index 62c3289..f758eaf 100644
--- a/frontend/src/app/spindle/export-button/export-button.component.html
+++ b/frontend/src/app/spindle/export-button/export-button.component.html
@@ -1,5 +1,5 @@
 <button
-    [class]="mode ? 'button ' + mode : 'button'"
+    [class]="getButtonClass(mode)"
     [class.is-loading]="isLoading"
     [class.with-text-below]="textBelow !== null"
     (click)="export.emit(mode ?? 'term-table')"
diff --git a/frontend/src/app/spindle/export-button/export-button.component.scss b/frontend/src/app/spindle/export-button/export-button.component.scss
index 43d571d..10101d7 100644
--- a/frontend/src/app/spindle/export-button/export-button.component.scss
+++ b/frontend/src/app/spindle/export-button/export-button.component.scss
@@ -27,7 +27,7 @@
     }
 }
 
-.latex {
+.latex-button {
     background-color: black;
     color: white;
 
@@ -36,17 +36,17 @@
     }
 }
 
-.overleaf {
+.overleaf-button {
     background-color: #47A141;
     color: white;
 }
 
-.pdf {
+.pdf-button {
     background-color: #FF0000;
     color: white;
 }
 
-.proof {
+.proof-button {
     background-color: #4444ca;
     color: white;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/spindle/export-button/export-button.component.ts b/frontend/src/app/spindle/export-button/export-button.component.ts
index acd8ce0..2096a76 100644
--- a/frontend/src/app/spindle/export-button/export-button.component.ts
+++ b/frontend/src/app/spindle/export-button/export-button.component.ts
@@ -12,4 +12,8 @@ export class ExportButtonComponent {
     @Input() isLoading = false;
     @Input() buttonText = $localize`Export`;
     @Input() textBelow: string | null = null;
+
+    public getButtonClass(mode: SpindleMode | null): string {
+        return mode ? `button ${mode}-button` : "button";
+    }
 }