cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

feat: enable dark mode

Browse Source
This commit is contained in:
Juan Picado @jotadeveloper 2020-03-02 22:05:24 +01:00
parent 26dbf3d921
commit f761e36669
No known key found for this signature in database
GPG Key ID: 15AA875EF3768142
15 changed files with 180 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App/App.tsx
View File

@ -15,7 +15,7 @@ import AppContextProvider from './AppContextProvider';
import AppRoute, { history } from './AppRoute';
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: theme && theme.palette.white,
backgroundColor: theme && theme.palette.backgroundBody,
}));
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

11
src/components/DetailContainer/DetailContainer.tsx
View File

@ -6,6 +6,7 @@ import Box from '../../muiComponents/Box';
import DetailContainerTabs from './DetailContainerTabs';
import DetailContainerContent from './DetailContainerContent';
import { TabPosition } from './tabs';
import { DetailTheme } from './styles';
const DetailContainer: React.FC = () => {
const [tabPosition, setTabPosition] = useState(TabPosition.README);
@ -23,10 +24,12 @@ const DetailContainer: React.FC = () => {
);
return (
<Box component="div" display="flex" flexDirection="column" padding={2}>
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
</Box>
<Box component="div" display="flex" flexDirection="column">
<DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
<DetailTheme>
<DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
</DetailTheme>
</Box>
);
};

7
src/components/DetailContainer/DetailContainerContentReadme.tsx
View File

@ -2,15 +2,18 @@ import React from 'react';
import { preventXSS } from '../../utils/sec-utils';
import Readme from '../Readme';
import { ReadmeSpacing } from './styles';
interface Props {
description?: string;
}
const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
if (!description) return null;
if (!description) {
return null;
}
const encodedReadme = preventXSS(description);
return <Readme description={encodedReadme} />;
return <ReadmeSpacing><Readme description={encodedReadme} /></ReadmeSpacing>;
};
export default DetailContainerContentReadme;

4
src/components/DetailContainer/DetailContainerTabs.tsx
View File

@ -28,9 +28,9 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition
return (
<Tabs
indicatorColor={'primary'}
indicatorColor={'secondary'}
onChange={onChangeTabPosition}
textColor={'primary'}
textColor={'secondary'}
value={tabPositionIndex}
variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />

11
src/components/DetailContainer/styles.ts Normal file
View File

@ -0,0 +1,11 @@
import styled from '@emotion/styled';
import { Theme } from '../../design-tokens/theme';
export const DetailTheme = styled('div')<{ theme?: Theme }>(props => ({
backgroundColor: props?.theme?.palette.readmeBackgroundColor,
}));
export const ReadmeSpacing = styled('div')<{ theme?: Theme }>(props => ({
padding: '20px',
}));

3
src/components/Logo/Logo.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import styled from '@emotion/styled';
import logo from './img/logo.svg';
import logo from './img/verdaccio-blackwhite.svg';
export enum Size {
Tiny = '20px',
Small = '40px',
Big = '90px',
}

1
src/components/Logo/img/logo.svg
View File

@ -1 +0,0 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

31
src/components/Logo/img/verdaccio-blackwhite.svg Normal file
View File

@ -0,0 +1,31 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="verdaccio">
<Title>Verdaccio</Title>
<rect width="100" height="100" rx="37" fill="black" />
<g filter="url(#filter0_d)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.7288L54.6723 77H45.7983L22 30L37.3277 30L50.2353 55.4915L54.6723 46.7288H70Z" fill="white" fill-opacity="0.6" />
</g>
<g filter="url(#filter1_d)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.621 41H72.4L78 30H75.621H62.8H58V32.3571H61.6L60.8 33.9286H54V36.2857H59.6L58.4 38.6429H50V41H57.2H67.621Z" fill="white" />
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.785 77H45.8804L22 30H37.3806L58 70.7175L54.785 77Z" fill="white" />
<defs>
<filter id="filter0_d" x="17" y="29" width="58" height="57" 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" />
<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" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="filter1_d" x="45" y="29" width="38" height="21" 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" />
<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" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

32
src/components/Logo/img/verdaccio.svg Normal file
View File

@ -0,0 +1,32 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio">
<Title>Verdaccio</Title>
<defs>
<path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" />
<filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
</filter>
<path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" />
<filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c">
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<rect fill="#F7F8F6" width="100" height="100" rx="37" />
<g transform="translate(22 29)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236" />
</g>
<g transform="translate(22 29)">
<use fill="#000" filter="url(#c)" xlink:href="#d" />
<path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000" />
</g>
<path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F" />
<path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
src/components/Package/styles.ts
View File

@ -71,7 +71,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
fontSize: 20,
display: 'block',
marginBottom: 12,
color: theme && theme.palette.eclipse,
color: theme?.palette?.eclipse,
cursor: 'pointer',
':hover': {
color: theme && theme.palette.black,
@ -117,7 +117,7 @@ export const PackageListItemText = styled(ListItemText)({
});
export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.greyDark2,
color: props?.theme?.palette.greyDark2,
fontSize: '14px',
paddingRight: 0,
}));

