Fixe baseline

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

examples/getstarted/api/address/models/Address.settings.json

@@ -22,8 +22,8 @@
       "type": "string"
     },
     "categories": {
-      "collection": "category",
       "via": "addresses",
+      "collection": "category",
       "dominant": true
     },
     "cover": {

examples/getstarted/api/category/models/Category.settings.json

@@ -12,11 +12,11 @@
   },
   "attributes": {
     "name": {
-      "type": "string"
+      "type": "text"
     },
     "addresses": {
-      "via": "categories",
-      "collection": "address"
+      "collection": "address",
+      "via": "categories"
     }
   }
 }

packages/strapi-admin/admin/src/components/FormBloc/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Padded, Text } from '@buffetjs/core';
+import { Flex, Padded, Text } from '@buffetjs/core';
 import { LoadingIndicator, Row } from 'strapi-helper-plugin';
 import PropTypes from 'prop-types';
 import BaselineAlignement from '../BaselineAlignement';
 import Bloc from '../Bloc';
 
-const FormBloc = ({ children, isLoading, title }) => (
+const FormBloc = ({ children, cta, isLoading, title, subtitle }) => (
   <Bloc>
     <BaselineAlignement top size={title ? '18px' : '22px'} />
     <Padded left right size="sm">
@@ -19,11 +19,19 @@ const FormBloc = ({ children, isLoading, title }) => (
           {title && (
             <>
               <Padded left right size="xs">
-                <Padded left right size="sm">
-                  <Text fontSize="lg" fontWeight="bold">
-                    {title}
-                  </Text>
-                </Padded>
+                <Flex justifyContent="space-between">
+                  <Padded left right size="sm">
+                    <Text fontSize="lg" fontWeight="bold">
+                      {title}
+                    </Text>
+                    {subtitle && (
+                      <Text color="grey" lineHeight="1.8rem">
+                        {subtitle}
+                      </Text>
+                    )}
+                  </Padded>
+                  {cta}
+                </Flex>
               </Padded>
               <BaselineAlignement top size="18px" />
             </>
@@ -36,13 +44,17 @@ const FormBloc = ({ children, isLoading, title }) => (
 );
 
 FormBloc.defaultProps = {
+  cta: null,
   isLoading: false,
+  subtitle: null,
   title: null,
 };
 
 FormBloc.propTypes = {
   children: PropTypes.node.isRequired,
+  cta: PropTypes.any,
   isLoading: PropTypes.bool,
+  subtitle: PropTypes.string,
   title: PropTypes.string,
 };
 

packages/strapi-admin/admin/src/containers/AuthPage/components/Box/index.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@buffetjs/core';
-import BaselineAlignment from '../../../../components/BaselineAlignement';
 import Wrapper from './Wrapper';
 
 const Box = ({ children, errorMessage }) => (
   <Wrapper>
-    <Text fontSize="md" color="#f64d0a" style={{ textAlign: 'center' }}>
+    <Text fontSize="md" color="#f64d0a" style={{ textAlign: 'center' }} lineHeight="18px">
       {errorMessage}&nbsp;
     </Text>
-    <BaselineAlignment top size="2px">
-      {children}
-    </BaselineAlignment>
+    {children}
   </Wrapper>
 );
 

packages/strapi-admin/admin/src/containers/AuthPage/components/Login/index.js

@@ -20,7 +20,7 @@ const Login = ({ formErrors, modifiedData, onChange, onSubmit, requestError }) =
         <Logo />
       </Section>
       <Section withBackground>
-        <BaselineAlignment top size="24px">
+        <BaselineAlignment top size="25px">
           <Box errorMessage={get(requestError, 'errorMessage', null)}>
             <form onSubmit={onSubmit}>
               <Input

packages/strapi-admin/admin/src/containers/AuthPage/components/Oops/Img.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Img = styled.img`
+  max-height: 77px;
+`;
+
+export default Img;

packages/strapi-admin/admin/src/containers/AuthPage/components/Oops/Text.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Text as Base } from '@buffetjs/core';
+
+const Text = styled(Base)`
+  font-size: 24px;
+`;
+
+export default Text;

packages/strapi-admin/admin/src/containers/AuthPage/components/Oops/index.js

@@ -4,8 +4,11 @@ import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'strapi-helper-plugin';
 import BaselineAlignment from '../../../../components/BaselineAlignement';
+import OopsLogo from '../../../../assets/images/oops.png';
 import Logo from '../Logo';
 import Section from '../Section';
+import Img from './Img';
+import CustomText from './Text';
 
 const Oops = () => {
   const { push } = useHistory();
@@ -15,11 +18,7 @@ const Oops = () => {
     push('/auth/login');
   };
 
-  // TODO: I am not sure about this login
-  // @alexandrebodin @JAB
   const message = query.get('info') || formatMessage({ id: 'Auth.components.Oops.text' });
-  // TODO add logo when available
-  // This component is temporary
 
   return (
     <>
@@ -27,15 +26,16 @@ const Oops = () => {
         <Logo />
       </Section>
       <Section withBackground textAlign="center">
-        <BaselineAlignment top size="168px">
-          <Text fontSize="lg" fontWeight="bold">
-            Oops...
-          </Text>
+        <BaselineAlignment top size="60px">
+          <Img src={OopsLogo} />
+          <BaselineAlignment top size="26px">
+            <CustomText fontWeight="bold">Oops...</CustomText>
+          </BaselineAlignment>
         </BaselineAlignment>
-        <BaselineAlignment top size="18px">
-          <Text fontSize="md">{message}</Text>
+        <BaselineAlignment top size="14px">
+          <Text fontSize="lg">{message}</Text>
         </BaselineAlignment>
-        <BaselineAlignment top size="50px">
+        <BaselineAlignment top size="48px">
           <Button onClick={handleClick} type="button">
             {formatMessage({ id: 'Auth.form.button.go-home' })}
           </Button>

packages/strapi-admin/admin/src/containers/AuthPage/components/Register/index.js

@@ -51,7 +51,7 @@ const Register = ({
         <Logo />
       </Section>
       <Section withBackground>
-        <Padded top size="23px">
+        <Padded top size="25px">
           <Box errorMessage={get(requestError, 'errorMessage', null)}>
             <form onSubmit={onSubmit}>
               <InputWrapper>

packages/strapi-admin/admin/src/containers/AuthPage/index.js

@@ -204,6 +204,11 @@ const AuthPage = ({ hasAdmin }) => {
     return <Redirect to="/" />;
   }
 
+  // Redirect the user to the login page if there is already an admin user
+  if (hasAdmin && authType === 'register-admin') {
+    return <Redirect to="/" />;
+  }
+
   // Redirect the user to the register-admin if it is the first user
   if (!hasAdmin && authType !== 'register-admin') {
     return <Redirect to="/auth/register-admin" />;
@@ -220,7 +225,7 @@ const AuthPage = ({ hasAdmin }) => {
       <NavTopRightWrapper>
         <LocaleToggle isLogged className="localeDropdownMenuNotLogged" />
       </NavTopRightWrapper>
-      <BaselineAlignment top size="80px">
+      <BaselineAlignment top size="78px">
         <Component
           fieldsToDisable={fieldsToDisable}
           formErrors={formErrors}

packages/strapi-admin/admin/src/containers/Roles/CreatePage/ButtonWithNumber.js

@@ -10,7 +10,9 @@ const ButtonWithNumber = ({ number, onClick }) => (
     <Flex justifyContent="space-between" alignItems="center">
       <FontAwesomeIcon icon="users" />
       <Padded left size="xs" />
-      <Text color="white">Users with this role</Text>
+      <Text color="white" fontWeight="semiBold">
+        Users with this role
+      </Text>
       <Padded left size="xs" />
       <NumberCard>
         <Text fontSize="xs" fontWeight="bold" color="mediumBlue">

packages/strapi-admin/admin/src/containers/Roles/CreatePage/FormCard.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const FormCard = styled.div`
-  padding: 2.5rem;
-  background-color: ${({ theme }) => theme.main.colors.white};
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  box-shadow: ${({ theme }) => `0 2px 4px 0 ${theme.main.colors.darkGrey}`};
-`;
-
-export default FormCard;

packages/strapi-admin/admin/src/containers/Roles/CreatePage/InputWrapper.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const InputWrapper = styled.div`
-  width: 100%;
-`;
-
-export default InputWrapper;

packages/strapi-admin/admin/src/containers/Roles/CreatePage/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import { Header, Inputs } from '@buffetjs/custom';
-import { Text, Flex, Padded } from '@buffetjs/core';
+import { Header } from '@buffetjs/custom';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
-
-import FormCard from './FormCard';
-import ButtonWithNumber from './ButtonWithNumber';
-import InputWrapper from './InputWrapper';
-import schema from './utils/schema';
+import BaselineAlignement from '../../../components/BaselineAlignement';
+import ContainerFluid from '../../../components/ContainerFluid';
+import FormCard from '../../../components/FormBloc';
 import {
   Tabs,
   CollectionTypesPermissions,
@@ -15,6 +12,9 @@ import {
   PluginsPermissions,
   SettingsPermissions,
 } from '../../../components/Roles';
+import SizedInput from '../../../components/SizedInput';
+import ButtonWithNumber from './ButtonWithNumber';
+import schema from './utils/schema';
 
 const CreatePage = () => {
   const { formatMessage } = useIntl();
@@ -34,7 +34,7 @@ const CreatePage = () => {
       }),
       onClick: handleSubmit,
       color: 'success',
-      type: 'button',
+      type: 'submit',
     },
   ];
 
@@ -46,6 +46,14 @@ const CreatePage = () => {
     }
   };
 
+  const cta = (
+    <ButtonWithNumber number={0} onClick={() => console.log('Open user modal')}>
+      {formatMessage({
+        id: 'Settings.roles.form.button.users-with-role',
+      })}
+    </ButtonWithNumber>
+  );
+
   return (
     <Formik
       initialValues={{ name: '', description: '' }}
@@ -53,76 +61,61 @@ const CreatePage = () => {
       validationSchema={schema}
     >
       {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
-        <>
-          <Header
-            title={{
-              label: formatMessage({
-                id: 'Settings.roles.create.title',
-              }),
-            }}
-            content={formatMessage({
-              id: 'Settings.roles.create.description',
-            })}
-            actions={headerActions(handleSubmit, handleReset)}
-          />
-          <FormCard>
-            <Padded bottom size="sm">
-              <Flex justifyContent="space-between">
-                <div>
-                  <Text fontSize="lg" fontWeight="bold" lineHeight="1.8rem">
-                    {formatMessage({
-                      id: 'Settings.roles.form.title',
-                    })}
-                  </Text>
-                  <Text color="grey">
-                    {formatMessage({
-                      id: 'Settings.roles.form.description',
-                    })}
-                  </Text>
-                </div>
-                <ButtonWithNumber number={0} onClick={() => console.log('Open user modal')}>
-                  {formatMessage({
-                    id: 'Settings.roles.form.button.users-with-role',
-                  })}
-                </ButtonWithNumber>
-              </Flex>
-            </Padded>
-            <Padded top size="sm" />
-            <Flex justifyContent="space-between">
-              <InputWrapper>
-                <Inputs
-                  label="Name"
-                  name="name"
-                  type="text"
-                  error={errors.name ? formatMessage({ id: errors.name }) : null}
-                  onBlur={handleBlur}
-                  value={values.name}
-                  onChange={handleChange}
-                />
-              </InputWrapper>
-              <Padded left size="md" />
-              <InputWrapper>
-                <Inputs
-                  label="Description"
-                  name="description"
-                  type="textarea"
-                  onBlur={handleBlur}
-                  value={values.description}
-                  onChange={handleChange}
-                />
-              </InputWrapper>
-            </Flex>
-          </FormCard>
-          <Padded top size="md" />
-          <Padded top size="xs">
-            <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
-              <CollectionTypesPermissions />
-              <SingleTypesPermissions />
-              <PluginsPermissions />
-              <SettingsPermissions />
-            </Tabs>
-          </Padded>
-        </>
+        <form onSubmit={handleSubmit}>
+          <ContainerFluid padding="0">
+            <Header
+              title={{
+                label: formatMessage({
+                  id: 'Settings.roles.create.title',
+                }),
+              }}
+              content={formatMessage({
+                id: 'Settings.roles.create.description',
+              })}
+              actions={headerActions(handleSubmit, handleReset)}
+            />
+            <BaselineAlignement top size="3px" />
+            <FormCard
+              title={formatMessage({
+                id: 'Settings.roles.form.title',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.roles.form.description',
+              })}
+              cta={cta}
+            >
+              <SizedInput
+                label="Name"
+                name="name"
+                type="text"
+                error={errors.name ? { id: errors.name } : null}
+                onBlur={handleBlur}
+                value={values.name}
+                onChange={handleChange}
+              />
+
+              <SizedInput
+                label="Description"
+                name="description"
+                type="textarea"
+                onBlur={handleBlur}
+                value={values.description}
+                onChange={handleChange}
+                // Override the default height of the textarea
+                style={{ height: 115 }}
+              />
+            </FormCard>
+
+            <BaselineAlignement top size="30px">
+              <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
+                <CollectionTypesPermissions />
+                <SingleTypesPermissions />
+                <PluginsPermissions />
+                <SettingsPermissions />
+              </Tabs>
+            </BaselineAlignement>
+          </ContainerFluid>
+        </form>
       )}
     </Formik>
   );