diff --git a/public/icons/apple.svg b/public/icons/apple.svg new file mode 100644 index 00000000..5d9607c8 --- /dev/null +++ b/public/icons/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/password-hide.svg b/public/icons/password-hide.svg new file mode 100644 index 00000000..d21dec32 --- /dev/null +++ b/public/icons/password-hide.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/password-open.svg b/public/icons/password-open.svg index 40e05b1a..cf5339bc 100644 --- a/public/icons/password-open.svg +++ b/public/icons/password-open.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/Pages/profile/ProfileSecurityPage.tsx b/src/components/Pages/profile/ProfileSecurityPage.tsx index 0c1e7c3b..c21a8a7b 100644 --- a/src/components/Pages/profile/ProfileSecurityPage.tsx +++ b/src/components/Pages/profile/ProfileSecurityPage.tsx @@ -32,17 +32,17 @@ export const ProfileSecurityPage = (props: PageProps) => {
Текущий пароль
-
-
Текущий пароль
+
Новый пароль
{ id="password-new" class={clsx(styles.passwordInput, 'nolabel')} /> -
@@ -63,33 +63,64 @@ export const ProfileSecurityPage = (props: PageProps) => { id="password-new-confirm" class={clsx(styles.passwordInput, 'nolabel')} /> - -
-
-

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

- -
-
- - -
-
- -
+ +
VK
+
+

+ -

+

+
+ +
Facebook
+
+

+ +

+
+ +
Apple
+
+

+ +


- +

diff --git a/src/components/Pages/profile/Settings.module.scss b/src/components/Pages/profile/Settings.module.scss index 26eec9d3..dca79dc8 100644 --- a/src/components/Pages/profile/Settings.module.scss +++ b/src/components/Pages/profile/Settings.module.scss @@ -154,3 +154,36 @@ h5 { .topicsListItem { padding-right: 1.5rem !important; } + +.socialButton { + color: #000; + display: flex; + padding: 0.8em 1em; + transition: background-color 0.3s, color 0.3s; + + &:hover { + background: #000; + color: #fff; + } + + img { + vertical-align: middle; + } + + .icon { + margin-right: 1em; + } +} + +.socialButtonApple { + &:hover { + .icon { + filter: invert(1); + } + } + + .icon { + filter: invert(0); + transition: filter 0.3s; + } +}