@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

package/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap

@@ -1,16 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Help /> component should load the component in default state 1`] = `
-.emotion-0 {
+.emotion-1 {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  overflow: hidden;
   width: 600px;
   margin: auto;
 }
 
 .emotion-2 {
+  padding: 16px;
+}
+
+.emotion-2:last-child {
+  padding-bottom: 24px;
+}
+
+.emotion-3 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.334;
+  margin-bottom: 0.35em;
+}
+
+.emotion-5 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 1.25rem;
+  line-height: 1.6;
+  margin-bottom: 0.35em;
+  color: rgba(0, 0, 0, 0.6);
   margin-bottom: 20px;
 }
 
-.emotion-4 {
+.emotion-6 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,11 +60,10 @@ exports[`<Help /> component should load the component in default state 1`] = `
   align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.emotion-6 {
+.emotion-9 {
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
@@ -34,124 +72,325 @@ exports[`<Help /> component should load the component in default state 1`] = `
   font-size: 1rem;
 }
 
+.emotion-11 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  text-align: center;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  font-size: 1.5rem;
+  padding: 8px;
+  border-radius: 50%;
+  overflow: visible;
+  color: rgba(0, 0, 0, 0.54);
+  -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 12px;
+  font-size: 1.75rem;
+}
+
+.emotion-11::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-11.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-11 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-11:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+@media (hover: none) {
+  .emotion-11:hover {
+    background-color: transparent;
+  }
+}
+
+.emotion-11.Mui-disabled {
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-12 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+.emotion-13 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
+.emotion-22 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px;
+}
+
+.emotion-23>:not(:first-of-type) {
+  margin-left: 8px;
+}
+
+.emotion-24 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 4px 5px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #4b5e40;
+}
+
+.emotion-24::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-24.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-24 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-24:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgba(75, 94, 64, 0.04);
+}
+
+@media (hover: none) {
+  .emotion-24:hover {
+    background-color: transparent;
+  }
+}
+
+.emotion-24.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
 <div
-  class="MuiPaper-root MuiCard-root emotion-0 emotion-1 MuiPaper-elevation1 MuiPaper-rounded"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root emotion-0 emotion-1"
   id="help-card"
 >
   <div
-    class="MuiCardContent-root"
+    class="MuiCardContent-root emotion-2"
   >
     <h5
-      class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
+      class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom emotion-3"
       id="help-card__title"
     >
       No Package Published Yet.
     </h5>
     <h6
-      class="MuiTypography-root emotion-2 emotion-3 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+      class="MuiTypography-root MuiTypography-h6 MuiTypography-gutterBottom emotion-4 emotion-5"
     >
       To publish your first package just:
     </h6>
     <span
-      class="MuiTypography-root MuiTypography-body1"
+      class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       1. Login
     </span>
     <div
-      class="emotion-4 emotion-5"
+      class="emotion-7 emotion-8"
     >
       <span
-        class="emotion-6 emotion-7"
+        class="emotion-9 emotion-10"
       >
-        npm adduser --registry http://localhost
+        npm adduser --registry http://localhost:9000/
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root"
+        aria-label="Copy to clipboard"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-11"
+        data-mui-internal-clone-element="true"
         data-testid="copy-icon"
         tabindex="0"
-        title="Copy to clipboard"
         type="button"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
+          data-testid="FileCopyIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-13"
         />
       </button>
     </div>
     <span
-      class="MuiTypography-root MuiTypography-body1"
+      class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       2. Publish
     </span>
     <div
-      class="emotion-4 emotion-5"
+      class="emotion-7 emotion-8"
     >
       <span
-        class="emotion-6 emotion-7"
+        class="emotion-9 emotion-10"
       >
-        npm publish --registry http://localhost
+        npm publish --registry http://localhost:9000/
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root"
+        aria-label="Copy to clipboard"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-11"
+        data-mui-internal-clone-element="true"
         data-testid="copy-icon"
         tabindex="0"
-        title="Copy to clipboard"
         type="button"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
+          data-testid="FileCopyIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-13"
         />
       </button>
     </div>
     <span
