From d1fa4895e46d3f3be21d73314918ab452a84bbc3 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:58:09 -0300
Subject: [PATCH] feat: adjust spacing

---
 src/locales/pt-BR/translation.json            |   2 +-
 .../pages/settings/settings-account.css.ts    |   3 +-
 .../src/pages/settings/settings-account.tsx   | 167 ++++++++++--------
 3 files changed, 93 insertions(+), 79 deletions(-)

diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index ed891f04..9e1021fc 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -271,7 +271,7 @@
     "show_hidden_achievement_description": "Mostrar descrição de conquistas ocultas antes de debloqueá-las",
     "account": "Conta",
     "no_users_blocked": "Você não bloqueou nenhum usuário",
-    "subscription_active_until": "Sua assinatura Hydra Cloud estará ativa até {{date}}",
+    "subscription_active_until": "Sua assinatura Hydra Cloud ficará ativa até {{date}}",
     "manage_subscription": "Gerenciar assinatura",
     "update_email": "Atualizar email",
     "update_password": "Atualizar senha",
diff --git a/src/renderer/src/pages/settings/settings-account.css.ts b/src/renderer/src/pages/settings/settings-account.css.ts
index 44ec0d14..8fbb3845 100644
--- a/src/renderer/src/pages/settings/settings-account.css.ts
+++ b/src/renderer/src/pages/settings/settings-account.css.ts
@@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 export const form = style({
   display: "flex",
   flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
+  gap: `${SPACING_UNIT * 3}px`,
 });
 
 export const blockedUser = style({
@@ -36,5 +36,4 @@ export const blockedUsersList = style({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: `${SPACING_UNIT}px`,
-  marginTop: `${SPACING_UNIT}px`,
 });
diff --git a/src/renderer/src/pages/settings/settings-account.tsx b/src/renderer/src/pages/settings/settings-account.tsx
index aa8a7596..d43e5b2d 100644
--- a/src/renderer/src/pages/settings/settings-account.tsx
+++ b/src/renderer/src/pages/settings/settings-account.tsx
@@ -158,7 +158,7 @@ export function SettingsAccount() {
           };
 
           return (
-            <>
+            <section>
               <SelectField
                 label={t("profile_visibility")}
                 value={field.value}
@@ -172,105 +172,120 @@ export function SettingsAccount() {
               />
 
               <small>{t("profile_visibility_description")}</small>
-            </>
+            </section>
           );
         }}
       />
 
-      <div style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+      <section>
         <h4>{t("current_email")}</h4>
         <p>{userDetails?.email ?? t("no_email_account")}</p>
-      </div>
 
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "start",
-          alignItems: "center",
-          gap: `${SPACING_UNIT}px`,
-          marginTop: 8,
-        }}
-      >
-        <Button
-          theme="outline"
-          onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "start",
+            alignItems: "center",
+            gap: `${SPACING_UNIT}px`,
+            marginTop: `${SPACING_UNIT * 2}px`,
+          }}
         >
-          <MailIcon />
-          {t("update_email")}
-        </Button>
+          <Button
+            theme="outline"
+            onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
+          >
+            <MailIcon />
+            {t("update_email")}
+          </Button>
 
-        <Button
-          theme="outline"
-          onClick={() =>
-            window.electron.openAuthWindow(AuthPage.UpdatePassword)
-          }
-        >
-          <KeyIcon />
-          {t("update_password")}
-        </Button>
-      </div>
+          <Button
+            theme="outline"
+            onClick={() =>
+              window.electron.openAuthWindow(AuthPage.UpdatePassword)
+            }
+          >
+            <KeyIcon />
+            {t("update_password")}
+          </Button>
+        </div>
+      </section>
 
-      <div
+      <section
         style={{
           display: "flex",
           flexDirection: "column",
-          marginTop: `${SPACING_UNIT * 2}px`,
-          gap: `${SPACING_UNIT / 2}px`,
+          gap: `${SPACING_UNIT * 2}px`,
         }}
       >
         <h3>Hydra Cloud</h3>
-        {getHydraCloudSectionContent().description}
-      </div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: `${SPACING_UNIT}px`,
+          }}
+        >
+          {getHydraCloudSectionContent().description}
+        </div>
 
-      <Button
-        style={{ placeSelf: "flex-start", marginTop: 8 }}
-        theme="outline"
-        onClick={() => window.electron.openCheckout()}
+        <Button
+          style={{
+            placeSelf: "flex-start",
+          }}
+          theme="outline"
+          onClick={() => window.electron.openCheckout()}
+        >
+          <CloudIcon />
+          {getHydraCloudSectionContent().callToAction}
+        </Button>
+      </section>
+
+      <section
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+        }}
       >
-        <CloudIcon />
-        {getHydraCloudSectionContent().callToAction}
-      </Button>
+        <h3>{t("blocked_users")}</h3>
 
-      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
-        {t("blocked_users")}
-      </h3>
-
-      <ul className={styles.blockedUsersList}>
         {blockedUsers.length > 0 ? (
-          blockedUsers.map((user) => {
-            return (
-              <li key={user.id} className={styles.blockedUser}>
-                <div
-                  style={{
-                    display: "flex",
-                    gap: `${SPACING_UNIT}px`,
-                    alignItems: "center",
-                  }}
-                >
-                  <Avatar
-                    style={{ filter: "grayscale(100%)" }}
-                    size={32}
-                    src={user.profileImageUrl}
-                    alt={user.displayName}
-                  />
-                  <span>{user.displayName}</span>
-                </div>
+          <ul className={styles.blockedUsersList}>
+            {blockedUsers.map((user) => {
+              return (
+                <li key={user.id} className={styles.blockedUser}>
+                  <div
+                    style={{
+                      display: "flex",
+                      gap: `${SPACING_UNIT}px`,
+                      alignItems: "center",
+                    }}
+                  >
+                    <Avatar
+                      style={{ filter: "grayscale(100%)" }}
+                      size={32}
+                      src={user.profileImageUrl}
+                      alt={user.displayName}
+                    />
+                    <span>{user.displayName}</span>
+                  </div>
 
-                <button
-                  type="button"
-                  className={styles.unblockButton}
-                  onClick={() => handleUnblockClick(user.id)}
-                  disabled={isUnblocking}
-                >
-                  <XCircleFillIcon />
-                </button>
-              </li>
-            );
-          })
+                  <button
+                    type="button"
+                    className={styles.unblockButton}
+                    onClick={() => handleUnblockClick(user.id)}
+                    disabled={isUnblocking}
+                  >
+                    <XCircleFillIcon />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
         ) : (
           <small>{t("no_users_blocked")}</small>
         )}
-      </ul>
+      </section>
     </form>
   );
 }