From aa7b72c56351e3f3900e9ae22481998500a82bc1 Mon Sep 17 00:00:00 2001
From: discollizard <discollizard@github.com>
Date: Wed, 3 Jul 2024 21:10:53 -0300
Subject: [PATCH] styles fixed + translations

---
 src/locales/pt/translation.json               |  2 +-
 .../select-field/select-field.css.ts          |  2 +-
 .../components/select-field/select-field.tsx  |  1 +
 .../src/components/sidebar/sidebar.tsx        |  5 ++--
 .../src/pages/settings/settings-general.tsx   | 23 +++++++++++--------
 5 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
index c8948c3c..39aa78b3 100644
--- a/src/locales/pt/translation.json
+++ b/src/locales/pt/translation.json
@@ -22,7 +22,7 @@
     "game_has_no_executable": "Jogo não possui executável selecionado",
     "sign_in": "Login",
     "sort_by": "Ordenar por",
-    "latest_added": "Adicionado mais recente",
+    "latest_added": "Adicionado recente",
     "alphabetically": "Alfabeticamente",
     "last_launched": "Último jogado",
     "number_of_hours": "Qtd. de horas jogadas",
diff --git a/src/renderer/src/components/select-field/select-field.css.ts b/src/renderer/src/components/select-field/select-field.css.ts
index 7acd4e98..371c55cd 100644
--- a/src/renderer/src/components/select-field/select-field.css.ts
+++ b/src/renderer/src/components/select-field/select-field.css.ts
@@ -7,7 +7,7 @@ export const select = recipe({
   base: {
     display: "inline-flex",
     transition: "all ease 0.2s",
-    width: "fit-content",
+    width: "100%",
     alignItems: "center",
     borderRadius: "8px",
     border: `1px solid ${vars.color.border}`,
diff --git a/src/renderer/src/components/select-field/select-field.tsx b/src/renderer/src/components/select-field/select-field.tsx
index fb5038f6..c1aa19a9 100644
--- a/src/renderer/src/components/select-field/select-field.tsx
+++ b/src/renderer/src/components/select-field/select-field.tsx
@@ -34,6 +34,7 @@ export function SelectField({
         <select
           id={id}
           value={value}
+          style={{width: "100%"}}
           className={styles.option}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index eec89124..6c1976eb 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -51,7 +51,6 @@ export function Sidebar() {
   const location = useLocation();
 
   const sortedLibrary = useMemo(() => {
-    console.log(library);
     switch (sortParam) {
       case "latest_added":
         return sortBy(library, (game) => game.createdAt);
@@ -226,6 +225,8 @@ export function Sidebar() {
           <section className={styles.section}>
             <small className={styles.sectionTitle}>{t("my_library")}</small>
 
+
+      <div style={{width: "102%"}}>
             <SelectField
               label={t("sort_by")}
               value={sortParam}
@@ -236,7 +237,7 @@ export function Sidebar() {
                 label: t(option),
               }))}
             />
-
+      </div>
             <TextField
               placeholder={t("filter")}
               onChange={handleFilter}
diff --git a/src/renderer/src/pages/settings/settings-general.tsx b/src/renderer/src/pages/settings/settings-general.tsx
index e09ebb11..cf1b1166 100644
--- a/src/renderer/src/pages/settings/settings-general.tsx
+++ b/src/renderer/src/pages/settings/settings-general.tsx
@@ -121,16 +121,19 @@ export function SettingsGeneral() {
         }
       />
 
-      <SelectField
-        label={t("language")}
-        value={form.language}
-        onChange={handleLanguageChange}
-        options={languageOptions.map((language) => ({
-          key: language.option,
-          value: language.option,
-          label: language.nativeName,
-        }))}
-      />
+      <div style={{width: "22%"}}>
+        <SelectField
+          label={t("language")}
+          value={form.language}
+          onChange={handleLanguageChange}
+          options={languageOptions.map((language) => ({
+            key: language.option,
+            value: language.option,
+            label: language.nativeName,
+          }))}
+        />
+      </div>
+      
 
       <h3>{t("notifications")}</h3>
       <>