fix: add slovak flag/lang and czech-flag color accents

Author: Matus Kasak

config/config.yml

@@ -106,7 +106,7 @@ cache:
 #  # Whether the privacy statement should exist or not.
 #  enablePrivacyStatement: false
 
-# Allow only EN and CS languages
+# Allow EN, CS and SK languages
 languages:
   - code: en
     label: English
@@ -117,6 +117,9 @@ languages:
   - code: cs
     label: Čeština
     active: true
+  - code: sk
+    label: Slovenčina
+    active: true
   - code: de
     label: Deutsch
     active: false

src/app/clarin-navbar-top/clarin-navbar-top.component.html

@@ -7,6 +7,9 @@
       <span class="language-icon pl-1" (click)="setLanguage('cs')">
         <img src="./assets/images/cs.png" alt="{{'language.czech' | translate}}" title="{{'language.czech' | translate}}">
       </span>
+      <span class="language-icon pl-1" (click)="setLanguage('sk')">
+        <img src="./assets/images/sk.png" alt="{{'language.slovak' | translate}}" title="{{'language.slovak' | translate}}">
+      </span>
     </div>
     <div class="ml-auto pr-3">
       <div *ngIf="authenticatedUser == null" class="badge clarin-login-badge px-2 py-1">

src/app/clarin-navbar-top/clarin-navbar-top.component.scss

@@ -5,7 +5,7 @@
 }
 
 .clarin-logout-badge {
-  background-color: #428bca;
+  background-color: #11457e;
   font-size: 13px;
   border-top-left-radius: unset;
   border-top-right-radius: unset;
@@ -15,7 +15,7 @@
 }
 
 .clarin-login-badge {
-  background-color: #d9534f;
+  background-color: #d7141a;
   font-size: 16px;
   border-top-left-radius: unset;
   border-top-right-radius: unset;

src/assets/i18n/cs.json5

@@ -9660,6 +9660,9 @@
   // "language.czech": "Czech",
   "language.czech": "Čeština",
 
+  // "language.slovak": "Slovak",
+  "language.slovak": "Slovenština",
+
   // "repository.policy.page": "Change me: policy page",
   "repository.policy.page": "policy page",
 

src/assets/i18n/en.json5

@@ -6403,6 +6403,8 @@
 
   "language.czech": "Czech",
 
+  "language.slovak": "Slovak",
+
   "repository.policy.page": "Change me: policy page",
 
   "navbar.repository": "Repository",

src/assets/i18n/sk.json5

@@ -27,39 +27,39 @@
 }
 
 .btn-outline-secondary, .btn-outline-primary {
-  border-color: var(--lt-clarin-purple) !important;
-  color: var(--lt-clarin-purple) !important;
+  border-color: var(--lt-clarin-primary) !important;
+  color: var(--lt-clarin-primary) !important;
 
   &:focus {
-    box-shadow: 0 0 0 0.2rem #d5d6e9 !important;
+    box-shadow: 0 0 0 0.2rem var(--lt-clarin-primary-focus) !important;
   }
 
   &:hover {
-    background-color: #545aa5 !important;
-    border-color: #545aa5 !important;
+    background-color: var(--lt-clarin-primary-hover) !important;
+    border-color: var(--lt-clarin-primary-hover) !important;
     transition: filter 0.3s;
     color: white !important;
   }
 }
 
 .btn-danger, .btn-dark, .btn-success, .btn-warning, .btn-info, .btn-primary, .btn-secondary {
-  background-color: var(--lt-clarin-purple) !important;
+  background-color: var(--lt-clarin-primary) !important;
   border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25) !important;
   color: white !important;
 
   &:focus {
-    box-shadow: 0 0 0 0.2rem #d5d6e9 !important;
+    box-shadow: 0 0 0 0.2rem var(--lt-clarin-primary-focus) !important;
   }
 
   &:hover {
-    background-color: #545aa5 !important;
-    border-color: #545aa5 !important;
+    background-color: var(--lt-clarin-primary-hover) !important;
+    border-color: var(--lt-clarin-primary-hover) !important;
     transition: filter 0.3s;
   }
 }
 
 .form-control:focus {
-  box-shadow: 0 0 0 0.2rem #d5d6e9 !important;
+  box-shadow: 0 0 0 0.2rem var(--lt-clarin-primary-focus) !important;
 }
 
 ds-home-page ds-themed-search-form {

src/assets/images/sk.png

@@ -1,7 +1,10 @@
 :root {
 
   --lt-common-navbar-height: 80px;
-  --lt-clarin-purple: #7479b8;
+  --lt-clarin-primary: #11457e;
+  --lt-clarin-primary-hover: #d7141a;
+  --lt-clarin-primary-focus: #8fb0d0;
+  --lt-clarin-purple: var(--lt-clarin-primary);
 
   --lt-clarin-yellow-bg: #fcf8e3;;
   --lt-clarin-yellow-border: #fbeed5;