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

src/App/App.tsx

@@ -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 (
+      <>
+        <StyleBaseline />
         <Container isLoading={isLoading}>
           {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
           {this.renderLoginModal()}
         </Container>
+      </>
     );
   }
 

src/components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -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>"`;

src/components/Icon/__snapshots__/Icon.test.tsx.snap

@@ -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>"`;

src/components/Icon/styles.ts

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

src/design-tokens/ResetStyles.tsx

@@ -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;

src/design-tokens/StyleBaseline.tsx

@@ -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;

src/utils/styles/global.ts

@@ -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%;
-    }
-  
-`;

tools/webpack.config.js

@@ -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,
         },
       },

types/custom.d.ts

@@ -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;

types/files.d.ts

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