feat: adjust spacing

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",

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`,
 });

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,15 +172,14 @@ 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={{
@@ -188,7 +187,7 @@ export function SettingsAccount() {
             justifyContent: "start",
             alignItems: "center",
             gap: `${SPACING_UNIT}px`,
-          marginTop: 8,
+            marginTop: `${SPACING_UNIT * 2}px`,
           }}
         >
           <Button
@@ -209,35 +208,50 @@ export function SettingsAccount() {
             {t("update_password")}
           </Button>
         </div>
+      </section>
 
+      <section
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+        }}
+      >
+        <h3>Hydra Cloud</h3>
         <div
           style={{
             display: "flex",
             flexDirection: "column",
-          marginTop: `${SPACING_UNIT * 2}px`,
-          gap: `${SPACING_UNIT / 2}px`,
+            gap: `${SPACING_UNIT}px`,
           }}
         >
-        <h3>Hydra Cloud</h3>
           {getHydraCloudSectionContent().description}
         </div>
 
         <Button
-        style={{ placeSelf: "flex-start", marginTop: 8 }}
+          style={{
+            placeSelf: "flex-start",
+          }}
           theme="outline"
           onClick={() => window.electron.openCheckout()}
         >
           <CloudIcon />
           {getHydraCloudSectionContent().callToAction}
         </Button>
+      </section>
 
-      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
-        {t("blocked_users")}
-      </h3>
+      <section
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+        }}
+      >
+        <h3>{t("blocked_users")}</h3>
 
-      <ul className={styles.blockedUsersList}>
         {blockedUsers.length > 0 ? (
-          blockedUsers.map((user) => {
+          <ul className={styles.blockedUsersList}>
+            {blockedUsers.map((user) => {
               return (
                 <li key={user.id} className={styles.blockedUser}>
                   <div
@@ -266,11 +280,12 @@ export function SettingsAccount() {
                   </button>
                 </li>
               );
-          })
+            })}
+          </ul>
         ) : (
           <small>{t("no_users_blocked")}</small>
         )}
-      </ul>
+      </section>
     </form>
   );
 }