diff --git a/src/App/App.tsx b/src/App/App.tsx index c2ba219..4623a44 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -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 }) => ({ diff --git a/src/components/DetailContainer/DetailContainer.tsx b/src/components/DetailContainer/DetailContainer.tsx index fe586e0..3f054af 100644 --- a/src/components/DetailContainer/DetailContainer.tsx +++ b/src/components/DetailContainer/DetailContainer.tsx @@ -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 ( - - - - + + + + + + ); }; diff --git a/src/components/DetailContainer/DetailContainerContentReadme.tsx b/src/components/DetailContainer/DetailContainerContentReadme.tsx index f5077d6..c3117c1 100644 --- a/src/components/DetailContainer/DetailContainerContentReadme.tsx +++ b/src/components/DetailContainer/DetailContainerContentReadme.tsx @@ -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 = ({ description }) => { - if (!description) return null; + if (!description) { + return null; + } const encodedReadme = preventXSS(description); - return ; + return ; }; export default DetailContainerContentReadme; diff --git a/src/components/DetailContainer/DetailContainerTabs.tsx b/src/components/DetailContainer/DetailContainerTabs.tsx index fdaa009..9bed345 100644 --- a/src/components/DetailContainer/DetailContainerTabs.tsx +++ b/src/components/DetailContainer/DetailContainerTabs.tsx @@ -28,9 +28,9 @@ const DetailContainerTabs: React.FC = ({ tabPosition, onChangeTabPosition return ( diff --git a/src/components/DetailContainer/styles.ts b/src/components/DetailContainer/styles.ts new file mode 100644 index 0000000..bfe69c6 --- /dev/null +++ b/src/components/DetailContainer/styles.ts @@ -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', +})); diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index 8716bf0..e5c9975 100644 --- a/src/components/Logo/Logo.tsx +++ b/src/components/Logo/Logo.tsx @@ -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', } diff --git a/src/components/Logo/img/logo.svg b/src/components/Logo/img/logo.svg deleted file mode 100644 index 5613a30..0000000 --- a/src/components/Logo/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ -Verdaccio diff --git a/src/components/Logo/img/verdaccio-blackwhite.svg b/src/components/Logo/img/verdaccio-blackwhite.svg new file mode 100644 index 0000000..9a95f11 --- /dev/null +++ b/src/components/Logo/img/verdaccio-blackwhite.svg @@ -0,0 +1,31 @@ + + Verdaccio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Logo/img/verdaccio.svg b/src/components/Logo/img/verdaccio.svg new file mode 100644 index 0000000..23413b4 --- /dev/null +++ b/src/components/Logo/img/verdaccio.svg @@ -0,0 +1,32 @@ + + Verdaccio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 33e6076..e56184f 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -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, })); diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts index 5f1d6cb..0c8744d 100644 --- a/src/design-tokens/theme.ts +++ b/src/design-tokens/theme.ts @@ -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, }); diff --git a/src/design-tokens/themes/dark.ts b/src/design-tokens/themes/dark.ts new file mode 100644 index 0000000..5d4902d --- /dev/null +++ b/src/design-tokens/themes/dark.ts @@ -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; diff --git a/src/design-tokens/themes/default.ts b/src/design-tokens/themes/default.ts new file mode 100644 index 0000000..3384e5a --- /dev/null +++ b/src/design-tokens/themes/default.ts @@ -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; diff --git a/src/design-tokens/types.ts b/src/design-tokens/types.ts new file mode 100644 index 0000000..794cdb8 --- /dev/null +++ b/src/design-tokens/types.ts @@ -0,0 +1,3 @@ +export interface ColorsTheme { + [key: string]: string; +} diff --git a/src/utils/url.ts b/src/utils/url.ts index 021d034..3883459 100644 --- a/src/utils/url.ts +++ b/src/utils/url.ts @@ -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);