Change Profile page dom

Signed-off-by: soupette <cyril.lpz@gmail.com>

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;

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 (
-    <form onSubmit={handleSubmit}>
+    <>
       <PageTitle title="User profile" />
-      <BackHeader onClick={goBack} />
-
-      <BaselineAlignment top size="2px" />
-
-      <ContainerFluid padding="18px 30px 0 30px">
-        <Header
-          isLoading={showHeaderLoader}
-          initialData={initialData}
-          label={headerLabel}
-          modifiedData={modifiedData}
-          onCancel={handleCancel}
-          showHeaderButtonLoader={showHeaderButtonLoader}
-        />
-      </ContainerFluid>
-
-      <BaselineAlignment top size="5px" />
-
-      {/* Experience block */}
-      <Padded size="md" left right bottom>
-        <Bloc isLoading={isLoading}>
-          <Padded size="sm" top left right bottom>
-            <Col>
-              <Padded size="sm" top bottom>
-                <Title>
-                  {formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
-                </Title>
-              </Padded>
-            </Col>
-
-            <BaselineAlignment top size="9px" />
-
-            <Row>
-              {Object.keys(form).map(key => (
-                <SizedInput
-                  {...form[key]}
-                  key={key}
-                  error={formErrors[key]}
-                  name={key}
-                  onChange={handleChange}
-                  value={get(modifiedData, key, '')}
-                />
-              ))}
-            </Row>
-          </Padded>
-        </Bloc>
-      </Padded>
-
-      <BaselineAlignment top size="13px" />
-
-      {/* Password block */}
-      <Padded size="md" left right bottom>
-        <Bloc>
-          <Padded size="sm" top left right bottom>
-            <Col>
-              <Padded size="sm" top bottom>
-                <Title>
-                  {formatMessage({ id: 'Settings.profile.form.section.password.title' })}
-                </Title>
-              </Padded>
-            </Col>
-
-            <BaselineAlignment top size="9px" />
-
-            <Row>
+      <form onSubmit={handleSubmit}>
+        <ContainerFluid padding="18px 30px 0 30px">
+          <Header
+            isLoading={showHeaderLoader}
+            initialData={initialData}
+            label={headerLabel}
+            modifiedData={modifiedData}
+            onCancel={handleCancel}
+            showHeaderButtonLoader={showHeaderButtonLoader}
+          />
+          <BaselineAlignment top size="3px" />
+          {/* Experience block */}
+          <FormBloc
+            isLoading={isLoading}
+            title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
+          >
+            {Object.keys(form).map(key => (
               <SizedInput
-                label="Auth.form.password.label"
-                type="password"
-                autoComplete="new-password"
-                validations={{}}
-                error={formErrors.password}
-                name="password"
+                {...form[key]}
+                key={key}
+                error={formErrors[key]}
+                name={key}
                 onChange={handleChange}
-                value={get(modifiedData, 'password', '')}
+                value={get(modifiedData, key, '')}
               />
+            ))}
+          </FormBloc>
+          <BaselineAlignment top size="2px" />
 
-              <SizedInput
-                label="Auth.form.confirmPassword.label"
-                type="password"
-                validations={{}}
-                error={formErrors.confirmPassword}
-                name="confirmPassword"
-                onChange={handleChange}
-                value={get(modifiedData, 'confirmPassword', '')}
-              />
-            </Row>
-          </Padded>
-        </Bloc>
-      </Padded>
+          {/* Password block */}
+          {!isLoading && (
+            <>
+              <Padded top size="md">
+                <FormBloc
+                  title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
+                >
+                  <SizedInput
+                    label="Auth.form.password.label"
+                    type="password"
+                    autoComplete="new-password"
+                    validations={{}}
+                    error={formErrors.password}
+                    name="password"
+                    onChange={handleChange}
+                    value={get(modifiedData, 'password', '')}
+                  />
 
-      <BaselineAlignment top size="13px" />
-
-      {/* Interface block */}
-      <Padded size="md" left right bottom>
-        <Bloc>
-          <Padded size="sm" top left right bottom>
-            <Col>
-              <Padded size="sm" top bottom>
-                <Title>
-                  {formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
-                </Title>
+                  <SizedInput
+                    label="Auth.form.confirmPassword.label"
+                    type="password"
+                    validations={{}}
+                    error={formErrors.confirmPassword}
+                    name="confirmPassword"
+                    onChange={handleChange}
+                    value={get(modifiedData, 'confirmPassword', '')}
+                  />
+                </FormBloc>
               </Padded>
-            </Col>
 
-            <BaselineAlignment top size="7px" />
+              <BaselineAlignment top size="13px" />
 
-            <div className="col-6">
-              <ProfilePageLabel htmlFor="">
-                {formatMessage({
-                  id: 'Settings.profile.form.section.experience.interfaceLanguage',
-                })}
-              </ProfilePageLabel>
+              {/* Interface block */}
+              <Padded top size="smd">
+                <FormBloc
+                  title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
+                >
+                  <ProfilePageLabel htmlFor="">
+                    {formatMessage({
+                      id: 'Settings.profile.form.section.experience.interfaceLanguage',
+                    })}
+                  </ProfilePageLabel>
+                  <Col xs="6">
+                    <Select
+                      aria-labelledby="interface-language"
+                      selectedValue={get(modifiedData, 'preferedLanguage')}
+                      onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
+                    >
+                      {languages.map(language => {
+                        const langName = languageNativeNames[language];
 
-              <Select
-                aria-labelledby="interface-language"
-                selectedValue={get(modifiedData, 'preferedLanguage')}
-                onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
-              >
-                {languages.map(language => {
-                  const langName = languageNativeNames[language];
+                        return (
+                          <Option value={language} key={language}>
+                            {langName}
+                          </Option>
+                        );
+                      })}
+                    </Select>
 
-                  return (
-                    <Option value={language} key={language}>
-                      {langName}
-                    </Option>
-                  );
-                })}
-              </Select>
-
-              <Padded size="sm" top bottom>
-                <Text color="grey">
-                  {formatMessage({
-                    id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
-                  })}
-                </Text>
+                    <Padded size="sm" top bottom>
+                      <Text color="grey">
+                        {formatMessage({
+                          id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
+                        })}
+                      </Text>
+                    </Padded>
+                  </Col>
+                </FormBloc>
               </Padded>
-            </div>
-          </Padded>
-        </Bloc>
-      </Padded>
-
-      <BaselineAlignment top size="80px" />
-    </form>
+            </>
+          )}
+        </ContainerFluid>
+      </form>
+    </>
   );
 };
 

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,