diff --git a/public/icons/password-open.svg b/public/icons/password-open.svg new file mode 100644 index 00000000..40e05b1a --- /dev/null +++ b/public/icons/password-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Discours/ProfileSettingsNavigation.module.scss b/src/components/Discours/ProfileSettingsNavigation.module.scss new file mode 100644 index 00000000..24cb0762 --- /dev/null +++ b/src/components/Discours/ProfileSettingsNavigation.module.scss @@ -0,0 +1,10 @@ +.navigationHeader { + @include font-size(1.8rem); + + font-weight: bold; + margin-top: 1.1em !important; +} + +.navigation { + @include font-size(1.4rem); +} diff --git a/src/components/Discours/ProfileSettingsNavigation.tsx b/src/components/Discours/ProfileSettingsNavigation.tsx new file mode 100644 index 00000000..05336ceb --- /dev/null +++ b/src/components/Discours/ProfileSettingsNavigation.tsx @@ -0,0 +1,21 @@ +import styles from './ProfileSettingsNavigation.module.scss' +import { clsx } from 'clsx' + +export default () => { + return ( + <> +

Настройки

+ + + ) +} diff --git a/src/components/Pages/profile/ProfileSecurityPage.tsx b/src/components/Pages/profile/ProfileSecurityPage.tsx new file mode 100644 index 00000000..0c1e7c3b --- /dev/null +++ b/src/components/Pages/profile/ProfileSecurityPage.tsx @@ -0,0 +1,104 @@ +import { PageWrap } from '../../_shared/PageWrap' +import type { PageProps } from '../../types' +import styles from './Settings.module.scss' +import { Icon } from '../../_shared/Icon' +import { clsx } from 'clsx' +import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation' + +export const ProfileSecurityPage = (props: PageProps) => { + return ( + +
+
+
+
+ +
+
+ +
+
+

Вход и безопасность

+

Настройки аккаунта, почты, пароля и способов входа.

+ +
+

Почта

+
+ + +
+ +

Изменить пароль

+
Текущий пароль
+
+ + +
+ +
Текущий пароль
+
+ + +
+ +
Подтвердите новый пароль
+
+ + +
+ +
+
+

Социальные сети

+ +
+
+ + +
+
+ + +
+
+ +
+

+ +

+
+
+
+
+
+ + ) +} + +// for lazy loading +export default ProfileSecurityPage diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx index 01041b37..29a405db 100644 --- a/src/components/Pages/profile/ProfileSettingsPage.tsx +++ b/src/components/Pages/profile/ProfileSettingsPage.tsx @@ -3,6 +3,7 @@ import type { PageProps } from '../../types' import styles from './Settings.module.scss' import { Icon } from '../../_shared/Icon' import { clsx } from 'clsx' +import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation' export const ProfileSettingsPage = (props: PageProps) => { return ( @@ -10,7 +11,9 @@ export const ProfileSettingsPage = (props: PageProps) => {
-
WIP
+
+ +
diff --git a/src/components/Pages/profile/ProfileSubscriptionsPage.tsx b/src/components/Pages/profile/ProfileSubscriptionsPage.tsx new file mode 100644 index 00000000..046bb8c7 --- /dev/null +++ b/src/components/Pages/profile/ProfileSubscriptionsPage.tsx @@ -0,0 +1,138 @@ +import { PageWrap } from '../../_shared/PageWrap' +import type { PageProps } from '../../types' +import styles from './Settings.module.scss' +import stylesSettings from '../../../styles/FeedSettings.module.scss' +import { Icon } from '../../_shared/Icon' +import { clsx } from 'clsx' +import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation' +import { SearchField } from '../../_shared/SearchField' + +export const ProfileSubscriptionsPage = (props: PageProps) => { + return ( + +
+
+
+
+ +
+
+ +
+
+

Подписки

+

Здесь можно управлять всеми своими подписками на сайте.

+ +
+ + +
+ {}} class={styles.searchField} /> +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+

+ +

+
+
+
+
+
+ + ) +} + +// for lazy loading +export default ProfileSubscriptionsPage diff --git a/src/components/Pages/profile/Settings.module.scss b/src/components/Pages/profile/Settings.module.scss index 70b5246d..26eec9d3 100644 --- a/src/components/Pages/profile/Settings.module.scss +++ b/src/components/Pages/profile/Settings.module.scss @@ -1,7 +1,17 @@ -h4 { +h4, +h5 { font-weight: 500; } +h4 { + @include font-size(2.4rem); +} + +h5 { + @include font-size(1.7rem); + margin: 0 0 0.8rem; +} + .avatarContainer { border-radius: 100%; overflow: hidden; @@ -103,3 +113,44 @@ h4 { .discoursNameField { flex: 1; } + +.leftNavigation { + top: 9rem !important; +} + +.passwordToggleControl { + position: absolute; + right: 1em; + transform: translateY(-50%); + top: 50%; +} + +.passwordInput { + padding-right: 3em !important; +} + +.searchContainer { + margin-top: 2.4rem; +} + +.searchField { + display: block; + + label:first-child { + opacity: 0.5; + position: absolute; + right: 1em; + transform: translateY(-50%); + top: 50%; + } +} + +.topicsList { + label { + @include font-size(1.7rem); + } +} + +.topicsListItem { + padding-right: 1.5rem !important; +} diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 75a470f5..4bb38cd2 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -33,6 +33,8 @@ import { InboxPage } from './Pages/InboxPage' import { LayoutShoutsPage } from './Pages/LayoutShoutsPage' import { SessionProvider } from '../context/session' import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage' +import { ProfileSecurityPage } from './Pages/profile/ProfileSecurityPage' +import { ProfileSubscriptionsPage } from './Pages/profile/ProfileSubscriptionsPage' // TODO: lazy load // const SomePage = lazy(() => import('./Pages/SomePage')) @@ -60,7 +62,9 @@ const pagesMap: Record> = { principles: PrinciplesPage, termsOfUse: TermsOfUsePage, thanks: ThanksPage, - profileSettings: ProfileSettingsPage + profileSettings: ProfileSettingsPage, + profileSecurity: ProfileSecurityPage, + profileSubscriptions: ProfileSubscriptionsPage } export const Root = (props: PageProps) => { diff --git a/src/components/Views/FeedSettings.tsx b/src/components/Views/FeedSettings.tsx index b6d70ad0..3175933f 100644 --- a/src/components/Views/FeedSettings.tsx +++ b/src/components/Views/FeedSettings.tsx @@ -1,4 +1,4 @@ -import '../../styles/FeedSettings.scss' +import styles from '../../styles/FeedSettings.module.scss' import { t } from '../../utils/intl' // type FeedSettingsSearchParams = { @@ -27,20 +27,20 @@ export const FeedSettingsView = (_props) => { -
-
+
+

Общее

-
-