Improved coloring for the hint-text. (#288)

cryptic-game · Mar 23, 2022 · 91cbbb2 · 91cbbb2
1 parent ad18acd
commit 91cbbb2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
@@ -5,6 +5,6 @@
        (keydown.enter)="onEnter.emit()"
        [class]="flavor"
        [disabled]="disabled">
-  <small [class]="flavor+hintHaveColor()">{{hintText}}</small>
+  <small [className]="coloredLabel() ? flavor : ''">{{hintText}}</small>
 </span>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
@@ -56,7 +56,7 @@ small {
   display: block;
   color: $grey-font;
   @each $name, $colors in $flavors {
-    &.#{$name}true {
+    &.#{$name} {
       color: list.nth($colors, 1);
     }
   }

diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
@@ -17,11 +17,14 @@ export class TextInputComponent {
   @Input() hintColored: boolean = false;
   @Input() public flavor: Flavor = 'primary';
 
-
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();
 
-  hintHaveColor() {
-    return this.hintColored && !this.disabled;
+  coloredLabel(): string {
+    if(this.hintColored && !this.disabled){
+      return "colored";
+    } else {
+      return "";
+    }
   }
 }