Added donation button to index page

Made descriptions sound more professional Readded styled-components Gatsby plugin Updated dependencies
envyclient · Apr 25, 2018 · 94b67c8 · 94b67c8
1 parent b4c10b5
commit 94b67c8
Show file tree

Hide file tree

Showing 7 changed files with 3,087 additions and 2,639 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -10,6 +10,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-plugin-nprogress',
       options: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,25 +15,27 @@
     "develop": "gatsby develop"
   },
   "dependencies": {
-    "gatsby": "^1.9.149",
-    "gatsby-link": "^1.6.32",
+    "babel-plugin-styled-components": "^1.5.1",
+    "gatsby": "^1.9.254",
+    "gatsby-link": "^1.6.41",
     "gatsby-plugin-manifest": "^1.0.12",
-    "gatsby-plugin-nprogress": "^1.0.9",
-    "gatsby-plugin-offline": "^1.0.12",
+    "gatsby-plugin-nprogress": "^1.0.14",
+    "gatsby-plugin-offline": "^1.0.15",
     "gatsby-plugin-react-helmet": "^1.0.8",
-    "gatsby-plugin-sitemap": "^1.2.9",
+    "gatsby-plugin-sitemap": "^1.2.23",
+    "gatsby-plugin-styled-components": "^2.0.11",
     "npm": "^5.7.1",
     "react-image": "^1.3.1",
-    "react-transition-group": "^2.2.1",
+    "react-transition-group": "^2.3.1",
     "styled-components": "^2.4.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.1.2",
-    "eslint": "^4.14.0",
+    "babel-eslint": "^8.2.3",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react": "^7.7.0",
     "prettier-eslint": "^8.8.1"
   }
 }
