Removing styled components and doing some cleaning up

Author: krpeacock

gatsby-config.js

@@ -43,7 +43,6 @@ module.exports = {
         icon: "src/images/rentcap2.svg" // This path is relative to the root of the site.
       }
     },
-    `gatsby-plugin-sass`,
-    `gatsby-plugin-styled-components`
+    `gatsby-plugin-sass`
   ]
 };

gatsby-ssr.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Provider } from "react-redux";
+import initStore from "./src/methods/initStore";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./src/methods/i18n";
+
+const store = initStore();
+
+export const wrapRootElement = ({ element }) => (
+  <Provider store={store}>
+    <I18nextProvider i18n={i18n}>{element}</I18nextProvider>
+  </Provider>
+);

package-lock.json

@@ -13,15 +13,13 @@
     "@mdx-js/loader": "^1.4.5",
     "@mdx-js/mdx": "^1.4.5",
     "@mdx-js/react": "^1.4.5",
-    "babel-plugin-styled-components": "^1.10.6",
     "gatsby": "^2.15.20",
     "gatsby-image": "^2.2.8",
     "gatsby-plugin-manifest": "^2.2.18",
     "gatsby-plugin-mdx": "^1.0.43",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-react-helmet": "^3.1.3",
     "gatsby-plugin-sharp": "^2.2.9",
-    "gatsby-plugin-styled-components": "^3.1.8",
     "gatsby-source-filesystem": "^2.1.8",
     "gatsby-transformer-sharp": "^2.2.16",
     "i18next": "^19.0.1",
@@ -36,7 +34,6 @@
     "react-typography": "^0.16.19",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.4.0",
     "typography": "^0.16.19",
     "typography-theme-lincoln": "^0.16.19"
   },
@@ -49,5 +46,10 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Rent-Cap/website"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
 }

package.json

@@ -1,28 +1,18 @@
 import React from "react";
-import styled from "styled-components";
 import { Link, navigate } from "gatsby";
+import "../styles/buttons.scss";
 
-export const StyledPrimaryButton = styled.button`
-  display: inline-block;
-  border-radius: 10px;
-  background: #ffcc00;
-  color: black;
-  padding: 28px 80px;
-  font-size: 24px;
-  line-height: 33px;
-  font-weight: 700;
-  display: inline-block;
-  width: 100%;
-  cursor: pointer;
-  @media screen and (min-width: 767px) {
-    width: auto;
-  }
-`;
-
-const StyledSecondaryButton = styled.button`
-  border-radius: 10px;
-  border: 4px solid purple;
-`;
+const DefaultButton = ({ className, children, type = "button", ...props }) => (
+  <button type={type} className={`button ${className}`} {...props}>
+    {children}
+  </button>
+);
+export const StyledPrimaryButton = props => (
+  <DefaultButton className="primaryButton" {...props}></DefaultButton>
+);
+export const StyledSecondaryButton = props => (
+  <DefaultButton className="secondaryButton" {...props}></DefaultButton>
+);
 
 export const SecondaryButton = ({ to, children }) => {
   return (

src/components/Buttons.js

@@ -1,23 +1,12 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledFooter = styled.footer`
-  display: inline-grid;
-  grid-template-columns: inherit;
-  p {
-    font-size: 0.8rem;
-    line-height: 0.9rem;
-    grid-column-start: 2;
-    grid-column-end: -2;
-  }
-`;
+import "../styles/footer.scss";
 
 const Footer = () => (
-  <StyledFooter>
+  <footer>
     <p>
       The information contained on this website is provided for informational
       purposes only, and should not be considered legal advice on any matter
     </p>
-  </StyledFooter>
+  </footer>
 );
 export default Footer;