feat(style): added dark mode (#446)

.secrets-baseline

@@ -37,4 +37,4 @@
   ],
   "results": {},
   "version": "0.12.4"
-}
+}

i18n/translations/de-DE.json

@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
         },
         "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
+        "theme-context-not-correct-used": "Der Theme-Kontext wurde nicht korrekt verwendet",
         "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
     }
 }

i18n/translations/en-US.json

@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
         },
         "app-context-not-correct-used": "The app context was not correct used",
+        "theme-context-not-correct-used": "The theme context was not correct used",
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
     }
 }

i18n/translations/es-ES.json

@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
         },
         "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
+        "theme-context-not-correct-used": "El contexto del tema no fue correctamente usado",
         "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
     }
 }

i18n/translations/pt-BR.json

@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
         },
         "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
+        "theme-context-not-correct-used": "O contexto do tema não foi usado corretamente",
         "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
     }
 }

src/App/App.tsx

@@ -19,7 +19,7 @@ import AppRoute, { history } from './AppRoute';
 import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.white,
+  backgroundColor: theme?.palette.background.default,
 }));
 
 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

src/App/__snapshots__/App.test.tsx.snap

@@ -522,6 +522,30 @@ exports[`<App /> should display the Header component  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
@@ -1176,6 +1200,30 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';
+import { Theme } from '../../design-tokens/theme';
 
 interface Props {
   onChange: (event, newValue) => void;
@@ -14,12 +15,7 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
   const { t } = useTranslation();
 
   return (
-    <Tabs
-      indicatorColor={'primary'}
-      onChange={onChange}
-      textColor={'primary'}
-      value={tabPosition}
-      variant={'fullWidth'}>
+    <Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
       <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
       <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
@@ -30,6 +26,6 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
 
 export default DetailContainerTabs;
 
-const Tabs = styled(MuiTabs)({
+const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
   marginBottom: 16,
 });

src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`DetailContainer renders correctly 1`] = `
 >
   <div
     class="MuiTabs-root emotion-0 emotion-1"
+    color="primary"
   >
     <div
       class="MuiTabs-scroller MuiTabs-fixed"
@@ -21,7 +22,7 @@ exports[`DetailContainer renders correctly 1`] = `
       >
         <button
           aria-selected="true"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
           data-testid="readme-tab"
           id="readme-tab"
           role="tab"
@@ -39,7 +40,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="dependencies-tab"
           id="dependencies-tab"
           role="tab"
@@ -57,7 +58,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="versions-tab"
           id="versions-tab"
           role="tab"
@@ -75,7 +76,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="uplinks-tab"
           id="uplinks-tab"
           role="tab"

src/components/DetailSidebar/DetailSidebar.tsx

@@ -15,10 +15,6 @@ import { Theme } from '../../design-tokens/theme';
 import DetailSidebarTitle from './DetailSidebarTitle';
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 
-const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
-  padding: theme.spacing(3, 2),
-}));
-
 const DetailSidebar: React.FC = () => {
   const detailContext = useContext(DetailContext);
 
@@ -50,3 +46,7 @@ const DetailSidebar: React.FC = () => {
 };
 
 export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));

src/components/DetailSidebar/DetailSidebarTitle.tsx

@@ -13,15 +13,6 @@ interface Props {
   isLatest: boolean;
 }
 
-const StyledHeading = styled(Heading)({
-  fontSize: '1rem',
-  fontWeight: 700,
-});
-
-const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme && theme.palette.text.secondary,
-}));
-
 const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
   const { t } = useTranslation();
   return (
@@ -36,3 +27,12 @@ const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version
 };
 
 export default DetailSidebarTitle;
+
+const StyledHeading = styled(Heading)({
+  fontSize: '1rem',
+  fontWeight: 700,
+});
+
+const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme && theme.palette.text.secondary,
+}));

src/components/Developers/__snapshots__/Developers.test.tsx.snap

@@ -93,7 +93,7 @@ exports[`test Developers should render the component for contributors with items
         margin="10px 0 10px 0"
       >
         <div
-          className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
+          className="MuiBox-root MuiBox-root-91 emotion-8 emotion-9"
         >
           <ForwardRef(ToolTip)
             key="[email protected]"

src/components/Footer/styles.ts

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import Icon from '../Icon/Icon';
 import { Theme } from '../../design-tokens/theme';
 
-export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
-  background: props.theme && props.theme.palette.snow,
-  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
-  color: props.theme && props.theme.palette.nobel01,
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));

src/components/Header/Header.tsx

@@ -30,7 +30,6 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
   }
 
   const { user, scope, setUser } = appContext;
-  const logo = window.VERDACCIO_LOGO;
 
   /**
    * Logouts user
@@ -46,7 +45,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
     <>
       <NavBar data-testid="header" position="static">
         <InnerNavBar>
-          <HeaderLeft logo={logo} />
+          <HeaderLeft />
           <HeaderRight
             onLogout={handleLogout}
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}

src/components/Header/HeaderLeft.tsx

@@ -3,23 +3,22 @@ import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
 import Search from '../Search/';
+import Logo from '../Logo';
 
-import HeaderLogo from './HeaderLogo';
 import { LeftSide, SearchWrapper } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
-  logo?: string;
 }
 
 const StyledLink = styled(Link)({
   marginRight: '1em',
 });
 
-const HeaderLeft: React.FC<Props> = ({ withoutSearch = false, logo }) => (
+const HeaderLeft: React.FC<Props> = ({ withoutSearch = false }) => (
   <LeftSide>
     <StyledLink to={'/'}>
-      <HeaderLogo logo={logo} />
+      <Logo />
     </StyledLink>
     {!withoutSearch && (
       <SearchWrapper>

src/components/Header/HeaderRight.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
+import React, { useState, useEffect, useContext, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
+import ThemeContext from '../../design-tokens/ThemeContext';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -24,10 +25,16 @@ const HeaderRight: React.FC<Props> = ({
   onToggleMobileNav,
   onOpenRegistryInfoDialog,
 }) => {
+  const themeContext = useContext(ThemeContext);
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
+
   const { t } = useTranslation();
 
+  if (!themeContext) {
+    throw Error(t('theme-context-not-correct-used'));
+  }
+
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
   }, [anchorEl]);
@@ -54,13 +61,25 @@ const HeaderRight: React.FC<Props> = ({
     onToggleLogin();
   };
 
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      themeContext.setIsDarkMode(!themeContext.isDarkMode);
+    }, 300);
+  };
+
   return (
     <RightSide data-testid="header-right">
       {!withoutSearch && (
         <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
       )}
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
+      <HeaderToolTip
+        onClick={handleToggleDarkLightMode}
+        title={t('header.documentation')}
+        tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
+      />
+
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}