-      class="MuiTypography-root MuiTypography-body2"
+      class="MuiTypography-root MuiTypography-body2 emotion-22"
     >
-      3. Refresh this page.
+      3. Refresh this page
     </span>
   </div>
   <div
-    class="MuiCardActions-root MuiCardActions-spacing"
+    class="MuiCardActions-root MuiCardActions-spacing emotion-23"
   >
     <a
-      aria-disabled="false"
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall"
+      class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButtonBase-root emotion-24"
       href="https://verdaccio.org/docs/en/installation"
       tabindex="0"
     >
+      Learn More
       <span
-        class="MuiButton-label"
-      >
-        Learn More
-      </span>
-      <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root emotion-13"
       />
     </a>
   </div>

package/src/pages/home/PackageList/Help/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import Card from 'verdaccio-ui/components/Card';
 import { default as Typography } from 'verdaccio-ui/components/Heading';
 

package/src/pages/home/PackageList/Package/Package.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { cleanup, renderWithStore } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
-
+import { store } from '../../../../store';
 import Package from './Package';
 
 /**
@@ -29,7 +29,7 @@ describe('<Package /> component', () => {
       keywords: ['verdaccio'],
     };
 
-    const wrapper = render(
+    const wrapper = renderWithStore(
       <MemoryRouter>
         <Package
           author={props.author}
@@ -39,7 +39,8 @@ describe('<Package /> component', () => {
           time={props.time}
           version={props.version}
         />
-      </MemoryRouter>
+      </MemoryRouter>,
+      store
     );
 
     // FUTURE: improve this expectectations

package/src/pages/home/PackageList/Package/Package.tsx

@@ -1,26 +1,24 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import BugReport from '@material-ui/icons/BugReport';
-import DownloadIcon from '@material-ui/icons/CloudDownload';
-import HomeIcon from '@material-ui/icons/Home';
+import BugReport from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { useDispatch, useSelector } from 'react-redux';
 import Grid from 'verdaccio-ui/components/Grid';
-import { Version, FileBinary, Time, Law } from 'verdaccio-ui/components/Icons';
+import { FileBinary, Law, Time, Version } from 'verdaccio-ui/components/Icons';
 import Link from 'verdaccio-ui/components/Link';
 import ListItem from 'verdaccio-ui/components/ListItem';
 import Tooltip from 'verdaccio-ui/components/Tooltip';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
-import { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
-import { useConfig } from 'verdaccio-ui/providers/config';
 import fileSizeSI from 'verdaccio-ui/utils/file-size';
 import { formatDate, formatDateDistance, getAuthorName } from 'verdaccio-ui/utils/package';
-import { extractFileName, downloadFile } from 'verdaccio-ui/utils/url';
 import { isURL } from 'verdaccio-ui/utils/url';
 
-import { PackageMetaInterface, Author as PackageAuthor } from '../../../../../types/packageMeta';
-
+import { Author as PackageAuthor, PackageMetaInterface } from '../../../../../types/packageMeta';
+import { Dispatch, RootState } from '../../../../store/store';
+import Tag from './Tag';
 import {
   Author,
   Avatar,
@@ -29,15 +27,14 @@ import {
   GridRightAligned,
   IconButton,
   OverviewItem,
-  Wrapper,
   PackageListItemText,
   PackageTitle,
   Published,
   TagContainer,
   Text,
+  Wrapper,
   WrapperLink,
 } from './styles';
-import Tag from './Tag';
 
 interface Bugs {
   url: string;
@@ -72,19 +69,17 @@ const Package: React.FC<PackageInterface> = ({
   time,
   version,
 }) => {
+  const config = useSelector((state: RootState) => state.configuration.config);
+  const dispatch = useDispatch<Dispatch>();
   const { t } = useTranslation();
-  const { getResource } = useAPI();
-  const { configOptions } = useConfig();
 
   const handleDownload = useCallback(
     async (tarballDist: string) => {
       // FIXME: check, the dist might be different thant npmjs
-      const link = tarballDist.replace(`https://registry.npmjs.org/`, configOptions.base as string);
-      const fileStream = await getResource(link);
-      const fileName = extractFileName(link);
-      downloadFile(fileStream, fileName);
+      const link = tarballDist.replace(`https://registry.npmjs.org/`, config.base);
+      dispatch.download.getTarball({ link });
     },
-    [getResource, configOptions]
+    [dispatch, config]
   );
 
   const renderVersionInfo = (): React.ReactNode =>
@@ -137,7 +132,7 @@ const Package: React.FC<PackageInterface> = ({
     isURL(homepage) && (
       <Link external={true} to={homepage}>
         <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
-          <IconButton aria-label={t('package.homepage')}>
+          <IconButton aria-label={t('package.homepage')} size="large">
             <HomeIcon />
           </IconButton>
         </Tooltip>
@@ -149,7 +144,7 @@ const Package: React.FC<PackageInterface> = ({
     isURL(bugs.url) && (
       <Link external={true} to={bugs.url}>
         <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
-          <IconButton aria-label={t('package.bugs')}>
+          <IconButton aria-label={t('package.bugs')} size="large">
             <BugReport />
           </IconButton>
         </Tooltip>
@@ -159,7 +154,6 @@ const Package: React.FC<PackageInterface> = ({
   const renderDownloadLink = (): React.ReactNode =>
     dist?.tarball &&
     isURL(dist.tarball) && (
-      // eslint-disable-next-line
       <Link
         external={true}
         onClick={() => {
@@ -169,7 +163,7 @@ const Package: React.FC<PackageInterface> = ({
         <Tooltip
           aria-label={t('package.download', { what: t('package.the-tar-file') })}
           title={t('package.tarball')}>
-          <IconButton aria-label={t('package.download')}>
+          <IconButton aria-label={t('package.download')} size="large">
             <DownloadIcon />
           </IconButton>
         </Tooltip>
@@ -179,7 +173,7 @@ const Package: React.FC<PackageInterface> = ({
   const renderPrimaryComponent = (): React.ReactNode => {
     return (
       <Grid container={true} item={true} xs={12}>
-        <Grid item={true} xs={true}>
+        <Grid item={true} xs={11}>
           <WrapperLink to={`/-/web/detail/${packageName}`}>
             <PackageTitle className="package-title">{packageName}</PackageTitle>
           </WrapperLink>
@@ -211,8 +205,6 @@ const Package: React.FC<PackageInterface> = ({
   const renderPackageListItemText = (): React.ReactNode => (
     <PackageListItemText
       className="package-link"
-      // @ts-ignore
-      component="div"
       primary={renderPrimaryComponent()}
       secondary={renderSecondaryComponent()}
     />
@@ -236,7 +228,7 @@ export default Package;
 
 const iconStyle = ({ theme }: { theme: Theme }) => css`
   margin: 2px 10px 0 0;
-  fill: ${theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
+  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
 `;
 
 const StyledVersion = styled(Version)`

package/src/pages/home/PackageList/Package/Tag/Tag.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Tag from './Tag';

package/src/pages/home/PackageList/Package/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
-
 import { default as Photo } from 'verdaccio-ui/components/Avatar';
 import Grid from 'verdaccio-ui/components/Grid';
 import { default as MuiIconButton } from 'verdaccio-ui/components/IconButton';
@@ -14,7 +13,7 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 0 0 16px',
-  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
   fontSize: 12,
   [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
@@ -29,14 +28,14 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
 }));
 
 export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
   margin: '0 5px 0 0',
 }));
 
 export const Text = styled(Label)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: '12px',
   fontWeight: theme?.fontWeight.semiBold,
-  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
 }));
 
 export const Details = styled('span')({
@@ -65,7 +64,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme?.palette.type == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
   cursor: 'pointer',
   [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
     fontSize: 14,
@@ -106,7 +105,7 @@ export const PackageListItemText = styled(ListItemText)({
 });
 
 export const Description = styled(MuiText)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
   fontSize: '14px',
   paddingRight: 0,
 }));