From d55222b3ad724cfc4905e3f520c66e80c0b7b72a Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 29 Jul 2022 13:06:08 +0700 Subject: [PATCH] refactored settings screen --- src/components/containers/Zone/index.tsx | 29 +++ .../containers/Zone/styles.module.scss | 36 ++++ .../profile/ProfileSettings/index.tsx | 171 +++--------------- .../ProfileSettings/styles.module.scss | 59 ------ .../profile/ProfileSidebarSettings/index.tsx | 64 +++++-- .../settings/UserSettingsView/index.tsx | 133 ++++++++++++++ .../UserSettingsView/styles.module.scss | 25 +++ tsconfig.tsbuildinfo | 2 +- 8 files changed, 294 insertions(+), 225 deletions(-) create mode 100644 src/components/containers/Zone/index.tsx create mode 100644 src/components/containers/Zone/styles.module.scss delete mode 100644 src/components/profile/ProfileSettings/styles.module.scss create mode 100644 src/containers/settings/UserSettingsView/index.tsx create mode 100644 src/containers/settings/UserSettingsView/styles.module.scss diff --git a/src/components/containers/Zone/index.tsx b/src/components/containers/Zone/index.tsx new file mode 100644 index 00000000..e26a63c8 --- /dev/null +++ b/src/components/containers/Zone/index.tsx @@ -0,0 +1,29 @@ +import React, { FC } from "react"; + +import classNames from "classnames"; + +import styles from "./styles.module.scss"; + +interface ZoneProps { + title?: string; + className?: string; + color?: "danger" | "normal"; +} + +const Zone: FC = ({ + title, + className, + children, + color = "normal", +}) => ( +
+ {!!title && ( +
+ {title} +
+ )} + {children} +
+); + +export { Zone }; diff --git a/src/components/containers/Zone/styles.module.scss b/src/components/containers/Zone/styles.module.scss new file mode 100644 index 00000000..4767c09a --- /dev/null +++ b/src/components/containers/Zone/styles.module.scss @@ -0,0 +1,36 @@ +@import "src/styles/variables"; + +$pad_danger: mix($red, $content_bg, 70%); +$pad_usual: mix(white, $content_bg, 10%); + +.title { + position: relative; + + span { + position: absolute; + top: -5px; + left: $radius; + transform: translate(0, -100%); + background: $pad_usual; + border-radius: 4px; + font: $font_10_semibold; + line-height: 12px; + padding: 2px $gap * 0.5; + text-transform: uppercase; + + .danger & { + background: $pad_danger; + } + } +} + +.pad { + padding: $gap * 1.5 $gap $gap; + box-shadow: inset $pad_usual 0 0 0 2px; + border-radius: $radius; + position: relative; + + &.danger { + box-shadow: inset $pad_danger 0 0 0 2px; + } +} diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx index 59ef138f..5d1666e2 100644 --- a/src/components/profile/ProfileSettings/index.tsx +++ b/src/components/profile/ProfileSettings/index.tsx @@ -1,156 +1,37 @@ -import React, { FC } from 'react'; +import { FC } from "react"; -import classNames from 'classnames'; +import { Filler } from "~/components/containers/Filler"; +import { Group } from "~/components/containers/Group"; +import { Padder } from "~/components/containers/Padder"; +import { Button } from "~/components/input/Button"; +import { UserSettingsView } from "~/containers/settings/UserSettingsView"; +import { + SettingsProvider, + useSettings, +} from "~/utils/providers/SettingsProvider"; -import { Superpower } from '~/components/boris/Superpower'; -import { Filler } from '~/components/containers/Filler'; -import { Group } from '~/components/containers/Group'; -import { Button } from '~/components/input/Button'; -import { InputText } from '~/components/input/InputText'; -import { Textarea } from '~/components/input/Textarea'; -import { ERROR_LITERAL } from '~/constants/errors'; -import { ProfileAccounts } from '~/containers/profile/ProfileAccounts'; -import { usePatchUser } from '~/hooks/auth/usePatchUser'; -import { useUser } from '~/hooks/auth/useUser'; -import { useSettingsForm } from '~/utils/providers/SettingsProvider'; -import { has } from '~/utils/ramda'; +const Form = ({ children }) => { + const { handleSubmit } = useSettings(); -import styles from './styles.module.scss'; - -const getError = (error?: string) => (error && has(error, ERROR_LITERAL) ? error : undefined); + return
{children}
; +}; const ProfileSettings: FC = () => { - const { user } = useUser(); - const { save } = usePatchUser(); - - const { handleSubmit, values, errors, handleChange } = useSettingsForm( - { ...user, password: '', newPassword: '' }, - save - ); - return ( -
- - - -
-
- Фото - Будет здесь. Кстати, ты видишь это, потому что включил суперсилы в Борисе. -
-
-
+ + + + + - -
- О себе -
- - - -