@verdaccio/ui-components 3.0.0-next.1 → 4.0.0-next-8.0

package/src/components/Install/Install.test.tsx

@@ -5,23 +5,28 @@ import { PackageManagers } from '@verdaccio/types';
 import { useConfig } from '../../providers';
 import { render, screen } from '../../test/test-react-testing-library';
 import Install from './Install';
+import InstallListItem, { DependencyManager, getGlobalInstall } from './InstallListItem';
 import data from './__partials__/data.json';
 
-const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = () => {
+const ComponentToBeRendered: React.FC<{ name?: string; pkgManagers?: PackageManagers[] }> = ({
+  name = 'foo',
+}) => {
   const { configOptions } = useConfig();
-  return <Install configOptions={configOptions} packageMeta={data} packageName="foo" />;
+  return <Install configOptions={configOptions} packageMeta={data} packageName={name} />;
 };
 
 /* eslint-disable react/jsx-no-bind*/
 describe('<Install />', () => {
   test('renders correctly', () => {
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
+  });
+
+  test('should not render if name is missing', () => {
+    render(<ComponentToBeRendered name="" />);
+    expect(screen.queryByTestId('installList')).toBeNull();
   });
 
   test('should have 3 children', () => {
@@ -34,51 +39,79 @@ describe('<Install />', () => {
 
   test('should have the element NPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['npm'];
-
     render(<ComponentToBeRendered />);
-
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element YARN', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn'];
     render(<ComponentToBeRendered />);
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('npm')).not.toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element PNPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['pnpm'];
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+  });
+});
+
+describe('<InstallListItem />', () => {
+  test('renders correctly', () => {
+    render(
+      <InstallListItem
+        dependencyManager={DependencyManager.NPM}
+        packageName={'foo'}
+        packageVersion={'8.0.0'}
+      />
+    );
+    expect(screen.queryByTestId('installListItem-npm')).toBeInTheDocument();
+  });
+
+  test('should not render if name is missing', () => {
+    render(
+      // @ts-ignore - testing invalid value
+      <InstallListItem dependencyManager={'other'} packageName={'foo'} packageVersion={'8.0.0'} />
+    );
+    // expect nothing to be rendered
+    expect(screen.queryByTestId('installListItem-npm')).toBeNull();
+  });
+});
+
+describe('getGlobalInstall', () => {
+  test('version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo')).toEqual('foo@1.0.0');
+  });
+  test('latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo')).toEqual('foo');
+  });
+
+  test('version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo')).toEqual('-g foo@1.0.0');
+  });
+  test('latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo')).toEqual('-g foo');
+  });
+
+  test('yarn version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
+  });
+  test('yarn latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo', true)).toEqual('foo');
+  });
+
+  test('yarn version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
+  });
+  test('yarn latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo', true)).toEqual('foo');
   });
 });