diff --git a/src/data/config.json b/src/data/config.json
@@ -22,28 +22,28 @@
   "features": [
     {
       "id": "undetectable",
-      "title": "undetectable",
-      "desc": "aimed at bypassing NCP, Watchdog, and G.W.E.N.",
+      "title": "Undetectable",
+      "desc": "Aimed at bypassing NCP, Watchdog, and G.W.E.N.",
       "icon": "privacy"
     },
     {
       "id": "noob_friendly",
-      "title": "noob friendly",
-      "desc": "designed for ease of use",
+      "title": "Noob Friendly",
+      "desc": "Designed for ease of use",
       "icon": "group"
     },
     {
       "id": "opti_fine",
-      "title": "optifine",
-      "desc": "improves Minecraft performance",
+      "title": "Optifine",
+      "desc": "Improves Minecraft performance",
       "icon": "laptop"
     }
   ],
   "credits": [
     {
       "id": "mat",
       "name": "Mat",
-      "desc": "overall help with the client",
+      "desc": "Provided overall help with the client",
       "social": [
         {
           "id": "youtube",
@@ -54,7 +54,7 @@
     {
       "id": "og",
       "name": "OG",
-      "desc": "helped with some basic modules",
+      "desc": "Helped with some basic modules",
       "social": [
         {
           "id": "youtube",
@@ -65,7 +65,7 @@
     {
       "id": "roygbiv",
       "name": "ROYGBIV",
-      "desc": "gave design ideas",
+      "desc": "Contributed a few design ideas",
       "social": [
         {
           "id": "youtube",
@@ -76,7 +76,7 @@
     {
       "id": "louise",
       "name": "Louise",
-      "desc": "made envy graphics",
+      "desc": "Created some Envy graphics",
       "social": [
         {
           "id": "youtube",

diff --git a/src/data/icons.svg.js b/src/data/icons.svg.js
@@ -33,6 +33,9 @@ const iconPathData = {
   email: [
     'M20 8l-8 5-8-5V6l8 5 8-5m0-2H4c-1.11 0-2 .89-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.11-.9-2-2-2z',
   ],
+  paypal: [
+    'M8.32 21.97a.546.546 0 0 1-.26-.32c-.03-.15-.06.11.6-4.09.6-3.8.59-3.74.67-3.85.13-.17.11-.17 1.61-.18 1.32-.03 1.6-.03 2.19-.12 3.25-.45 5.26-2.36 5.96-5.66.04-.22.08-.41.09-.41 0-.01.07.04.15.1 1.03.78 1.38 2.22.99 4.14-.46 2.29-1.68 3.81-3.58 4.46-.81.28-1.49.39-2.69.42-.8.04-.82.04-1.05.19-.17.17-.16.14-.55 2.55-.27 1.7-.37 2.25-.41 2.35-.07.16-.21.3-.37.38l-.11.07H10c-1.29 0-1.62 0-1.68-.03m-4.5-2.23c-.19-.1-.32-.27-.32-.47C3.5 19 6.11 2.68 6.18 2.5c.09-.18.32-.37.5-.44L6.83 2h3.53c3.91 0 3.76 0 4.64.2 2.62.55 3.82 2.3 3.37 4.93-.5 2.93-1.98 4.67-4.5 5.3-.87.21-1.48.27-3.14.27-1.31 0-1.41.01-1.67.15-.26.15-.47.42-.56.75-.04.07-.27 1.47-.53 3.1a241.3 241.3 0 0 0-.47 3.02l-.03.06H5.69c-1.58 0-1.8 0-1.87-.04z',
+  ],
 };
 
 export const getIconPaths = id => iconPathData[id].map(d => <path key={d} d={d} />);

diff --git a/src/layouts/index.css.js b/src/layouts/index.css.js
@@ -1,6 +1,6 @@
 import { css, injectGlobal } from 'styled-components';
 
-import { measurements, colors, opacities, fonts, shadows, transitions } from '../data/values.css';
+import { medias, measurements, colors, opacities, fonts, shadows, transitions } from '../data/values.css';
 
 const selectionStyle = css`
   background: ${colors.primary};
@@ -56,7 +56,6 @@ const index = injectGlobal`
     }
 
     &[role='button'] {
-      display: inline-block;
       padding: 1em 1.5em;
       text-transform: lowercase;
       background: ${colors.primary};
@@ -69,6 +68,12 @@ const index = injectGlobal`
       }
     }
   }
+
+  ${medias.mobile`
+    body {
+      font-size: 14px;
+    }
+  `}
 `;
 
 export default index;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 
 import Logo from '../components/Logo';
 
+import { getIconSvg } from '../data/icons.svg';
 import { measurements, colors, opacities, fonts } from '../data/values.css';
 
 import splashBg from '../images/index/hero-bg.jpg';
@@ -104,10 +105,18 @@ const IndexInfoTextRegular = styled.span`
   ${({ textCase }) => textTransformStyle(textCase)};
 `;
 
+const IndexInfoIconWrapper = styled.div`
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+`;
+
 const IndexInfoButton = styled.a.attrs({
   role: 'button',
-  href: 'http://ad.envyclient.com/1',
 })`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   margin: ${measurements.padding.container};
   font-size: ${fontSizeCalculation(fonts.sizes[16])};
 `;
@@ -127,10 +136,17 @@ const IndexPage = () => (
         <IndexInfoTextRegular textCase="lower">by </IndexInfoTextRegular>
         <IndexInfoTextBold>{owner}</IndexInfoTextBold>
       </IndexInfoAuthor>
-      <IndexInfoButton>
-        <IndexInfoTextRegular textCase="lower">Download </IndexInfoTextRegular>
-        <IndexInfoTextBold textCase="lower">{label}</IndexInfoTextBold>
-      </IndexInfoButton>
+      <div>
+        <IndexInfoButton href="http://ad.envyclient.com/1">
+          <IndexInfoTextRegular textCase="lower">Download&nbsp;</IndexInfoTextRegular>
+          <IndexInfoTextBold textCase="lower">{label}</IndexInfoTextBold>
+        </IndexInfoButton>
+        |
+        <IndexInfoButton href="https://www.paypal.me/Haq">
+          <IndexInfoTextRegular textCase="lower">Donate&nbsp;</IndexInfoTextRegular>
+          <IndexInfoIconWrapper>{getIconSvg('paypal')}</IndexInfoIconWrapper>
+        </IndexInfoButton>
+      </div>
     </IndexInfoContainer>
     <IndexLogo />
   </IndexContainer>