PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

feat: adjust spacing

Browse Source
This commit is contained in:
Zamitto 2025-01-16 12:58:09 -03:00
parent 5d0e825880
commit d1fa4895e4
3 changed files with 93 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/locales/pt-BR/translation.json
View File

@ -271,7 +271,7 @@
"show_hidden_achievement_description": "Mostrar descrição de conquistas ocultas antes de debloqueá-las", "show_hidden_achievement_description": "Mostrar descrição de conquistas ocultas antes de debloqueá-las",
"account": "Conta", "account": "Conta",
"no_users_blocked": "Você não bloqueou nenhum usuário", "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", "manage_subscription": "Gerenciar assinatura",
"update_email": "Atualizar email", "update_email": "Atualizar email",
"update_password": "Atualizar senha", "update_password": "Atualizar senha",

3
src/renderer/src/pages/settings/settings-account.css.ts
View File

@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
export const form = style({ export const form = style({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT * 3}px`,
}); });
export const blockedUser = style({ export const blockedUser = style({
@ -36,5 +36,4 @@ export const blockedUsersList = style({
flexDirection: "column", flexDirection: "column",
alignItems: "flex-start", alignItems: "flex-start",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
marginTop: `${SPACING_UNIT}px`,
}); });

167
src/renderer/src/pages/settings/settings-account.tsx
View File

@ -158,7 +158,7 @@ export function SettingsAccount() {
}; };
return ( return (
<> <section>
<SelectField <SelectField
label={t("profile_visibility")} label={t("profile_visibility")}
value={field.value} value={field.value}
@ -172,105 +172,120 @@ export function SettingsAccount() {
/> />
<small>{t("profile_visibility_description")}</small> <small>{t("profile_visibility_description")}</small>
</> </section>
); );
}} }}
/> />
<div style={{ marginTop: `${SPACING_UNIT * 2}px` }}> <section>
<h4>{t("current_email")}</h4> <h4>{t("current_email")}</h4>
<p>{userDetails?.email ?? t("no_email_account")}</p> <p>{userDetails?.email ?? t("no_email_account")}</p>
</div>
<div <div
style={{ style={{
display: "flex", display: "flex",
justifyContent: "start", justifyContent: "start",
alignItems: "center", alignItems: "center",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
marginTop: 8, marginTop: `${SPACING_UNIT * 2}px`,
}} }}
>
<Button
theme="outline"
onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
> >
<MailIcon /> <Button
{t("update_email")} theme="outline"
</Button> onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
>
<MailIcon />
{t("update_email")}
</Button>
<Button <Button
theme="outline" theme="outline"
onClick={() => onClick={() =>
window.electron.openAuthWindow(AuthPage.UpdatePassword) window.electron.openAuthWindow(AuthPage.UpdatePassword)
} }
> >
<KeyIcon /> <KeyIcon />
{t("update_password")} {t("update_password")}
</Button> </Button>
</div> </div>
</section>
<div <section
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
marginTop: `${SPACING_UNIT * 2}px`, gap: `${SPACING_UNIT * 2}px`,
gap: `${SPACING_UNIT / 2}px`,
}} }}
> >
<h3>Hydra Cloud</h3> <h3>Hydra Cloud</h3>
{getHydraCloudSectionContent().description} <div
</div> style={{
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT}px`,
}}
>
{getHydraCloudSectionContent().description}
</div>
<Button <Button
style={{ placeSelf: "flex-start", marginTop: 8 }} style={{
theme="outline" placeSelf: "flex-start",
onClick={() => window.electron.openCheckout()} }}
theme="outline"
onClick={() => window.electron.openCheckout()}
>
<CloudIcon />
{getHydraCloudSectionContent().callToAction}
</Button>
</section>
<section
style={{
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT * 2}px`,
}}
> >
<CloudIcon /> <h3>{t("blocked_users")}</h3>
{getHydraCloudSectionContent().callToAction}
</Button>
<h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
{t("blocked_users")}
</h3>
<ul className={styles.blockedUsersList}>
{blockedUsers.length > 0 ? ( {blockedUsers.length > 0 ? (
blockedUsers.map((user) => { <ul className={styles.blockedUsersList}>
return ( {blockedUsers.map((user) => {
<li key={user.id} className={styles.blockedUser}> return (
<div <li key={user.id} className={styles.blockedUser}>
style={{ <div
display: "flex", style={{
gap: `${SPACING_UNIT}px`, display: "flex",
alignItems: "center", gap: `${SPACING_UNIT}px`,
}} alignItems: "center",
> }}
<Avatar >
style={{ filter: "grayscale(100%)" }} <Avatar
size={32} style={{ filter: "grayscale(100%)" }}
src={user.profileImageUrl} size={32}
alt={user.displayName} src={user.profileImageUrl}
/> alt={user.displayName}
<span>{user.displayName}</span> />
</div> <span>{user.displayName}</span>
</div>
<button <button
type="button" type="button"
className={styles.unblockButton} className={styles.unblockButton}
onClick={() => handleUnblockClick(user.id)} onClick={() => handleUnblockClick(user.id)}
disabled={isUnblocking} disabled={isUnblocking}
> >
<XCircleFillIcon /> <XCircleFillIcon />
</button> </button>
</li> </li>
); );
}) })}
</ul>
) : ( ) : (
<small>{t("no_users_blocked")}</small> <small>{t("no_users_blocked")}</small>
)} )}
</ul> </section>
</form> </form>
); );
} }