diff --git a/packages/strapi-admin/admin/src/containers/ProfilePage/components.js b/packages/strapi-admin/admin/src/containers/ProfilePage/components.js index c83041daf2..e32258d133 100644 --- a/packages/strapi-admin/admin/src/containers/ProfilePage/components.js +++ b/packages/strapi-admin/admin/src/containers/ProfilePage/components.js @@ -1,11 +1,9 @@ import styled from 'styled-components'; -import { Label, Text } from '@buffetjs/core'; +import { Label } from '@buffetjs/core'; -export const Title = styled(Text)` - text-transform: uppercase; - color: ${({ theme }) => theme.main.colors.grey}; -`; - -export const ProfilePageLabel = styled(Label)` +const ProfilePageLabel = styled(Label)` margin-bottom: 1rem; + padding-left: 15px; `; + +export default ProfilePageLabel; diff --git a/packages/strapi-admin/admin/src/containers/ProfilePage/index.js b/packages/strapi-admin/admin/src/containers/ProfilePage/index.js index a81b43c0f2..651f55f51b 100644 --- a/packages/strapi-admin/admin/src/containers/ProfilePage/index.js +++ b/packages/strapi-admin/admin/src/containers/ProfilePage/index.js @@ -1,23 +1,21 @@ import React, { useMemo } from 'react'; -import { BackHeader, BaselineAlignment, auth, Select, Option, Row } from 'strapi-helper-plugin'; +import { BaselineAlignment, auth, Select, Option } from 'strapi-helper-plugin'; import { Padded, Text } from '@buffetjs/core'; import { Col } from 'reactstrap'; -import { useHistory } from 'react-router-dom'; import { get } from 'lodash'; import { useIntl } from 'react-intl'; +import { languages, languageNativeNames } from '../../i18n'; import ContainerFluid from '../../components/ContainerFluid'; import PageTitle from '../../components/PageTitle'; import SizedInput from '../../components/SizedInput'; import { Header } from '../../components/Settings'; +import FormBloc from '../../components/FormBloc'; import { useSettingsForm } from '../../hooks'; -import { form, schema } from './utils'; import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage'; -import { languages, languageNativeNames } from '../../i18n'; -import { Title, ProfilePageLabel } from './components'; -import Bloc from '../../components/Bloc'; +import ProfilePageLabel from './components'; +import { form, schema } from './utils'; const ProfilePage = () => { - const { goBack } = useHistory(); const changeLanguage = useChangeLanguage(); const { formatMessage } = useIntl(); @@ -50,150 +48,111 @@ const ProfilePage = () => { }, [modifiedData]); return ( -
+ <> - - - - - -
- - - - - {/* Experience block */} - - - - - - - {formatMessage({ id: 'Settings.profile.form.section.profile.title' })} - - - - - - - - {Object.keys(form).map(key => ( - - ))} - - - - - - - - {/* Password block */} - - - - - - - {formatMessage({ id: 'Settings.profile.form.section.password.title' })} - - - - - - - + + +
+ + {/* Experience block */} + + {Object.keys(form).map(key => ( + ))} + + - - - - - + {/* Password block */} + {!isLoading && ( + <> + + + - - - {/* Interface block */} - - - - - - - {formatMessage({ id: 'Settings.profile.form.section.experience.title' })} - + + - - + -
- - {formatMessage({ - id: 'Settings.profile.form.section.experience.interfaceLanguage', - })} - + {/* Interface block */} + + + + {formatMessage({ + id: 'Settings.profile.form.section.experience.interfaceLanguage', + })} + + + setField('preferedLanguage', nextLocaleCode)} - > - {languages.map(language => { - const langName = languageNativeNames[language]; + return ( + + ); + })} + - return ( - - ); - })} - - - - - {formatMessage({ - id: 'Settings.profile.form.section.experience.interfaceLanguage.hint', - })} - + + + {formatMessage({ + id: 'Settings.profile.form.section.experience.interfaceLanguage.hint', + })} + + + + -
- - - - - - + + )} + + + ); }; diff --git a/packages/strapi-helper-plugin/lib/src/components/Select/styles.js b/packages/strapi-helper-plugin/lib/src/components/Select/styles.js index 1963952065..032545597f 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Select/styles.js +++ b/packages/strapi-helper-plugin/lib/src/components/Select/styles.js @@ -101,6 +101,7 @@ const getStyles = theme => { ...base, padding: '2px 10px 4px 10px', // These value don't exist in the theme fontSize: sizes.fonts.md, + lineHeight: '18px', }), indicatorsContainer: base => ({ ...base,