Fix button styling

CentreForDigitalHumanities · Aug 30, 2024 · 6091c22 · 6091c22
1 parent dfa1b15
commit 6091c22
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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;
-}
+}
diff --git 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";
+    }
 }