From 5b3903963af7d6c967d54a3fb4c05125b4f9fdfd Mon Sep 17 00:00:00 2001 From: Andreas Opferkuch Date: Mon, 21 Mar 2022 23:12:09 +0100 Subject: [PATCH] fix: improve mobile styles (#3077) * fix: improve mobile styles * chore: clarify changeset requirements * chore: add changeset --- .changeset/thick-readers-hang.md | 5 + CONTRIBUTING.md | 10 +- .../src/App/Header/Support/Support.tsx | 101 ++++++++---------- .../Help/__snapshots__/Help.test.tsx.snap | 2 +- .../src/pages/home/PackageList/Help/styles.ts | 2 +- packages/plugins/ui-theme/tools/dev.server.js | 2 +- 6 files changed, 54 insertions(+), 68 deletions(-) create mode 100644 .changeset/thick-readers-hang.md diff --git a/.changeset/thick-readers-hang.md b/.changeset/thick-readers-hang.md new file mode 100644 index 000000000..6b821e9cc --- /dev/null +++ b/.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) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e46d91e31..817a88bf5 100644 --- a/CONTRIBUTING.md +++ b/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 - server runs in the port `8000` and the UI on the port `4873`. This command - 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 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. +- `pnpm debug`: Run the server in debug mode `--inspect`. UI runs too but without 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 -functionality, eg: typo, docs, readme, add additional test or linting code). To +contribution to get merged (unless it does not affect functionality or +user-facing content, eg: docs, readme, adding test or typo/lint fixes). To create a changeset please run: ``` diff --git a/packages/plugins/ui-theme/src/App/Header/Support/Support.tsx b/packages/plugins/ui-theme/src/App/Header/Support/Support.tsx index ab3641659..501375131 100644 --- a/packages/plugins/ui-theme/src/App/Header/Support/Support.tsx +++ b/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) => ( +
  • + + {link.text} + +
    • + )); + return ( <> @@ -46,9 +75,10 @@ const Support = () => { - @@ -74,54 +104,7 @@ const Support = () => { area with food, clothes, donate blood, toys for kids, or your own time. Any help is very welcome.`} - +
    {`Spread the voice, make the difference today.`}
    @@ -131,7 +114,7 @@ const Support = () => { -     + ); }; diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap index 53ef7a678..1edb7c8e7 100644 --- a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap +++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap @@ -9,7 +9,7 @@ exports[` 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; } diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts index c54d59c92..057420c11 100644 --- a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts +++ b/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', }); diff --git a/packages/plugins/ui-theme/tools/dev.server.js b/packages/plugins/ui-theme/tools/dev.server.js index a7eefb6fa..302a55585 100644 --- a/packages/plugins/ui-theme/tools/dev.server.js +++ b/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); }