fix: improve mobile styles (#3077)

* fix: improve mobile styles

* chore: clarify changeset requirements

* chore: add changeset

.changeset/thick-readers-hang.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': patch
+---
+
+fix: fixes some style issues on mobile, particularly related to the Ukraine support message - [@s-h-a-d-o-w](https://github.com/s-h-a-d-o-w)

CONTRIBUTING.md

@@ -138,10 +138,8 @@ output to the code. Each package has it owns namespace.
 
 To run the application from the source code, ensure the project has been built with `pnpm build`, once this is done, there are few commands that helps to run server:
 
-- `pnpm start`: Run the server and the UI with `concurrently`, the
+- `pnpm start`: Runs server on port `8000` and UI on port `4873`. This is particularly useful if you want to contribute to the UI, since it runs with hot reload.
-  server runs in the port `8000` and the UI on the port `4873`. This command
+- `pnpm debug`: Run the server in debug mode `--inspect`. UI runs too but without hot reload. For automatic break use `pnpm debug:break`.
-  is useful if you want to contribute mostly on the UI.
-- `pnpm debug`: Run the server in debug mode `--inspect`, the UI is included but does not have hot reload. For automatic break use `pnpm debug:break`.
 - `pnpm debug:fastify`: To contribute on the [fastify migration](https://github.com/verdaccio/verdaccio/discussions/2155) this is a temporary command for such purpose.
 - `pnpm website`: Build the website, for more commands to run the _website_, run `cd website` and then `pnpm serve`, website will run on port `3000`.
 - `pnpm docker`: Build the docker image. Requires `docker` command available in your system.
@@ -333,8 +331,8 @@ We use [changesets](https://github.com/atlassian/changesets) in order to
 generate a detailed Changelog as possible.
 
 Adding a changeset with your Pull Request is essential if you want your
-contribution to get merged (unless is a change that does not affect library
+contribution to get merged (unless it does not affect functionality or
-functionality, eg: typo, docs, readme, add additional test or linting code). To
+user-facing content, eg: docs, readme, adding test or typo/lint fixes). To
 create a changeset please run:
 
 ```

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

@@ -4,12 +4,11 @@
 
 /* eslint-disable react/jsx-pascal-case */
 import styled from '@emotion/styled';
-import { Theme } from '@mui/material';
+import { Dialog, Link, 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';
@@ -18,13 +17,6 @@ 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,
 };
 
@@ -33,10 +25,47 @@ const Flags = styled('span')<{ theme?: Theme }>(() => ({
 }));
 
 const title = 'Support people affected by the war in Ukraine';
+
+const links = [
+  {
+    href: 'https://twitter.com/denysdovhan/status/1501486563842211843',
+    text: 'Listen at Twitter OSS developers about the kjkjwar',
+  },
+  {
+    href: 'https://snyk.io/blog/celebrating-amazing-open-source-innovation-ukraine/',
+    text: 'Learn more about Open Source developers in Ukraine',
+  },
+  {
+    href: 'https://www.savethechildren.org/us/where-we-work/ukraine/',
+    text: 'Donate to Save the Children',
+  },
+  {
+    href: 'https://www.ifrc.org/',
+    text: 'Donate to the International Red Cross',
+  },
+  {
+    href: 'https://www.hrw.org/news/2022/03/10/ukraine-russian-air-dropped-bombs-hit-residential-area/',
+    text: 'Read Reports from Human Rights Watch',
+  },
+  {
+    href: 'https://europeanbloodalliance.eu/',
+    text: 'Donate blood in Europe',
+  },
+];
+
 const Support = () => {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+
+  const linkElements = links.map((link) => (
+    <li key={link.text}>
+      <Link href={link.href} target="_blank">
+        <Typography>{link.text}</Typography>
+      </Link>
+    </li>
+  ));
+
   return (
     <>
       <Tooltip title={title}>
@@ -46,9 +75,10 @@ const Support = () => {
           </Flags>
         </IconButton>
       </Tooltip>
-      <Modal
+      <Dialog
         aria-describedby="modal-modal-description"
         aria-labelledby="modal-modal-title"
+        maxWidth="md"
         onClose={handleClose}
         open={open}
       >
@@ -74,54 +104,7 @@ const Support = () => {
                 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' }}>
+              <ul style={{ padding: '10px 0' }}>{linkElements}</ul>
-                <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>
@@ -131,7 +114,7 @@ const Support = () => {
             </Grid>
           </Grid>
         </Box>
-      </Modal>
+      </Dialog>
     </>
   );
 };

packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
   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;
+  max-width: 600px;
   margin: auto;
 }
 

packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts

@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import { default as Typography } from 'verdaccio-ui/components/Heading';
 
 export const CardStyled = styled(Card)({
-  width: 600,
+  maxWidth: 600,
   margin: 'auto',
 });
 

packages/plugins/ui-theme/tools/dev.server.js

@@ -40,7 +40,7 @@ new WebpackDevServer(compiler, {
       target: 'http://localhost:8000',
     },
   ],
-}).listen(port, 'localhost', function (err) {
+}).listen(port, '0.0.0.0', function (err) {
   if (err) {
     return console.log(err);
   }