Created custom button

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

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

@@ -3,12 +3,13 @@ import { Button as Base } from '@buffetjs/core';
 
 const Button = styled(Base)`
   width: 100%;
-  text-transform: uppercase;
+  text-transform: ${({ textTransform }) => textTransform};
 `;
 
 Button.defaultProps = {
   color: 'primary',
   type: 'button',
+  textTransform: 'none',
 };
 
 export default Button;

packages/strapi-admin/admin/src/components/Users/FilterPicker/Button.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FilterIcon } from 'strapi-helper-plugin';
+
+const Button = () => {
+  return (
+    <>
+      <FilterIcon />
+      <FormattedMessage id="app.utils.filters" />
+    </>
+  );
+};
+
+export default Button;

packages/strapi-admin/admin/src/components/Users/FilterPicker/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+// import { FormattedMessage } from 'react-intl';
+import { Picker } from '@buffetjs/core';
+import Button from './Button';
+
+const FilterPicker = () => {
+  return <Picker renderButtonContent={Button} />;
+};
+
+export default FilterPicker;

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

@@ -4,8 +4,8 @@ import { useIntl } from 'react-intl';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import BaselineAlignment from '../../../../components/BaselineAlignement';
+import Button from '../../../../components/FullWidthButton';
 import AuthLink from '../AuthLink';
-import Button from '../Button';
 import Input from '../Input';
 import Logo from '../Logo';
 import Section from '../Section';
@@ -51,7 +51,7 @@ const Login = ({ formErrors, modifiedData, onChange, onSubmit, requestError }) =
                 value={modifiedData.rememberMe}
               />
               <BaselineAlignment top size="27px">
-                <Button type="submit" color="primary">
+                <Button type="submit" color="primary" textTransform="uppercase">
                   {formatMessage({ id: 'Auth.form.button.login' })}
                 </Button>
               </BaselineAlignment>

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

@@ -5,8 +5,8 @@ import { Checkbox, Flex, Padded, Text } from '@buffetjs/core';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
+import Button from '../../../../components/FullWidthButton';
 import AuthLink from '../AuthLink';
-import Button from '../Button';
 import Input from '../Input';
 import Logo from '../Logo';
 import Section from '../Section';
@@ -113,7 +113,7 @@ const Register = ({
                 <CustomLabel id="Auth.form.register.news.label" values={{ terms, policy }} />
               </Flex>
               <Padded top size="md">
-                <Button type="submit" color="primary">
+                <Button type="submit" color="primary" textTransform="uppercase">
                   {formatMessage({ id: 'Auth.form.button.register' })}
                 </Button>
               </Padded>

packages/strapi-admin/admin/src/containers/Users/ListPage/index.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useReducer, useState } from 'react';
 import { useQuery } from 'strapi-helper-plugin';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Flex } from '@buffetjs/core';
+import { Flex, Padded } from '@buffetjs/core';
 import BaselineAlignement from '../../../components/BaselineAlignement';
 import useSettingsHeaderSearchContext from '../../../hooks/useSettingsHeaderSearchContext';
 import Footer from '../../../components/Users/Footer';
 import List from '../../../components/Users/List';
+import FilterPicker from '../../../components/Users/FilterPicker';
 import SortPicker from '../../../components/Users/SortPicker';
 import Header from './Header';
 import ModalForm from './ModalForm';
@@ -99,6 +100,8 @@ const ListPage = () => {
       <BaselineAlignement top size="1px">
         <Flex flexWrap="wrap">
           <SortPicker onChange={handleChangeSort} value={_sort} />
+          <Padded right size="10px" />
+          <FilterPicker />
         </Flex>
       </BaselineAlignement>
       <ModalForm isOpen={isModalOpened} onToggle={handleToggle} />