From 41ce51b4217624981e2ce14eb012c7224571dd50 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 10 Mar 2022 10:11:49 +0100
Subject: [PATCH] unify lang selector action display

---
 .../language-selector.component.html          |  8 +++----
 .../language-selector.component.scss          | 21 +++++++++----------
 src/styles/partials/_buttons.scss             |  2 +-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html
index 3fe45182..c65a8f68 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.html
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html
@@ -52,7 +52,7 @@
 					<div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
 						<label
 							[attr.for]="'#lang_' + language"
-							class="lang-element button has-text-left"
+							class="lang-element button is-action"
 							[ngClass]="{
 								'is-primary': language_to_apply === language,
 								'is-current': language === currentLang
@@ -78,7 +78,7 @@
 					<div *ngFor="let language of availableLanguagesStatic" (click)="language_to_apply = language.value">
 						<label
 							[attr.for]="'#lang_' + language"
-							class="lang-element button has-text-left"
+							class="lang-element button is-action"
 							[ngClass]="{
 								'is-primary': language_to_apply === language.value,
 								'is-current': language.value === currentLang
@@ -94,7 +94,7 @@
 								[attr.id]="'#lang_' + language.value"
 								(click)="language_to_apply = language.value"
 							/>
-							{{ language.name | translate }}
+							{{ 'LANGUAGES.' + language.value.toUpperCase() | translate }}
 						</label>
 					</div>
 				</div>
@@ -102,7 +102,7 @@
 
 			<ng-template pTemplate="footer">
 				<div class="buttons-bottom">
-					<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
+					<button class="button is-secondary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
 						{{ 'SENTENCES.Cancel' | translate }}
 					</button>
 					<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
index 7d130327..07e7dc91 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
@@ -23,28 +23,21 @@
 		margin-right: 0.5rem;
 
 		&:hover {
-			background: $secondary_color;
-			color: $white;
-
 			.fa {
 				color: $white;
 			}
 		}
 	}
 
+	// some lang to select in the popup
 	.lang-element {
 		float: left;
+		height: auto;
+		min-height: auto;
 		margin: 0.5em;
-		border: 0;
-		border-radius: 2rem;
-		padding: 0.5rem;
-
-		&:hover {
-			background: $bar-progress-grey;
-		}
 
 		input {
-			height: 1.5rem;
+			//height: 1.5rem;
 			display: none;
 		}
 	}
@@ -53,6 +46,7 @@
 		font-weight: bold;
 	}
 
+	// button to show all lang choices in a popup
 	.lang-button {
 		color: $primary-color;
 		border: none;
@@ -60,6 +54,11 @@
 		display: block;
 		line-height: $stepper-nav-height;
 		height: $stepper-nav-height;
+		&:hover {
+			i {
+				color: $primary-color !important;
+			}
+		}
 	}
 
 	#lang_button_popup_mobile {
diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
index 4cc495a9..7d068dff 100644
--- a/src/styles/partials/_buttons.scss
+++ b/src/styles/partials/_buttons.scss
@@ -14,7 +14,7 @@ button,
 .btn--full {
 	@extend .is-block;
 }
-
+.button,
 button,
 a {
 	@extend .outlined;