@strapi/admin 4.2.0-alpha.1 → 4.2.0-alpha.5

package/admin/src/pages/ProfilePage/index.js

@@ -9,13 +9,12 @@ import {
   useNotification,
   useOverlayBlocker,
   auth,
-  useTracking,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
-import upperFirst from 'lodash/upperFirst';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 import { Helmet } from 'react-helmet';
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
@@ -32,15 +31,10 @@ import Eye from '@strapi/icons/Eye';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Check from '@strapi/icons/Check';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
-import { useThemeToggle } from '../../hooks';
 import { fetchUser, putUser } from './utils/api';
 import schema from './utils/schema';
 import { getFullName } from '../../utils';
 
-const DocumentationLink = styled.a`
-  color: ${({ theme }) => theme.colors.primary600};
-`;
-
 const PasswordInput = styled(TextInput)`
   ::-ms-reveal {
     display: none;
@@ -65,11 +59,9 @@ const ProfilePage = () => {
   const { setUserDisplayName } = useAppInfos();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { notifyStatus } = useNotifyAT();
-  const { currentTheme, themes: allApplicationThemes, onChangeTheme } = useThemeToggle();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery('user', () => fetchUser(), {
@@ -91,18 +83,14 @@ const ProfilePage = () => {
 
   const isLoading = status !== 'success';
 
-  const submitMutation = useMutation(body => putUser(body), {
+  const submitMutation = useMutation(body => putUser(omit(body, 'confirmPassword')), {
     onSuccess: async data => {
       await queryClient.invalidateQueries('user');
 
-      auth.setUserInfo(
-        pick(data, ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'])
-      );
+      auth.setUserInfo(data);
       const userDisplayName = data.username || getFullName(data.firstname, data.lastname);
       setUserDisplayName(userDisplayName);
       changeLocale(data.preferedLanguage);
-      onChangeTheme(data.currentTheme);
-      trackUsage('didChangeMode', { newMode: data.currentTheme });
 
       toggleNotification({
         type: 'success',
@@ -140,16 +128,9 @@ const ProfilePage = () => {
     );
   };
 
-  const fieldsToPick = [
-    'currentTheme',
-    'email',
-    'firstname',
-    'lastname',
-    'username',
-    'preferedLanguage',
-  ];
+  const fieldsToPick = ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'];
 
-  const initialData = pick({ ...data, currentTheme }, fieldsToPick);
+  const initialData = pick(data, fieldsToPick);
 
   if (isLoading) {
     return (
@@ -173,10 +154,6 @@ const ProfilePage = () => {
     );
   }
 
-  const themesToDisplay = Object.keys(allApplicationThemes).filter(
-    themeName => allApplicationThemes[themeName]
-  );
-
   return (
     <Main aria-busy={isSubmittingForm}>
       <Helmet
@@ -447,20 +424,20 @@ const ProfilePage = () => {
                                 id:
                                   'Settings.profile.form.section.experience.interfaceLanguageHelp',
                                 defaultMessage:
-                                  'Preference changes will apply only to you. More information is available {here}.',
+                                  'Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.',
                               },
                               {
-                                here: (
-                                  <DocumentationLink
+                                documentation: (
+                                  <a
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
                                       id: 'Settings.profile.form.section.experience.documentation',
-                                      defaultMessage: 'here',
+                                      defaultMessage: 'documentation',
                                     })}
-                                  </DocumentationLink>
+                                  </a>
                                 ),
                               }
                             )}
@@ -510,47 +487,6 @@ const ProfilePage = () => {
                               })}
                             </Select>
                           </GridItem>
-                          <GridItem s={12} col={6}>
-                            <Select
-                              label={formatMessage({
-                                id: 'Settings.profile.form.section.experience.mode.label',
-                                defaultMessage: 'Interface mode',
-                              })}
-                              placeholder={formatMessage({
-                                id: 'components.Select.placeholder',
-                                defaultMessage: 'Select',
-                              })}
-                              hint={formatMessage({
-                                id: 'Settings.profile.form.section.experience.mode.hint',
-                                defaultMessage: 'Displays your interface in the chosen mode.',
-                              })}
-                              value={values.currentTheme}
-                              onChange={e => {
-                                handleChange({
-                                  target: { name: 'currentTheme', value: e },
-                                });
-                              }}
-                            >
-                              {themesToDisplay.map(theme => {
-                                const label = formatMessage(
-                                  {
-                                    id:
-                                      'Settings.profile.form.section.experience.mode.option-label',
-                                    defaultMessage: '{name} mode',
-                                  },
-                                  {
-                                    name: upperFirst(theme),
-                                  }
-                                );
-
-                                return (
-                                  <Option value={theme} key={theme}>
-                                    {label}
-                                  </Option>
-                                );
-                              })}
-                            </Select>
-                          </GridItem>
                         </Grid>
                       </Stack>
                     </Box>

package/admin/src/pages/ProfilePage/utils/api.js

@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import { axiosInstance } from '../../../core/utils';
 
 const fetchUser = async () => {
@@ -8,10 +7,9 @@ const fetchUser = async () => {
 };
 
 const putUser = async body => {
-  const dataToSend = omit(body, ['confirmPassword', 'currentTheme']);
-  const { data } = await axiosInstance.put('/admin/users/me', dataToSend);
+  const { data } = await axiosInstance.put('/admin/users/me', body);
 
-  return { ...data.data, currentTheme: body.currentTheme };
+  return data.data;
 };
 
 export { fetchUser, putUser };

package/admin/src/themes/colors.js

@@ -0,0 +1,51 @@
+const colors = {
+  black: '#333740',
+  white: '#ffffff',
+  red: '#ff203c',
+  orange: '#ff5d00',
+  lightOrange: '#f64d0a',
+  yellow: '#ffd500',
+  green: '#6dbb1a',
+  blue: '#0097f7',
+  teal: '#5bc0de',
+  pink: '#ff5b77',
+  purple: '#613d7c',
+  gray: '#464a4c',
+  border: '#e3e9f3',
+  'gray-dark': '#292b2c',
+  grayLight: '#636c72',
+  'gray-lighter': '#eceeef',
+  'gray-lightest': '#f7f7f9',
+  brightGrey: '#f0f3f8',
+  darkGrey: '#e3e9f3',
+  lightGrey: '#fafafa',
+  lightestGrey: '#fbfbfb',
+  mediumGrey: '#f2f3f4',
+  grey: '#9ea7b8',
+  greyDark: '#292b2c',
+  greyAlpha: 'rgba(227, 233, 243, 0.5)',
+  lightestBlue: '#e4f0fc',
+  lightBlue: '#e6f0fb',
+  mediumBlue: '#007eff',
+  darkBlue: '#aed4fb',
+  pale: '#f7f8f8',
+  content: {
+    background: '#fafafb',
+    'background-alpha': 'rgba(14, 22, 34, 0.02)',
+  },
+  leftMenu: {
+    'link-hover': '#1c2431',
+    'link-color': '#919bae',
+    'title-color': '#5b626f',
+    'background-header-link': '#007eff',
+  },
+  strapi: {
+    'gray-light': '#eff3f6',
+    gray: '#535f76',
+    'blue-darker': '#18202e',
+    'blue-dark': '#151c2e',
+    blue: '#0097f7',
+  },
+};
+
+export default colors;

package/admin/src/themes/fontWeights.js

@@ -0,0 +1,8 @@
+const fontWeights = {
+  regular: 400,
+  semiBold: 500,
+  bold: 600,
+  black: 900,
+};
+
+export default fontWeights;

package/admin/src/themes/index.js

@@ -0,0 +1,13 @@
+import colors from './colors';
+import fontWeights from './fontWeights';
+import sizes from './sizes';
+
+const theme = {
+  main: {
+    colors,
+    fontWeights,
+    sizes,
+  },
+};
+
+export default theme;

package/admin/src/themes/sizes.js

@@ -0,0 +1,31 @@
+const sizes = {
+  borderRadius: '2px',
+  header: {
+    height: '6rem',
+  },
+  leftMenu: {
+    height: '6rem',
+    width: '24rem',
+  },
+  margins: {
+    // TODO:
+    sm: '10px',
+  },
+  paddings: {
+    // TODO
+    xs: '5px',
+    sm: '10px',
+    smd: '20px',
+    md: '30px',
+    lg: '40px',
+  },
+  fonts: {
+    xs: '11px',
+    sm: '12px',
+    md: '13px',
+    lg: '18px',
+    xl: '24px',
+  },
+};
+
+export default sizes;

package/admin/src/translations/en.json

@@ -133,13 +133,10 @@
   "Settings.permissions.users.tabs.label": "Tabs Permissions",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
-  "Settings.profile.form.section.experience.here": "here",
+  "Settings.profile.form.section.experience.documentation": "documentation",
   "Settings.profile.form.section.experience.interfaceLanguage": "Interface language",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "This will only display your own interface in the chosen language.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Preference changes will apply only to you. More information is available {here}.",
-  "Settings.profile.form.section.experience.mode.label": "Interface mode",
-  "Settings.profile.form.section.experience.mode.hint": "Displays your interface in the chosen mode.",
-  "Settings.profile.form.section.experience.mode.option-label": "{name} mode",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.",
   "Settings.profile.form.section.experience.title": "Experience",
   "Settings.profile.form.section.helmet.title": "User profile",
   "Settings.profile.form.section.password.title": "Change password",
@@ -357,8 +354,8 @@
   "app.components.PluginCard.compatible": "Compatible with your app",
   "app.components.PluginCard.compatibleCommunity": "Compatible with the community",
   "app.components.PluginCard.more-details": "More details",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",

package/admin/src/translations/ja.json

@@ -315,8 +315,8 @@
   "app.components.PluginCard.compatible": "アプリとの互換性",
   "app.components.PluginCard.compatibleCommunity": "コミュニティとの互換性",
   "app.components.PluginCard.more-details": "詳細を見る",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",

package/admin/src/translations/ko.json

@@ -317,8 +317,8 @@
   "app.components.PluginCard.compatible": "이 애플리케이션에 호환됩니다.",
   "app.components.PluginCard.compatibleCommunity": "션뮤니티에 호환됩니다.",
   "app.components.PluginCard.more-details": "[더보기]",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",