From 475eb13fb3e9fcfa214cb6c4b56fc08455d2f12d Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <n.jelveh@gmail.com>
Date: Fri, 2 Aug 2024 14:00:44 -0700
Subject: [PATCH] add checkmark to selected language in the settings window

---
 src/gui/src/UI/Settings/UITabLanguage.js |  2 +-
 src/gui/src/css/style.css                | 14 ++++++++++++++
 src/gui/src/icons/checkmark.svg          |  3 +++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/gui/src/icons/checkmark.svg

diff --git a/src/gui/src/UI/Settings/UITabLanguage.js b/src/gui/src/UI/Settings/UITabLanguage.js
index fbea62a27..4d27f1936 100644
--- a/src/gui/src/UI/Settings/UITabLanguage.js
+++ b/src/gui/src/UI/Settings/UITabLanguage.js
@@ -36,7 +36,7 @@ export default {
         const available_languages = window.listSupportedLanguages();
         h += `<div class="language-list">`;
             for (let lang of available_languages) {
-                h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${html_encode(lang.name)}</div>`;
+                h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${html_encode(lang.name)}<img class="checkmark" src="${window.icons['checkmark.svg']}"></div>`;
             }
         h += `</div>`;
         return h;
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index d6912ab62..95c3832f4 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -3865,15 +3865,29 @@ fieldset[name=number-code] {
     border-radius: 4px;
     margin-bottom: 10px;
     margin-right: 10px;
+    font-size: 13px;
+    position: relative;
 }
 
 .language-item:hover {
     background-color: #f6f6f6;
 }
 
+.language-item .checkmark{
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    margin-left: 10px;
+    display: none;
+    position: absolute;
+    right: 10px;
+}
 .language-item.active {
     background-color: #e0e0e0;
 }
+.language-item.active .checkmark {
+    display: inline-block;
+}
 
 .settings-card {
     overflow: hidden;
diff --git a/src/gui/src/icons/checkmark.svg b/src/gui/src/icons/checkmark.svg
new file mode 100644
index 000000000..87168de30
--- /dev/null
+++ b/src/gui/src/icons/checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+</svg>
\ No newline at end of file