add banner support ukraine (#3060)

* add banner support ukraine

* fix test

* add blood link

* Update packages/plugins/ui-theme/src/App/Header/Support/Support.tsx

Co-authored-by: Daniel Ruf <827205+DanielRuf@users.noreply.github.com>

Co-authored-by: Daniel Ruf <827205+DanielRuf@users.noreply.github.com>

.changeset/brown-pandas-wink.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': patch
+---
+
+add banner support ukraine

packages/plugins/ui-theme/jest/jest.config.js

@@ -29,6 +29,7 @@ module.exports = Object.assign({}, config, {
     '\\.(s?css)$': '<rootDir>/jest/identity.js',
     '\\.(png)$': '<rootDir>/jest/identity.js',
     '\\.(svg)$': '<rootDir>/jest/unit/empty.ts',
+    '\\.(jpg)$': '<rootDir>/jest/unit/empty.ts',
     'github-markdown-css': '<rootDir>/jest/identity.js',
     // note: this section has to be on sync with webpack configuration
     'verdaccio-ui/components/(.*)': '<rootDir>/src/components/$1',

packages/plugins/ui-theme/src/App/Header/HeaderRight.tsx

@@ -5,6 +5,7 @@ import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
 
 import HeaderMenu from './HeaderMenu';
 import HeaderToolTip from './HeaderToolTip';
+import { Support } from './Support';
 import { RightSide } from './styles';
 
 interface Props {
@@ -78,6 +79,7 @@ const HeaderRight: React.FC<Props> = ({
           tooltipIconType={'search'}
         />
       )}
+      <Support />
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip
         onClick={onOpenRegistryInfoDialog}

packages/plugins/ui-theme/src/App/Header/HeaderToolTipIcon.tsx

@@ -55,7 +55,6 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
         </IconSearchButton>
       );
     case 'dark-mode':
-      // todo(Priscila): Add Zoom transition effect
       return (
         <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <NightsStay />
@@ -63,7 +62,6 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
       );
 
     case 'light-mode':
-      // todo(Priscila): Add Zoom transition effect
       return (
         <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <WbSunny />

packages/plugins/ui-theme/src/App/Header/Support/Support.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable verdaccio/jsx-no-style */
+
+/* eslint-disable react/jsx-max-depth */
+
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Modal from '@mui/material/Modal';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import FlagsIcon from 'country-flag-icons/react/3x2';
+import React from 'react';
+
+import flag from './uk.jpg';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const Flags = styled('span')<{ theme?: Theme }>(() => ({
+  width: '25px',
+}));
+
+const title = 'Support people affected by the war in Ukraine';
+const Support = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return (
+    <>
+      <Tooltip title={title}>
+        <IconButton color="inherit" onClick={handleOpen} size="large">
+          <Flags>
+            <FlagsIcon.UA />
+          </Flags>
+        </IconButton>
+      </Tooltip>
+      <Modal
+        aria-describedby="modal-modal-description"
+        aria-labelledby="modal-modal-title"
+        onClose={handleClose}
+        open={open}
+      >
+        <Box sx={style}>
+          <Grid container={true} spacing={2}>
+            <Grid item={true} xs={12}>
+              <Typography component="h2" variant="h6">
+                {title}
+              </Typography>
+              <Divider />
+            </Grid>
+            <Grid item={true} lg={4} xs={12}>
+              <img alt={title} height="150" src={flag} />
+            </Grid>
+            <Grid item={true} lg={8} xs={12}>
+              <span style={{ fontStyle: 'italic', fontSize: '0.75rem' }}>
+                <Typography>
+                  {`Hi, this is a message that I've composed to call your attention to ask 
+                for humanitarian support for more than 44 million Ukrainians that are having 
+                a  hard time suffering for a horrible and unjustified war. It would be great if you
+                decide today to make a difference and help others. You could help by donating 
+                to very well-known humanitarian organizations, helping in your local 
+                area with food, clothes, donate blood, toys for kids, or your own time. Any help is very welcome.`}
+                </Typography>
+              </span>
+              <ul style={{ padding: '10px 0' }}>
+                <li>
+                  <a
+                    href="https://twitter.com/denysdovhan/status/1501486563842211843"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {'Listen at Twitter OSS developers about the war'}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://snyk.io/blog/celebrating-amazing-open-source-innovation-ukraine/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {'Learn more about Open Source developers in Ukraine'}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://www.savethechildren.org/us/where-we-work/ukraine/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {'Donate to Save the Children'}
+                  </a>
+                </li>
+                <li>
+                  <a href="https://www.ifrc.org/" rel="noreferrer" target="_blank">
+                    {'Donate to the International Red Cross'}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://www.hrw.org/news/2022/03/10/ukraine-russian-air-dropped-bombs-hit-residential-area/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {'Read Reports from Human Rights Watch'}
+                  </a>
+                </li>
+                <li>
+                  <a href="https://europeanbloodalliance.eu/" rel="noreferrer" target="_blank">
+                    {'Donate blood in Europe'}
+                  </a>
+                </li>
+              </ul>
+              <div>
+                <Typography variant="div">{`Spread the voice, make the difference today.`}</Typography>
+              </div>
+              <div style={{ padding: '10px 0', fontWeight: 600 }}>
+                <Typography variant="div">{`Att: Verdaccio Lead Mantainer, Juan P.`}</Typography>
+              </div>
+            </Grid>
+          </Grid>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export { Support };

packages/plugins/ui-theme/src/App/Header/Support/index.ts

@@ -0,0 +1,3 @@
+import { Support } from './Support';
+
+export { Support };

packages/plugins/ui-theme/src/components/Logo/Logo.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
-import blackAndWithLogo from './img/logo-black-and-white.svg';
-import defaultLogo from './img/logo.svg';
+import blackAndWithLogo from './img/logo-uk.svg';
+import defaultLogo from './img/logo-uk.svg';
 
 const sizes = {
   'x-small': '30px',

packages/plugins/ui-theme/src/components/Logo/img/logo-uk.svg

@@ -0,0 +1,38 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="37" fill="#F7F8F6"/>
+<g filter="url(#filter0_d_0_18)">
+<mask id="path-2-inside-1_0_18" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.6L54.8 77H46L22.4 29.8L37.6 29.8L50.4 55.4L54.8 46.6H70Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.6L54.8 77H46L22.4 29.8L37.6 29.8L50.4 55.4L54.8 46.6H70Z" fill="#005EB8"/>
+<path d="M70 46.6L72.1466 47.6733L73.8833 44.2H70V46.6ZM54.8 77V79.4H56.2833L56.9466 78.0733L54.8 77ZM46 77L43.8534 78.0733L44.5167 79.4H46V77ZM22.4 29.8V27.4H18.5167L20.2534 30.8733L22.4 29.8ZM37.6 29.8L39.7466 28.7267L39.0833 27.4H37.6V29.8ZM50.4 55.4L48.2534 56.4733L50.4 60.7666L52.5466 56.4733L50.4 55.4ZM54.8 46.6V44.2H53.3167L52.6534 45.5267L54.8 46.6ZM67.8534 45.5267L52.6534 75.9267L56.9466 78.0733L72.1466 47.6733L67.8534 45.5267ZM54.8 74.6H46V79.4H54.8V74.6ZM48.1466 75.9267L24.5466 28.7267L20.2534 30.8733L43.8534 78.0733L48.1466 75.9267ZM22.4 32.2L37.6 32.2V27.4L22.4 27.4V32.2ZM35.4534 30.8733L48.2534 56.4733L52.5466 54.3267L39.7466 28.7267L35.4534 30.8733ZM52.5466 56.4733L56.9466 47.6733L52.6534 45.5267L48.2534 54.3267L52.5466 56.4733ZM54.8 49H70V44.2H54.8V49Z" fill="#005EB8" mask="url(#path-2-inside-1_0_18)"/>
+</g>
+<g filter="url(#filter1_d_0_18)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8 41H57.6L63.2 29.8L78.4 29.8L72.8 41Z" fill="#005EB8"/>
+<path d="M76.4584 31L72.0584 39.8H59.5416L63.9416 31H76.4584Z" stroke="#005EB8" stroke-width="2.4"/>
+</g>
+<path d="M56.6351 70.688L54.0607 75.8H46.7416L24.3416 31H36.8573L56.6351 70.688Z" fill="#FFD101" stroke="#FFD101" stroke-width="2.4"/>
+<path d="M59.6 31H74.821" stroke="#005EB8" stroke-width="2.4" stroke-linecap="square"/>
+<path d="M55.6 35H70.821" stroke="#005EB8" stroke-width="2.4" stroke-linecap="square"/>
+<path d="M51.6 39.8H66.821" stroke="#005EB8" stroke-width="2.4" stroke-linecap="square"/>
+<defs>
+<filter id="filter0_d_0_18" x="17.4" y="28.8" width="57.6" height="57.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_18"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_18" result="shape"/>
+</filter>
+<filter id="filter1_d_0_18" x="52.6" y="28.8" width="30.8" height="21.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_18"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_18" result="shape"/>
+</filter>
+</defs>
+</svg>

packages/plugins/ui-theme/tools/webpack.dev.config.babel.js

@@ -38,6 +38,7 @@ export default {
     new HTMLWebpackPlugin({
       __UI_OPTIONS: JSON.stringify({
         ...configJsonFormat.web,
+        version: '1.0.0',
         filename: 'index.html',
         base: new URL('/', 'http://localhost:4873'),
       }),