Use ups configs

Author: bchiang7

.eslintrc

@@ -1,55 +1,6 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended"
-  ],
-  "plugins": ["jsx-a11y"],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true
-  },
+  "extends": "@upstatement/eslint-config/react",
   "rules": {
-    "no-console": ["error", { "allow": ["warn", "error"] }],
-
-    "curly": "error",
-    "eqeqeq": "error",
-    "no-eq-null": "error",
-
-    "no-use-before-define": ["error", "nofunc"],
-
-    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
-    "comma-dangle": ["error", "always-multiline"],
-    "comma-spacing": "error",
-    "comma-style": "error",
-    "func-call-spacing": "error",
-    "indent": ["error", 2, { "SwitchCase": 1, "MemberExpression": 1 }],
-    "key-spacing": ["error", { "mode": "minimum" }],
-    "keyword-spacing": "error",
-    "object-curly-spacing": ["error", "always"],
-    "one-var": ["error", "never"],
-    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
-    "semi": ["error", "always"],
-    "space-before-function-paren": ["error", "never"],
-    "space-infix-ops": "error",
-
-    "arrow-spacing": "error",
-    "no-duplicate-imports": "error",
-    "no-useless-constructor": "error",
-    "no-var": "error",
-    "prefer-const": "error",
-    "prefer-template": "error",
-
     "react/no-unescaped-entities": ["error", { "forbid": [">", "\"", "}"] }]
   }
 }

.prettierrc

@@ -28,8 +28,8 @@
   "dependencies": {
     "animejs": "^2.2.0",
     "babel-plugin-styled-components": "^1.7.1",
-    "gatsby": "^2.0.6",
-    "gatsby-image": "^2.0.7",
+    "gatsby": "^2.0.8",
+    "gatsby-image": "^2.0.9",
     "gatsby-plugin-google-analytics": "^2.0.6",
     "gatsby-plugin-netlify": "^2.0.0",
     "gatsby-plugin-offline": "^2.0.5",
@@ -39,29 +39,31 @@
     "gatsby-plugin-sitemap": "^2.0.1",
     "gatsby-plugin-styled-components": "^3.0.0",
     "gatsby-remark-external-links": "0.0.4",
-    "gatsby-remark-images": "^2.0.1",
+    "gatsby-remark-images": "^2.0.2",
     "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-remark": "^2.1.3",
-    "gatsby-transformer-sharp": "^2.1.1",
+    "gatsby-transformer-sharp": "^2.1.2",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
     "react-anchor-link-smooth-scroll": "^1.0.11",
     "react-dom": "^16.5.2",
     "react-helmet": "^5.2.0",
     "react-transition-group": "^2.4.0",
-    "scrollreveal": "^4.0.2",
+    "scrollreveal": "^4.0.4",
     "styled-components": "^3.4.9"
   },
   "devDependencies": {
+    "@upstatement/eslint-config": "0.2.1",
+    "@upstatement/prettier-config": "^0.2.1",
     "babel-eslint": "^9.0.0",
     "eslint": "^5.6.0",
-    "eslint-config-prettier": "^3.0.1",
+    "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.2.2",
-    "prettier": "^1.14.2",
-    "pretty-quick": "^1.6.0"
+    "husky": "^1.0.0-rc.15",
+    "lint-staged": "^7.3.0",
+    "prettier": "^1.14.3",
+    "pretty-quick": "^1.7.0"
   }
 }

package.json

@@ -0,0 +1 @@
+module.exports = require('@upstatement/prettier-config');

prettier.config.js

@@ -16,7 +16,6 @@ const TabsContainer = styled.div`
   display: flex;
   align-items: flex-start;
   position: relative;
-
   ${media.thone`display: block;`};
 `;
 const Tabs = styled.div`
@@ -33,7 +32,8 @@ const Tabs = styled.div`
 `;
 const Tab = styled.button`
   ${mixins.link};
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
   background-color: transparent;
   height: ${theme.tabHeight}px;
@@ -45,8 +45,9 @@ const Tab = styled.button`
   font-family: ${theme.fonts.SFMono};
   font-size: ${theme.fontSizes.smallish};
   color: ${props => (props.isActive ? theme.colors.green : theme.colors.lightGrey)};
-  ${media.tablet`padding: 0 10px 2px;`};
+  ${media.tablet`padding: 0 15px 2px;`};
   ${media.thone`
+    ${mixins.flexCenter};
     padding: 0 15px;
     text-align: center;
     border-left: 0;

src/components/jobs.js

@@ -21,6 +21,8 @@ const LoaderContainer = styled.div`
 const LogoWrapper = styled.div`
   width: max-content;
   max-width: 100px;
+  transition: ${theme.transition};
+  opacity: ${props => (props.show ? 1 : 0)};
   svg {
     width: 100%;
     height: 100%;
@@ -39,9 +41,15 @@ class Loader extends Component {
     finishLoading: PropTypes.func.isRequired,
   };
 
+  state = {
+    show: false,
+  };
+
   componentDidMount() {
-    document.body.style.overflow = 'hidden';
-    this.animate();
+    this.setState({ show: true }, () => {
+      document.body.style.overflow = 'hidden';
+      this.animate();
+    });
   }
 
   animate() {
@@ -55,7 +63,7 @@ class Loader extends Component {
     loader
       .add({
         targets: '#logo path',
-        delay: 0,
+        delay: 500,
         duration: 2000,
         easing: 'easeInOutQuart',
         strokeDashoffset: [anime.setDashoffset, 0],
@@ -83,9 +91,11 @@ class Loader extends Component {
   }
 
   render() {
+    const { show } = this.state;
+
     return (
       <LoaderContainer className="loader">
-        <LogoWrapper>
+        <LogoWrapper show={show}>
           <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
             <title>Loader Logo</title>
             <g>

src/components/loader.js

@@ -50,6 +50,7 @@ const theme = {
   headerHeight: '100px',
   headerScrollHeight: '70px',
   margin: '20px',
+
   tabHeight: 42,
   tabWidth: 120,