package/src/components/Install/Install.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
-import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,6 +16,12 @@ const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   textTransform: 'capitalize',
 }));
 
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
 export type Props = {
   packageMeta: PackageMetaInterface;
   packageName: string;
@@ -26,8 +30,6 @@ export type Props = {
 
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
-
   if (!packageMeta || !packageName) {
     return null;
   }
@@ -39,25 +41,35 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
 
   return hasPkgManagers ? (
     <>
-      <Grid
-        container={true}
-        justifyContent="flex-end"
-        sx={{ marginRight: theme.spacing(10), alingText: 'right' }}
-      >
-        <SettingsMenu packageName={packageName} />
-      </Grid>
       <List
         data-testid={'installList'}
-        subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
+        subheader={
+          <Wrapper>
+            <StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>
+            <SettingsMenu packageName={packageName} />
+          </Wrapper>
+        }
       >
         {hasNpm && (
-          <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.NPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasYarn && (
-          <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.YARN}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasPnpm && (
-          <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.PNPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
       </List>
     </>

package/src/components/Install/InstallListItem.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import Avatar from '@mui/material/Avatar';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import { useTheme } from '@mui/styles';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
@@ -22,8 +22,9 @@ const InstallListItemText = styled(ListItemText)({
 });
 
 const PackageMangerAvatar = styled(Avatar)({
-  borderRadius: '0px',
+  backgroundColor: 'transparent',
   padding: 0,
+  marginLeft: 0,
 });
 
 export enum DependencyManager {
@@ -35,78 +36,95 @@ export enum DependencyManager {
 interface Interface {
   packageName: string;
   dependencyManager: DependencyManager;
+  packageVersion?: string;
 }
 
-const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
-  const { t } = useTranslation();
+export function getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, isYarn = false) {
+  const name = isGlobal
+    ? `${isYarn ? '' : '-g'} ${packageVersion && !isLatest ? `${packageName}@${packageVersion}` : packageName}`
+    : packageVersion && !isLatest
+      ? `${packageName}@${packageVersion}`
+      : packageName;
+
+  return name.trim();
+}
+
+const InstallListItem: React.FC<Interface> = ({
+  packageName,
+  dependencyManager,
+  packageVersion,
+}) => {
   const { localSettings } = useSettings();
+  const theme = useTheme();
+  const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
-  const pkgName = isGlobal ? `-g ${packageName}` : packageName;
-
   switch (dependencyManager) {
     case DependencyManager.NPM:
       return (
         <InstallItem data-testid={'installListItem-npm'}>
-          <PackageMangerAvatar alt="npm" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="npm" sx={{ bgcolor: theme.palette.white }}>
             <Npm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
-                dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
+                dataTestId="installNpm"
+                text={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-npm')}
           />
         </InstallItem>
       );
     case DependencyManager.YARN:
       return (
         <InstallItem data-testid={'installListItem-yarn'}>
-          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: theme.palette.white }}>
             <Yarn />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
+                text={
+                  isGlobal
+                    ? `yarn ${localSettings.yarnModern ? '' : 'global'} add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
+                }
+                title={
+                  isGlobal
+                    ? `yarn global add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
+                }
               />
             }
-            secondary={t('sidebar.installation.install-using-yarn')}
           />
         </InstallItem>
       );
     case DependencyManager.PNPM:
       return (
         <InstallItem data-testid={'installListItem-pnpm'}>
-          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: theme.palette.white }}>
             <Pnpm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
+                text={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-pnpm')}
           />
         </InstallItem>
       );

package/src/components/Keywords/KeywordListItems.tsx

@@ -0,0 +1,22 @@
+import Chip from '@mui/material/Chip';
+import ListItem from '@mui/material/ListItem';
+import React from 'react';
+
+const KeywordListItems: React.FC<{ keywords: undefined | string | string[] }> = ({ keywords }) => {
+  const keywordList =
+    typeof keywords === 'string' ? keywords.replace(/,/g, ' ').split(' ') : keywords;
+
+  if (!keywordList) {
+    return null;
+  }
+
+  return (
+    <ListItem sx={{ px: 0, mt: 0, flexWrap: 'wrap' }}>
+      {keywordList.sort().map((keyword, index) => (
+        <Chip key={index} label={keyword} sx={{ mt: 1, mr: 1 }} />
+      ))}
+    </ListItem>
+  );
+};
+
+export default KeywordListItems;

package/src/components/Keywords/Keywords.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { default as Keywords } from '.';
+
+export default {
+  title: 'Components/Sidebar/Keywords',
+};
+
+export const AllProperties: any = () => (
+  <Keywords
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    }}
+  />
+);

package/src/components/Keywords/Keywords.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Keywords from './Keywords';
+
+describe('<Keywords /> component', () => {
+  test('should render the component in default state', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('npm')).toBeInTheDocument();
+    expect(container.getByText('yarn')).toBeInTheDocument();
+  });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore
+    render(<Keywords packageMeta={{}} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: '',
+      },
+    };
+
+    render(<Keywords packageMeta={packageMeta} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+  });
+
+  test('should render keywords set in string', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: 'hello, world, verdaccio',
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('hello')).toBeInTheDocument();
+    expect(container.getByText('world')).toBeInTheDocument();
+  });
+});