53
src/design-tokens/theme.ts
View File

@ -1,33 +1,24 @@
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
// Main colors
// -------------------------
const colors = {
black: '#000',
white: '#fff',
red: '#d32f2f',
orange: '#CD4000',
greySuperLight: '#f5f5f5',
greyLight: '#d3d3d3',
greyLight2: '#908ba1',
greyLight3: '#f3f4f240',
greyDark: '#a9a9a9',
greyDark2: '#586069',
greyChateau: '#95989a',
greyGainsboro: '#e3e3e3',
greyAthens: '#d3dddd',
eclipse: '#3c3c3c',
paleNavy: '#e4e8f1',
saltpan: '#f7f8f6',
snow: '#f9f9f9',
love: '#e25555',
nobel01: '#999999',
nobel02: '#9f9f9f',
primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
secondary: '#20232a',
};
import defaultTheme from './themes/default';
import darkTheme from './themes/dark';
import { ColorsTheme } from './types';
export type Colors = keyof typeof colors;
function getThemeColors() {
// eslint-disable-next-line no-constant-condition
if (false) {
return defaultTheme;
} else {
return darkTheme;
}
}
export type Colors = ColorsTheme;
const padding = {
light: '16px',
regular: '24px',
};
const fontSize = {
xxl: 26,
@ -72,10 +63,10 @@ export const theme = createMuiTheme({
fontFamily: 'inherit',
},
palette: {
...colors,
primary: { main: colors.primary },
secondary: { main: colors.secondary },
error: { main: colors.red },
...getThemeColors(),
primary: { main: getThemeColors().primary },
secondary: { main: getThemeColors().secondary },
error: { main: getThemeColors().red },
},
...customizedTheme,
});

30
src/design-tokens/themes/dark.ts Normal file
View File

@ -0,0 +1,30 @@
const colors = {
black: '#000',
white: '#fff',
red: '#d32f2f',
orange: '#CD4000',
greySuperLight: '#f5f5f5',
greyLight: '#d3d3d3',
greyLight2: '#908ba1',
greyLight3: '#f3f4f240',
greyDark: '#a9a9a9',
greyDark2: '#fff',
greyChateau: '#95989a',
greyGainsboro: '#e3e3e3',
greyAthens: '#d3dddd',
eclipse: '#fff',
paleNavy: '#e4e8f1',
saltpan: '#f7f8f6',
snow: '#f9f9f9',
love: '#e25555',
nobel01: '#999999',
nobel02: '#9f9f9f',
primary: '#000000',
secondary: '#ffffff',
// colors based on features
backgroundBody: '#000',
lightBackgroundColor: '#fff',
readmeBackgroundColor: '#fff',
};
export default colors;

28
src/design-tokens/themes/default.ts Normal file
View File

@ -0,0 +1,28 @@
const colors = {
black: '#000',
white: '#fff',
red: '#d32f2f',
orange: '#CD4000',
greySuperLight: '#f5f5f5',
greyLight: '#d3d3d3',
greyLight2: '#908ba1',
greyLight3: '#f3f4f240',
greyDark: '#a9a9a9',
greyDark2: '#586069',
greyChateau: '#95989a',
greyGainsboro: '#e3e3e3',
greyAthens: '#d3dddd',
eclipse: '#3c3c3c',
paleNavy: '#e4e8f1',
saltpan: '#f7f8f6',
snow: '#f9f9f9',
love: '#e25555',
nobel01: '#999999',
nobel02: '#9f9f9f',
primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
secondary: '#20232a',
// colors based on features
backgroundBody: '#fff',
};
export default colors;

3
src/design-tokens/types.ts Normal file
View File

@ -0,0 +1,3 @@
export interface ColorsTheme {
[key: string]: string;
}

6
src/utils/url.ts
View File

@ -2,6 +2,8 @@ import isURLValidator from 'validator/lib/isURL';
import isEmailValidator from 'validator/lib/isEmail';
import '../../types';
const OCTET_STREAM_TYPE = 'application/octet-stream';
export function isURL(url: string): boolean {
return isURLValidator(url || '', {
protocols: ['http', 'https', 'git+https'],
@ -37,9 +39,9 @@ export function downloadFile(fileStream: Blob, fileName: string): void {
// @ts-ignore. Please see: https://github.com/microsoft/TypeScript/issues/33792
if (navigator.msSaveBlob) {
// Detect if Edge
file = blobToFile(new Blob([fileStream], { type: 'application/octet-stream' }), fileName);
file = blobToFile(new Blob([fileStream], { type: OCTET_STREAM_TYPE }), fileName);
} else {
file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
file = new File([fileStream], fileName, { type: OCTET_STREAM_TYPE, lastModified: Date.now() });
}
const objectURL = URL.createObjectURL(file);