@verdaccio/ui-components 3.0.0-next.0 → 3.0.0-next.2

package/build/src/components/Link/Link.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare const CustomRouterLink: import("@emotion/styled").StyledComponent<import("react-router-dom").LinkProps<unknown> & React.RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-declare const Link: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/build/src/components/LoginDialog/LoginDialog.stories.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const OpenLoginDialog: {
-    render: (args: any) => JSX.Element;
+    render: (args: any) => React.JSX.Element;
     argTypes: {
         open: boolean;
     };

package/build/src/components/LoginDialog/LoginDialogForm.d.ts

@@ -8,5 +8,5 @@ interface Props {
     onSubmit: (formValues: FormValues) => void;
     error?: LoginError;
 }
-declare const LoginDialogForm: React.MemoExoticComponent<({ onSubmit, error }: Props) => JSX.Element>;
+declare const LoginDialogForm: React.MemoExoticComponent<({ onSubmit, error }: Props) => React.JSX.Element>;
 export default LoginDialogForm;

package/build/src/components/LoginDialog/LoginDialogFormError.d.ts

@@ -7,5 +7,5 @@ export interface FormValues {
 interface Props {
     error: LoginError;
 }
-declare const LoginDialogFormError: React.MemoExoticComponent<({ error }: Props) => JSX.Element>;
+declare const LoginDialogFormError: React.MemoExoticComponent<({ error }: Props) => React.JSX.Element>;
 export default LoginDialogFormError;

package/build/src/components/MenuItem/MenuItem.d.ts

@@ -5,5 +5,5 @@ type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
 interface Props extends Omit<MenuItemProps, 'component'> {
     component?: HTMLElementTagName;
 }
-declare const MenuItem: React.ForwardRefExoticComponent<Pick<Props, keyof Props> & React.RefAttributes<MenuItemRef>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<MenuItemRef>>;
 export default MenuItem;

package/build/src/components/Readme/Readme.d.ts

@@ -1,4 +1,3 @@
-import 'github-markdown-css';
 import 'highlight.js/styles/default.css';
 import React from 'react';
 import { Props } from './types';

package/build/src/components/Readme/ReadmeDark.d.ts

@@ -0,0 +1,5 @@
+import 'highlight.js/styles/default.css';
+import React from 'react';
+import { Props } from './types';
+declare const Readme: React.FC<Props>;
+export default Readme;

package/build/src/components/Readme/ReadmeLight.d.ts

@@ -0,0 +1,5 @@
+import 'highlight.js/styles/default.css';
+import React from 'react';
+import { Props } from './types';
+declare const Readme: React.FC<Props>;
+export default Readme;

package/build/src/components/Search/AutoComplete/styles.d.ts

@@ -6,7 +6,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTextField: import("@emotion/styled").StyledComponent<(((Pick<import("@mui/material").OutlinedTextFieldProps, keyof import("@mui/material").OutlinedTextFieldProps> | Pick<import("@mui/material").FilledTextFieldProps, keyof import("@mui/material").FilledTextFieldProps> | Pick<import("@mui/material").StandardTextFieldProps, keyof import("@mui/material").StandardTextFieldProps>) & import("react").RefAttributes<HTMLDivElement>) & {
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<(((Omit<import("@mui/material").OutlinedTextFieldProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps, "ref"> | Omit<import("@mui/material").StandardTextFieldProps, "ref">) & import("react").RefAttributes<HTMLDivElement>) & {
     theme?: import("@emotion/react").Theme | undefined;
 }) & {
     theme?: import("@mui/material").Theme | undefined;

package/build/src/components/Search/Search.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const SearchByQuery: {
-    render: (args: any) => JSX.Element;
+    render: (args: any) => React.JSX.Element;
 };

package/build/src/components/Search/styles.d.ts

@@ -2,7 +2,7 @@
 export interface InputFieldProps {
     color: string;
 }
-export declare const StyledTextField: import("@emotion/styled").StyledComponent<(((Pick<import("@mui/material").OutlinedTextFieldProps, keyof import("@mui/material").OutlinedTextFieldProps> | Pick<import("@mui/material").FilledTextFieldProps, keyof import("@mui/material").FilledTextFieldProps> | Pick<import("@mui/material").StandardTextFieldProps, keyof import("@mui/material").StandardTextFieldProps>) & import("react").RefAttributes<HTMLDivElement>) & {
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<(((Omit<import("@mui/material").OutlinedTextFieldProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps, "ref"> | Omit<import("@mui/material").StandardTextFieldProps, "ref">) & import("react").RefAttributes<HTMLDivElement>) & {
     theme?: import("@emotion/react").Theme | undefined;
 }) & {
     theme?: import("@mui/material").Theme | undefined;

package/build/src/components/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const TextField: React.ForwardRefExoticComponent<(Pick<import("@mui/material/TextField").OutlinedTextFieldProps, keyof import("@mui/material/TextField").OutlinedTextFieldProps> | Pick<import("@mui/material/TextField").FilledTextFieldProps, keyof import("@mui/material/TextField").FilledTextFieldProps> | Pick<import("@mui/material/TextField").StandardTextFieldProps, keyof import("@mui/material/TextField").StandardTextFieldProps>) & React.RefAttributes<HTMLDivElement>>;
+declare const TextField: React.ForwardRefExoticComponent<(Omit<import("@mui/material/TextField").OutlinedTextFieldProps, "ref"> | Omit<import("@mui/material/TextField").FilledTextFieldProps, "ref"> | Omit<import("@mui/material/TextField").StandardTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export default TextField;

package/build/src/components/Versions/HistoryList.d.ts

@@ -5,5 +5,6 @@ interface Props {
     packageName: string;
     time: Time;
 }
+export declare function filterDeprecated(versions: Versions): {};
 declare const VersionsHistoryList: React.FC<Props>;
 export default VersionsHistoryList;

package/build/src/sections/Footer/Footer.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Footer: () => JSX.Element;
+import React from 'react';
+declare const Footer: () => React.JSX.Element;
 export default Footer;

package/build/src/sections/Header/LanguageSwitch.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const CardSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const CardUnSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
-declare const LanguageSwitch: () => JSX.Element;
+declare const LanguageSwitch: () => React.JSX.Element;
 export default LanguageSwitch;

package/build/src/sections/Header/styles.d.ts

@@ -27,7 +27,7 @@ export declare const SearchWrapper: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NavBar: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const StyledLink: import("@emotion/styled").StyledComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<HTMLAnchorElement> & {
+export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     theme?: import("@mui/material").Theme | undefined;

package/build/src/store/models/login.d.ts

@@ -13,6 +13,7 @@ export type LoginResponse = {
 export type LoginBody = {
     error?: LoginError;
 } & LoginResponse;
+export declare function getDefaultUserState(): LoginBody;
 /**
  *
  * @category Model

package/build/src/types/packageMeta.d.ts

@@ -71,6 +71,7 @@ export interface Version {
     license?: string;
     main?: string;
     keywords?: string[];
+    deprecated?: string;
 }
 export interface Author {
     name?: string;

package/build/src/utils/index.d.ts

@@ -3,3 +3,4 @@ export * as utils from './utils';
 export { getCLIChangePassword, getCLISBerryYamlRegistry, getCLISetConfigRegistry, getCLISetRegistry, } from './cli-utils';
 export { default as loadable } from './loadable';
 export { Route } from './routes';
+export * from './token';

package/build/src/utils/loadable.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 /**
  *  With the combination of a bundler, enable to code split a package.
  *
@@ -8,5 +8,5 @@
    ```
    @category HOC
  */
-declare const _default: (importCallback: any) => (props: any) => JSX.Element;
+declare const _default: (importCallback: any) => (props: any) => React.JSX.Element;
 export default _default;

package/build/src/utils/token.d.ts

@@ -0,0 +1 @@
+export declare function isTokenExpire(token: string | null): boolean;

package/build/store/models/download.js

@@ -19,7 +19,6 @@ const download = (0, _core.createModel)()({
     async getTarball({
       link
     }) {
-      // const basePath = state.configuration.config.base;
       try {
         const fileStream = await _api.default.request(link, 'GET', {
           headers: {

package/build/store/models/login.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.login = exports.HEADERS = void 0;
+exports.HEADERS = void 0;
+exports.getDefaultUserState = getDefaultUserState;
+exports.login = void 0;
 var _core = require("@rematch/core");
 var _i18next = _interopRequireDefault(require("i18next"));
+var _utils = require("../../utils");
 var _api = _interopRequireDefault(require("../api"));
 var _storage = _interopRequireDefault(require("../storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,12 +16,19 @@ const HEADERS = {
   JSON: 'application/json'
 };
 exports.HEADERS = HEADERS;
-const token = _storage.default.getItem('token');
-const username = _storage.default.getItem('username');
-const defaultUserState = {
-  token,
-  username
-};
+function getDefaultUserState() {
+  const token = _storage.default.getItem('token');
+  const username = _storage.default.getItem('username');
+  const defaultUserState = (0, _utils.isTokenExpire)(token) ? {
+    token: null,
+    username: null
+  } : {
+    token,
+    username
+  };
+  return defaultUserState;
+}
+const defaultUserState = getDefaultUserState();
 
 /**
  *

package/build/utils/index.js

@@ -3,6 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  url: true,
+  utils: true,
+  getCLIChangePassword: true,
+  getCLISBerryYamlRegistry: true,
+  getCLISetConfigRegistry: true,
+  getCLISetRegistry: true,
+  loadable: true,
+  Route: true
+};
 Object.defineProperty(exports, "Route", {
   enumerable: true,
   get: function () {
@@ -47,6 +57,18 @@ exports.utils = _utils;
 var _cliUtils = require("./cli-utils");
 var _loadable = _interopRequireDefault(require("./loadable"));
 var _routes = require("./routes");
+var _token = require("./token");
+Object.keys(_token).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _token[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _token[key];
+    }
+  });
+});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/build/utils/token.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTokenExpire = isTokenExpire;
+var _jsBase = require("js-base64");
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+var _isString = _interopRequireDefault(require("lodash/isString"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isTokenExpire(token) {
+  if (!(0, _isString.default)(token)) {
+    return true;
+  }
+  const [, payload] = token.split('.');
+  if (!payload) {
+    return true;
+  }
+  let exp;
+  try {
+    exp = JSON.parse(_jsBase.Base64.decode(payload)).exp;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid token:', error, token);
+    return true;
+  }
+  if (!exp || !(0, _isNumber.default)(exp)) {
+    return true;
+  }
+  // Report as expire before (real expire time - 30s)
+  const jsTimestamp = exp * 1000 - 30000;
+  const expired = Date.now() >= jsTimestamp;
+  return expired;
+}
+//# sourceMappingURL=token.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.2",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -12,20 +12,21 @@
     "@emotion/styled": "^11.10.6",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "5.13.7",
-    "@mui/material": "5.13.7",
-    "@mui/styles": "5.13.7",
-    "@mui/system": "5.13.7",
+    "@mui/icons-material": "5.14.13",
+    "@mui/material": "5.14.13",
+    "@mui/styles": "5.14.13",
+    "@mui/system": "5.14.13",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
     "country-flag-icons": "1.5.5",
     "dayjs": "1.11.7",
     "dompurify": "2.4.5",
-    "github-markdown-css": "5.2.0",
     "highlight.js": "11.7.0",
     "history": "4.10.1",
+    "classnames": "2.3.2",
     "i18next": "20.6.1",
+    "js-base64": "3.7.5",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
     "marked": "4.3.0",
@@ -45,7 +46,7 @@
     "validator": "13.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.23.0",
     "@emotion/babel-plugin": "11.10.6",
     "@emotion/jest": "11.10.5",
     "@storybook/addon-actions": "^6.5.15",
@@ -56,15 +57,16 @@
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "8.19.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "14.0.0",
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "@verdaccio/types": "12.0.0-next.0",
+    "@verdaccio/types": "12.0.0-next.1",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
+    "typescript": "4.9.4",
     "msw": "0.49.3"
   },
   "msw": {
@@ -77,6 +79,7 @@
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
     "build:js": "babel src/ --out-dir build/ --copy-files --no-copy-ignored --extensions \".ts,.tsx\" --source-maps --ignore \"src/**/*.stories.tsx\" --ignore \"src/**/*.test.tsx\" --ignore \"src/**/*.test.ts\"",
+    "watch": "babel src/ --out-dir build/ --watch --copy-files --no-copy-ignored --extensions \".ts,.tsx\" --source-maps --ignore \"src/**/*.stories.tsx\" --ignore \"src/**/*.test.tsx\" --ignore \"src/**/*.test.ts\"",
     "build": "pnpm run build:js && pnpm run build:types",
     "start": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook"

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -20,7 +20,7 @@ const packageMeta = {
     dist: {
       fileCount: 0,
       unpackedSize: 0,
-      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+      tarball: 'https://registry.npmjs.org/verdaccio/-/verdaccio-5.26.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {

package/src/components/ActionBar/ActionBar.test.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
 import { store } from '../../store/store';
-import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
 import ActionBar from './ActionBar';
 
 const defaultPackageMeta = {
@@ -27,8 +33,10 @@ describe('<ActionBar /> component', () => {
   });
 
   test('should render the component in default state', () => {
-    const { container } = renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
   });
 
   test('when there is no action bar data', () => {
@@ -45,8 +53,10 @@ describe('<ActionBar /> component', () => {
       },
     };
 
-    const { container } = renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
   });
 
   test('when there is a button to download a tarball', () => {
@@ -59,11 +69,10 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
   });
 
-  test('when click button to raw manifest open a dialog with viewver', () => {
+  test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    // TODO: fix this part
-    // expect(screen.getByTestId('raw-viewver-dialog')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument());
   });
 
   test('should not display download tarball button', () => {
@@ -78,8 +87,6 @@ describe('<ActionBar /> component', () => {
 
   test('when there is a button to open an issue', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    // TODO: should be visible by text
-    // expect(screen.getByLabelText('action-bar-action.open-an-issue')).toBeTruthy();
     expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
   });
 });

package/src/components/ActionBar/ActionBar.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-spread */
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import React, { useState } from 'react';
 
 import { url } from '../../utils';
@@ -40,18 +42,20 @@ const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packa
 
   return (
     <Box alignItems="center" display="flex" marginBottom="14px">
-      {actions.map((action) => (
-        <ActionBarAction key={action.type} {...action} />
-      ))}
-      {isRawViewerOpen && (
-        <RawViewer
-          isOpen={isRawViewerOpen}
-          onClose={() => {
-            setIsRawViewerOpen(false);
-          }}
-          packageMeta={packageMeta}
-        />
-      )}
+      <Stack direction="row" spacing={1}>
+        {actions.map((action) => (
+          <ActionBarAction key={action.type} {...action} />
+        ))}
+        {isRawViewerOpen && (
+          <RawViewer
+            isOpen={isRawViewerOpen}
+            onClose={() => {
+              setIsRawViewerOpen(false);
+            }}
+            packageMeta={packageMeta}
+          />
+        )}
+      </Stack>
     </Box>
   );
 };

package/src/components/ActionBar/ActionBarAction.tsx

@@ -3,25 +3,21 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
 import RawOnIcon from '@mui/icons-material/RawOn';
+import CircularProgress from '@mui/material/CircularProgress';
 import FabMUI from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Theme } from '../../Theme';
-import { Dispatch } from '../../store/store';
+import { Dispatch, RootState } from '../../store/store';
 import { Link } from '../Link';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
     theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
-  marginRight: 10,
-  ':hover': {
-    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-    background: theme?.palette.white,
-  },
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';
@@ -36,6 +32,7 @@ export interface ActionBarActionProps {
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch<Dispatch>();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(async () => {
     dispatch.download.getTarball({ link });
@@ -65,9 +62,17 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action })
     case 'DOWNLOAD_TARBALL':
       return (
         <Tooltip title={t('action-bar-action.download-tarball') as string}>
-          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
-            <DownloadIcon />
-          </Fab>
+          {isLoading ? (
+            <CircularProgress sx={{ marginX: 0 }}>
+              <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+                <DownloadIcon />
+              </Fab>
+            </CircularProgress>
+          ) : (
+            <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+              <DownloadIcon />
+            </Fab>
+          )}
         </Tooltip>
       );
     case 'RAW_DATA':

package/src/components/Author/Author.tsx

@@ -1,11 +1,13 @@
+import { Typography } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
+import { useTheme } from '@mui/styles';
 import i18next from 'i18next';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { url } from '../../utils';
-import { AuthorListItem, AuthorListItemText, StyledText } from './styles';
+import { AuthorListItem, StyledText } from './styles';
 
 export function getAuthorName(authorName?: string): string {
   if (!authorName) {
@@ -26,6 +28,8 @@ export function getAuthorName(authorName?: string): string {
 const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
+  const theme = useTheme();
+
   if (!packageMeta) {
     return null;
   }
@@ -37,8 +41,13 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   }
 
   const { email, name } = author;
-
-  const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
+  const avatarComponent = (
+    <Avatar
+      alt={author.name}
+      src={author.avatar}
+      sx={{ width: 40, height: 40, marginRight: theme.spacing(1) }}
+    />
+  );
 
   return (
     <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
@@ -50,7 +59,7 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
             {avatarComponent}
           </a>
         )}
-        {name && <AuthorListItemText primary={getAuthorName(name)} />}
+        {name && <Typography variant="subtitle2">{getAuthorName(name)}</Typography>}
       </AuthorListItem>
     </List>
   );

package/src/components/Author/styles.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
 
 import { Theme } from '../../Theme';
 
@@ -15,8 +14,3 @@ export const AuthorListItem = styled(ListItem)({
     backgroundColor: 'transparent',
   },
 });
-
-export const AuthorListItemText = styled(ListItemText)({
-  padding: '0 10px',
-  margin: 0,
-});