[Update] Main Page: TranslatorSelector: Add the label 'default'.

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -15,12 +15,13 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
                 <div className={styles.wrapper}>
                     {columns.map((column, column_index) => (
                         <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                            {column.map(({ id, label, is_available }) => (
+                            {column.map(({ id, label, is_available, is_default }) => (
                                 <TranslatorBox
                                     key={id}
                                     id={id}
                                     label={label}
                                     is_available={is_available}
+                                    is_default={is_default}
                                     is_selected={(id === selected_id)}
                                 />
                             ))}
@@ -45,6 +46,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
 };
 
 const TranslatorBox = (props) => {
+    const { t } = useTranslation();
     const { setSelectedTranslationEngines} = useLanguageSettings();
     const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
@@ -53,6 +55,10 @@ const TranslatorBox = (props) => {
         { [styles.is_selected]: props.is_selected },
         { [styles.is_available]: props.is_available }
     );
+    const label_default_class_name = clsx(
+        styles.label_default,
+        { [styles.is_selected]: props.is_selected },
+    );
 
     const selectTranslator = () => {
         if (props.is_selected === false) {
@@ -60,9 +66,11 @@ const TranslatorBox = (props) => {
         }
         updateIsOpenedTranslatorSelector(false);
     };
+
     return (
         <div className={box_class_name} onClick={selectTranslator}>
             <p className={styles.translator_name}>{props.label}</p>
+            {props.is_default && <p className={label_default_class_name}>{t("main_page.translator_label_default")}</p>}
         </div>
     );
 };

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss

@@ -17,26 +17,26 @@
 }
 
 .wrapper {
-    // padding: 1rem;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.4rem;
 }
 
 .column_wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.2rem;
 }
 
-$box_size: 6rem;
+$box_size: 6.2rem;
 .box {
-    width: 9.2rem;
+    position: relative;
+    width: 9.4rem;
     height: $box_size;
     background-color: var(--dark_875_color);
     display: flex;
@@ -51,10 +51,10 @@ $box_size: 6rem;
     }
     &:active {
         background-color: var(--dark_900_color);
-        border: 0.1rem solid var(--primary_300_color);
+        outline: 0.1rem solid var(--primary_300_color);
     }
     &.is_selected {
-        border: 0.2rem solid var(--primary_300_color);
+        outline: 0.2rem solid var(--primary_300_color);
     }
     &:not(.is_available) {
         pointer-events: none;
@@ -69,6 +69,22 @@ $box_size: 6rem;
     font-size: 1.4rem;
 }
 
+.label_default {
+    background-color: var(--dark_875_color);
+    outline: 0.1rem solid var(--dark_1000_color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.2rem;
+    font-size: 1.2rem;
+    position: absolute;
+    top: -0.8rem;
+    right: -0.8rem;
+    pointer-events: none;
+    &.is_selected {
+        outline: 0.1rem solid var(--primary_300_color);
+
+    }
+}
+
 .is_selected_same_language_wrapper {
     position: absolute;
     bottom: 0;