[feature: #163788958] refactor footer component

andela · Feb 8, 2019 · 0b3699f · 0b3699f
1 parent f40aa2c
commit 0b3699f
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 123 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ dist
 .npm
 package-lock.json
 .DS_Store
+coverage
diff --git a/package.json b/package.json
@@ -1,82 +1,82 @@
 {
-    "name": "pippin-ah-frontend",
-    "version": "1.0.0",
-    "description": "Learngroud React",
-    "main": "index.js",
-    "scripts": {
-      "start:dev": "webpack-dev-server --config webpack/webpack.dev.js --open --hot",
-      "build": "webpack --config webpack/webpack.prod.js",
-      "serve": "node server.js",
-      "start": "npm run build && npm run serve",
-      "test": "jest --coverage --coverageReporters=text-lcov | coveralls",
-      "test:dev": "jest"
-    },
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/andela/pippin-ah-frontend.git"
-    },
-    "author": "Pippin",
-    "license": "MIT",
-    "bugs": {
-      "url": "https://github.com/andela/pippin-ah-frontend/issues"
-    },
-    "homepage": "https://github.com/andela/pippin-ah-frontend#readme",
-    "dependencies": {
-      "@fortawesome/fontawesome-free-solid": "^5.0.13",
-      "@fortawesome/fontawesome-svg-core": "^1.2.14",
-      "@fortawesome/free-brands-svg-icons": "^5.7.1",
-      "@fortawesome/free-solid-svg-icons": "^5.7.1",
-      "@fortawesome/react-fontawesome": "^0.1.4",
-      "babel-eslint": "^10.0.1",
-      "css-loader": "^2.1.0",
-      "enzyme": "^3.8.0",
-      "enzyme-adapter-react-16": "^1.9.1",
-      "express": "^4.16.4",
-      "file-loader": "^3.0.1",
-      "google-fonts-webpack-plugin": "^0.4.4",
-      "html-webpack-plugin": "^3.2.0",
-      "materialize-css": "^1.0.0-rc.2",
-      "node-sass": "^4.11.0",
-      "react": "^16.8.0",
-      "react-dom": "^16.8.0",
-      "react-redux": "^6.0.0",
-      "react-router-dom": "^4.3.1",
-      "redux": "^4.0.1",
-      "sass-loader": "^7.1.0",
-      "style-loader": "^0.23.1",
-      "stylelint-webpack-plugin": "^0.10.5",
-      "terser": "^3.14.1",
-      "url-loader": "^1.1.2",
-      "webpack": "^4.29.0",
-      "webpack-cli": "^3.2.1"
-    },
-    "devDependencies": {
-      "@babel/core": "^7.2.2",
-      "@babel/preset-env": "^7.3.1",
-      "@babel/preset-react": "^7.0.0",
-      "babel-eslint": "^10.0.1",
-      "babel-jest": "^24.1.0",
-      "babel-loader": "^8.0.5",
-      "coveralls": "^3.0.2",
-      "enzyme-to-json": "^3.3.5",
-      "eslint": "^5.13.0",
-      "eslint-config-airbnb": "^17.1.0",
-      "eslint-config-prettier": "^4.0.0",
-      "eslint-plugin-import": "^2.16.0",
-      "eslint-plugin-jsx-a11y": "^6.2.1",
-      "eslint-plugin-prettier": "^3.0.1",
-      "eslint-plugin-react": "^7.12.4",
-      "husky": "^1.3.1",
-      "jest": "^24.0.0",
-      "prettier": "1.16.4",
-      "pretty-quick": "^1.10.0",
-      "stylelint": "^9.10.1",
-      "stylelint-config-standard": "^18.2.0",
-      "webpack-dev-server": "^3.1.14"
-    },
-    "husky": {
-      "hooks": {
-        "pre-commit": "pretty-quick --staged"
-      }
+  "name": "pippin-ah-frontend",
+  "version": "1.0.0",
+  "description": "Learngroud React",
+  "main": "index.js",
+  "scripts": {
+    "start:dev": "webpack-dev-server --config webpack/webpack.dev.js --open --hot",
+    "build": "webpack --config webpack/webpack.prod.js",
+    "serve": "node server.js",
+    "start": "npm run build && npm run serve",
+    "test": "jest --coverage --coverageReporters=text-lcov | coveralls",
+    "test:dev": "jest --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andela/pippin-ah-frontend.git"
+  },
+  "author": "Pippin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/andela/pippin-ah-frontend/issues"
+  },
+  "homepage": "https://github.com/andela/pippin-ah-frontend#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@fortawesome/free-brands-svg-icons": "^5.7.1",
+    "@fortawesome/free-solid-svg-icons": "^5.7.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "babel-eslint": "^10.0.1",
+    "css-loader": "^2.1.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
+    "express": "^4.16.4",
+    "file-loader": "^3.0.1",
+    "google-fonts-webpack-plugin": "^0.4.4",
+    "html-webpack-plugin": "^3.2.0",
+    "materialize-css": "^1.0.0-rc.2",
+    "node-sass": "^4.11.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
+    "redux": "^4.0.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "stylelint-webpack-plugin": "^0.10.5",
+    "terser": "^3.14.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.1.0",
+    "babel-loader": "^8.0.5",
+    "coveralls": "^3.0.2",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.13.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "husky": "^1.3.1",
+    "jest": "^24.0.0",
+    "prettier": "1.16.4",
+    "pretty-quick": "^1.10.0",
+    "stylelint": "^9.10.1",
+    "stylelint-config-standard": "^18.2.0",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
     }
   }