package/src/components/Keywords/Keywords.tsx

@@ -0,0 +1,35 @@
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import KeywordListItems from './KeywordListItems';
+
+const Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!packageMeta?.latest?.keywords) {
+    return null;
+  }
+
+  return (
+    <List
+      data-testid="keyword-list"
+      subheader={
+        <Typography
+          sx={{ fontWeight: theme.fontWeight.bold, textTransform: 'capitalize' }}
+          variant="subtitle1"
+        >
+          {t('sidebar.keywords.title')}
+        </Typography>
+      }
+    >
+      <KeywordListItems keywords={packageMeta?.latest?.keywords} />
+    </List>
+  );
+};
+
+export default Keywords;

package/src/components/Keywords/index.ts

@@ -0,0 +1 @@
+export { default } from './Keywords';

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { render } from '../../test/test-react-testing-library';
+import Link from './Link';
+
+describe('<Link /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'} />
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with link', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'}>{'Home'}</Link>
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Link/Link.tsx

@@ -3,9 +3,7 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
-type LinkRef = HTMLAnchorElement;
-
-export const CustomRouterLink = styled(RouterLink)`
+const CustomRouterLink = styled(RouterLink)`
   text-decoration: none;
   &:hover,
   &:focus {
@@ -13,23 +11,11 @@ export const CustomRouterLink = styled(RouterLink)`
   }
 `;
 
-// TODO: improve any with custom types for a and RouterLink
-const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className, onClick },
+const Link = React.forwardRef<HTMLAnchorElement, any>(function LinkFunction(
+  { to, children, variant, className, onClick },
   ref
 ) {
-  return external ? (
-    <a
-      className={className}
-      href={to}
-      onClick={onClick}
-      ref={ref}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <Typography variant={variant ?? 'caption'}>{children}</Typography>
-    </a>
-  ) : (
+  return (
     <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>

package/src/components/Link/index.ts

@@ -1 +1 @@
-export { default as Link } from './Link';
+export { default } from './Link';

package/src/components/LinkExternal/LinkExternal.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import LinkExternal from './LinkExternal';
+
+describe('<LinkExternal /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<LinkExternal to={'/'} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with external link', () => {
+    const { container } = render(
+      <LinkExternal to={'https://example.com'}>{'Example'}</LinkExternal>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/LinkExternal/LinkExternal.tsx

@@ -0,0 +1,22 @@
+import Link from '@mui/material/Link';
+import React from 'react';
+
+const LinkExternal = React.forwardRef<HTMLAnchorElement, any>((props, ref) => {
+  const { to, children, variant, ...rest } = props;
+  return (
+    // eslint-disable-next-line verdaccio/jsx-spread
+    <Link
+      href={to}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+      underline="hover"
+      variant={variant ?? 'caption'}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default LinkExternal;

package/src/components/LinkExternal/index.ts

@@ -0,0 +1 @@
+export { default } from './LinkExternal';

package/src/components/Loading/Loading.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { act, render, screen, waitFor } from '../../test/test-react-testing-library';
 import Loading from './Loading';
 
 describe('<Loading /> component', () => {
-  test('should render the component in default state', () => {
-    const { container } = render(<Loading />);
-    expect(container.firstChild).toMatchSnapshot();
+  test('should render the component in default state', async () => {
+    act(() => {
+      render(<Loading />);
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+    });
   });
 });

package/src/components/Loading/styles.ts

@@ -11,6 +11,7 @@ export const Wrapper = styled('div')({
 
 export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
+  padding: 5,
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
   background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',