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

Refactor(#240): Created Reset CSS and added local fonts

Browse Source
This commit is contained in:
Priscila Oliveira 2019-11-12 08:18:05 +01:00 committed by GitHub
parent f265b6ba33
commit 09fe1db850
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 78 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App/App.tsx
View File

@ -1,7 +1,5 @@
import React, { Component, ReactElement } from 'react';
import isNil from 'lodash/isNil';
import 'normalize.css';
import 'typeface-roboto/index.css';
import storage from '../utils/storage';
import { makeLogin, isTokenExpire } from '../utils/login';
@ -10,8 +8,8 @@ import LoginModal from '../components/Login';
import Header from '../components/Header';
import { Container, Content } from '../components/Layout';
import API from '../utils/api';
import '../utils/styles/global';
import Footer from '../components/Footer';
import StyleBaseline from '../design-tokens/StyleBaseline';
import AppRoute from './AppRoute';
import { AppProps, AppContextProvider } from './AppContext';
@ -46,10 +44,13 @@ export default class App extends Component<{}, AppProps> {
const context = { isUserLoggedIn, packages, logoUrl, user, scope };
return (
<Container isLoading={isLoading}>
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
{this.renderLoginModal()}
</Container>
<>
<StyleBaseline />
<Container isLoading={isLoading}>
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
{this.renderLoginModal()}
</Container>
</>
);
}

2
src/components/Footer/__snapshots__/Footer.test.tsx.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-tsfgle ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-i15wza ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;
exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-151fgib ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-ommwhu ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;

2
src/components/Icon/__snapshots__/Icon.test.tsx.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-snirlv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;
exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-j2zgvv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;

10
src/components/Icon/styles.ts
View File

@ -28,9 +28,8 @@ const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }):
`;
export const Svg = styled('svg')`
&& {
${commonStyle};
}
${commonStyle};
box-sizing: initial;
`;
export const ImgWrapper: StyledOtherComponent<
@ -43,9 +42,8 @@ export const ImgWrapper: StyledOtherComponent<
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
{}
> = styled('span')`
&& {
${commonStyle};
}
${commonStyle};
box-sizing: initial;
`;
export const Img = styled('img')({

38
src/design-tokens/ResetStyles.tsx Normal file
View File

@ -0,0 +1,38 @@
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { fontWeight } from '../utils/styles/sizes';
import { breakpoints } from '../utils/styles/media';
const resetStyles = makeStyles(() => ({
'@global': {
// eslint-disable-next-line max-len
'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
},
strong: {
fontWeight: fontWeight.semiBold,
},
'html, body, #root': {
height: '100%',
},
'.container': {
padding: 15,
flex: 1,
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
maxWidth: breakpoints.container,
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
},
},
},
}));
const ResetStyles: React.FC = ({ children }) => {
resetStyles();
return <>{children}</>;
};
export default ResetStyles;

15
src/design-tokens/StyleBaseline.tsx Normal file
View File

@ -0,0 +1,15 @@
import CssBaseline from '@material-ui/core/CssBaseline';
import React from 'react';
import 'normalize.css';
import 'typeface-roboto/index.css';
import ResetCSS from './ResetStyles';
const StyleBaseline: React.FC = () => (
<>
<CssBaseline />
<ResetCSS />
</>
);
export default StyleBaseline;

80
src/utils/styles/global.ts
View File

@ -1,80 +0,0 @@
import { injectGlobal } from 'emotion';
import { fontSize, fontWeight } from './sizes';
import colors from './colors';
import { breakpoints } from './media';
const fontFamily = `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
export default injectGlobal`
html,
body {
height: 100%;
}
body {
font-family: ${fontFamily};
font-size: ${fontSize.base};
color: ${colors.eclipse};
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
strong {
font-weight: ${fontWeight.semiBold};
}
.container {
padding: 15px;
flex: 1;
@media screen and (min-width: ${breakpoints.container}px) {
max-width: ${breakpoints.container}px;
width: 100%;
margin-left: auto;
margin-right: auto;
};
.el-loading-spinner {
margin-top: 0 !important;
}
}
.content {
display: flex;
}
.page-full-height {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.el-button {
&:hover, &:focus {
color: ${colors.primary};
border-color: ${colors.primary};
}
}
.el-input__inner {
&:hover, &:focus {
border-color: ${colors.primary};
}
}
.el-dialog__headerbtn:hover .el-dialog__close {
color: ${colors.eclipse};
}
.package-list-items {
width: 100%;
}
`;

3
tools/webpack.config.js
View File

@ -67,7 +67,8 @@ module.exports = {
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'url-loader',
options: {
name: '/fonts/[name].[ext]',
name: '[name].[ext]',
outputPath: 'fonts',
limit: 50,
},
},

8
types/custom.d.ts vendored
View File

@ -1,11 +1,3 @@
// https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript
declare module '*.svg' {
const content: string;
export default content;
}
declare module '*.png';
declare module 'localstorage-memory' {
const memoryStorage: Storage;
export default memoryStorage;

9
types/files.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module '*.svg' {
const content: string;
export default content;
}
declare module '*.png' {
const value: string;
export = value;
}