+}
diff --git a/src/app/footer/Footer.js b/src/app/footer/Footer.js
@@ -11,16 +11,17 @@ export default function Footer() {
   return (
     <div className="footer">
       <div className="social-media-icon-div">
-        <FontAwesomeIcon
-          icon={['fab', 'facebook-square']}
-          className="facebook"
-        />
-        <FontAwesomeIcon icon={['fab', 'linkedin']} className="linkden" />
-        <FontAwesomeIcon icon={['fab', 'twitter-square']} className="twitter" />
-      </div>
-      <div>
-        <p className="footer-text">copyright &copy; LearnGround 2019.</p>
+        <div className="social-media-wrapper-facebook">
+          <FontAwesomeIcon icon={['fab', 'facebook-f']} className="facebook" />
+        </div>
+        <div className="social-media-wrapper-twitter">
+          <FontAwesomeIcon icon={['fab', 'twitter']} className="twitter" />
+        </div>
+        <div className="social-media-wrapper-linkden">
+          <FontAwesomeIcon icon={['fab', 'linkedin-in']} className="linkden" />
+        </div>
       </div>
+      <p className="footer-text">copyright &copy; LearnGround 2019.</p>
     </div>
   );
 }
diff --git a/src/app/footer/__snapshots__/footer.test.js.snap b/src/app/footer/__snapshots__/footer.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HomePage Component should render the Landing Page 1`] = `
+exports[`Footer Component should render the footer 1`] = `
 <div
   className="footer"
 >
@@ -9,7 +9,7 @@ exports[`HomePage Component should render the Landing Page 1`] = `
   >
     <FontAwesomeIcon
       border={false}
-      className=""
+      className="facebook"
       fixedWidth={false}
       flip={null}
       icon={
@@ -26,20 +26,13 @@ exports[`HomePage Component should render the Landing Page 1`] = `
       rotation={null}
       size={null}
       spin={false}
-      style={
-        Object {
-          "borderRadius": "50%",
-          "color": "#3B5998",
-          "fontSize": "25px",
-        }
-      }
       symbol={false}
       title=""
       transform={null}
     />
     <FontAwesomeIcon
       border={false}
-      className=""
+      className="linkden"
       fixedWidth={false}
       flip={null}
       icon={
@@ -56,20 +49,13 @@ exports[`HomePage Component should render the Landing Page 1`] = `
       rotation={null}
       size={null}
       spin={false}
-      style={
-        Object {
-          "borderRadius": "50%",
-          "color": "#65A2D9",
-          "fontSize": "25px",
-        }
-      }
       symbol={false}
       title=""
       transform={null}
     />
     <FontAwesomeIcon
       border={false}
-      className=""
+      className="twitter"
       fixedWidth={false}
       flip={null}
       icon={
@@ -86,25 +72,14 @@ exports[`HomePage Component should render the Landing Page 1`] = `
       rotation={null}
       size={null}
       spin={false}
-      style={
-        Object {
-          "borderRadius": "50%",
-          "color": "#0E76A8",
-          "fontSize": "25px",
-        }
-      }
       symbol={false}
       title=""
       transform={null}
     />
   </div>
   <div>
     <p
-      style={
-        Object {
-          "fontSize": "13px",
-        }
-      }
+      className="footer-text"
     >
       copyright © LearnGround 2019.
     </p>

diff --git a/src/style/footer.scss b/src/style/footer.scss
@@ -8,19 +8,38 @@
 
 .social-media-icon-div {
   display: flex;
-  width: 20%;
-  margin: 0 auto 15px auto;
+  width: 23%;
+  margin: 0 auto 20px auto;
   justify-content: space-between;
 }
 
 .facebook,
 .twitter,
 .linkden {
-  font-size: 25px;
+  font-size: 17px;
   border-radius: 50%;
-  color: #3b5998;
+  color: white;
 }
 
 .footer-text {
-  font-size: 13px;
+  font-size: 17px;
+  font-weight: bold;
+}
+
+.social-media-wrapper-linkden {
+  background-color: #0e76a8;
+  border-radius: 50%;
+  padding: 13px 15px 10px 15px;
+}
+
+.social-media-wrapper-facebook {
+  background-color: #3b5998;
+  border-radius: 50%;
+  padding: 14px 18px 8px 18px;
+}
+
+.social-media-wrapper-twitter {
+  background-color: #65a2d9;
+  border-radius: 50%;
+  padding: 15px 15px;
 }