diff --git a/src/renderer/src/pages/settings/add-download-source-modal.scss b/src/renderer/src/pages/settings/add-download-source-modal.scss new file mode 100644 index 00000000..f6b5d151 --- /dev/null +++ b/src/renderer/src/pages/settings/add-download-source-modal.scss @@ -0,0 +1,27 @@ +@use "../../scss/globals.scss"; + +.add-download-source-modal { + &__container { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + min-width: 500px; + } + + &__validation-result { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: calc(globals.$spacing-unit * 3); + } + + &__validation-info { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit / 2); + } + + &__validate-button { + align-self: flex-end; + } +} diff --git a/src/renderer/src/pages/settings/add-download-source-modal.tsx b/src/renderer/src/pages/settings/add-download-source-modal.tsx index e3d43f4b..2a9b5dd6 100644 --- a/src/renderer/src/pages/settings/add-download-source-modal.tsx +++ b/src/renderer/src/pages/settings/add-download-source-modal.tsx @@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button, Modal, TextField } from "@renderer/components"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { settingsContext } from "@renderer/context"; import { useForm } from "react-hook-form"; @@ -11,6 +10,7 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { downloadSourcesTable } from "@renderer/dexie"; import type { DownloadSourceValidationResult } from "@types"; import { downloadSourcesWorker } from "@renderer/workers"; +import "./add-download-source-modal.scss"; interface AddDownloadSourceModalProps { visible: boolean; @@ -138,14 +138,7 @@ export function AddDownloadSourceModal({ description={t("add_download_source_description")} onClose={onClose} > -
+
@@ -165,21 +158,8 @@ export function AddDownloadSourceModal({ /> {validationResult && ( -
-
+
+

{validationResult?.name}

{t("found_download_option", { diff --git a/src/renderer/src/pages/settings/settings-account.scss b/src/renderer/src/pages/settings/settings-account.scss new file mode 100644 index 00000000..129a854a --- /dev/null +++ b/src/renderer/src/pages/settings/settings-account.scss @@ -0,0 +1,67 @@ +@use "../../scss/globals.scss"; + +.settings-account { + &__form { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__section { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__actions { + display: flex; + gap: globals.$spacing-unit; + margin-top: globals.$spacing-unit; + } + + &__subscription-info { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__subscription-button { + place-self: flex-start; + } + + &__blocked-users { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__blocked-user { + display: flex; + align-items: center; + justify-content: space-between; + gap: globals.$spacing-unit; + } + + &__user-info { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + + &__user-avatar { + filter: grayscale(100%); + } + + &__unblock-button { + color: globals.$danger-color; + cursor: pointer; + background: none; + border: none; + padding: 0; + display: flex; + align-items: center; + } +} diff --git a/src/renderer/src/pages/settings/settings-account.tsx b/src/renderer/src/pages/settings/settings-account.tsx index d43e5b2d..5ee0a2fb 100644 --- a/src/renderer/src/pages/settings/settings-account.tsx +++ b/src/renderer/src/pages/settings/settings-account.tsx @@ -1,9 +1,6 @@ import { Avatar, Button, SelectField } from "@renderer/components"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; - -import * as styles from "./settings-account.css"; import { useDate, useToast, useUserDetails } from "@renderer/hooks"; import { useCallback, useContext, useEffect, useState } from "react"; import { @@ -14,6 +11,7 @@ import { } from "@primer/octicons-react"; import { settingsContext } from "@renderer/context"; import { AuthPage } from "@shared"; +import "./settings-account.scss"; interface FormValues { profileVisibility: "PUBLIC" | "FRIENDS" | "PRIVATE"; @@ -145,7 +143,7 @@ export function SettingsAccount() { if (!userDetails) return null; return ( -
+ +
-
+

{t("current_email")}

{userDetails?.email ?? t("no_email_account")}

-
+
-
+

Hydra Cloud

-
+
{getHydraCloudSectionContent().description}
-
+

{t("blocked_users")}

{blockedUsers.length > 0 ? ( -
    +
      {blockedUsers.map((user) => { return ( -
    • -
      +
    • +
      handleUnblockClick(user.id)} disabled={isUnblocking} > diff --git a/src/renderer/src/pages/settings/settings-behavior.scss b/src/renderer/src/pages/settings/settings-behavior.scss new file mode 100644 index 00000000..693ef08a --- /dev/null +++ b/src/renderer/src/pages/settings/settings-behavior.scss @@ -0,0 +1,13 @@ +@use "../../scss/globals.scss"; + +.settings-behavior { + &__checkbox-container { + opacity: globals.$disabled-opacity; + cursor: not-allowed; + + &--enabled { + opacity: 1; + cursor: pointer; + } + } +} diff --git a/src/renderer/src/pages/settings/settings-behavior.tsx b/src/renderer/src/pages/settings/settings-behavior.tsx index 28c50256..b7bbdfaa 100644 --- a/src/renderer/src/pages/settings/settings-behavior.tsx +++ b/src/renderer/src/pages/settings/settings-behavior.tsx @@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"; import { CheckboxField } from "@renderer/components"; import { useAppSelector } from "@renderer/hooks"; import { settingsContext } from "@renderer/context"; +import "./settings-behavior.scss"; export function SettingsBehavior() { const userPreferences = useAppSelector( @@ -77,10 +78,11 @@ export function SettingsBehavior() { )} {showRunAtStartup && ( -
      +
      { diff --git a/src/renderer/src/pages/settings/settings-download-sources.scss b/src/renderer/src/pages/settings/settings-download-sources.scss new file mode 100644 index 00000000..6ef42283 --- /dev/null +++ b/src/renderer/src/pages/settings/settings-download-sources.scss @@ -0,0 +1,56 @@ +@use "../../scss/globals.scss"; + +.settings-download-sources { + &__list { + padding: 0; + margin: 0; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + } + + &__item { + display: flex; + flex-direction: column; + background-color: globals.$dark-background-color; + border-radius: 8px; + padding: calc(globals.$spacing-unit * 2); + gap: globals.$spacing-unit; + border: solid 1px globals.$border-color; + transition: all ease 0.2s; + + &--syncing { + opacity: globals.$disabled-opacity; + } + } + + &__item-header { + margin-bottom: globals.$spacing-unit; + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__navigate-button { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + color: globals.$muted-color; + text-decoration: underline; + cursor: pointer; + background: none; + border: none; + padding: 0; + + &:disabled { + cursor: default; + text-decoration: none; + } + } +} diff --git a/src/renderer/src/pages/settings/settings-download-sources.tsx b/src/renderer/src/pages/settings/settings-download-sources.tsx index cacd1910..11afa630 100644 --- a/src/renderer/src/pages/settings/settings-download-sources.tsx +++ b/src/renderer/src/pages/settings/settings-download-sources.tsx @@ -3,7 +3,6 @@ import { useContext, useEffect, useState } from "react"; import { TextField, Button, Badge } from "@renderer/components"; import { useTranslation } from "react-i18next"; -import * as styles from "./settings-download-sources.css"; import type { DownloadSource } from "@types"; import { NoEntryIcon, PlusCircleIcon, SyncIcon } from "@primer/octicons-react"; import { AddDownloadSourceModal } from "./add-download-source-modal"; @@ -14,6 +13,7 @@ import { downloadSourcesTable } from "@renderer/dexie"; import { downloadSourcesWorker } from "@renderer/workers"; import { useNavigate } from "react-router-dom"; import { setFilters, clearFilters } from "@renderer/features"; +import "./settings-download-sources.scss"; export function SettingsDownloadSources() { const [showAddDownloadSourceModal, setShowAddDownloadSourceModal] = @@ -118,7 +118,7 @@ export function SettingsDownloadSources() {

      {t("download_sources_description")}

      -
      +
      -
        +
          {downloadSources.map((downloadSource) => (
        • -
          +

          {downloadSource.name}

          @@ -161,7 +159,7 @@ export function SettingsDownloadSources() { + } placeholder="API Token" - containerProps={{ style: { marginTop: `${SPACING_UNIT}px` } }} hint={ @@ -109,14 +114,6 @@ export function SettingsRealDebrid() { } /> )} - - ); } diff --git a/src/renderer/src/pages/settings/settings.scss b/src/renderer/src/pages/settings/settings.scss new file mode 100644 index 00000000..49b228bc --- /dev/null +++ b/src/renderer/src/pages/settings/settings.scss @@ -0,0 +1,27 @@ +@use "../../scss/globals.scss"; + +.settings { + &__container { + padding: 24px; + width: 100%; + display: flex; + } + + &__content { + background-color: globals.$background-color; + width: 100%; + height: 100%; + padding: calc(globals.$spacing-unit * 3); + border: solid 1px globals.$border-color; + box-shadow: 0px 0px 15px 0px #000000; + border-radius: 8px; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + } + + &__categories { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/settings/settings.tsx b/src/renderer/src/pages/settings/settings.tsx index 5fba6c5d..75989aed 100644 --- a/src/renderer/src/pages/settings/settings.tsx +++ b/src/renderer/src/pages/settings/settings.tsx @@ -1,11 +1,8 @@ import { Button } from "@renderer/components"; - -import * as styles from "./settings.css"; import { useTranslation } from "react-i18next"; import { SettingsRealDebrid } from "./settings-real-debrid"; import { SettingsGeneral } from "./settings-general"; import { SettingsBehavior } from "./settings-behavior"; - import { SettingsDownloadSources } from "./settings-download-sources"; import { SettingsContextConsumer, @@ -14,10 +11,10 @@ import { import { SettingsAccount } from "./settings-account"; import { useUserDetails } from "@renderer/hooks"; import { useMemo } from "react"; +import "./settings.scss"; export default function Settings() { const { t } = useTranslation("settings"); - const { userDetails } = useUserDetails(); const categories = useMemo(() => { @@ -57,9 +54,9 @@ export default function Settings() { }; return ( -
          -
          -
          +
          +
          +
          {categories.map((category, index) => (