added styling

carsoncychen · Feb 13, 2019 · 2e49d74 · 2e49d74
1 parent a274e2c
commit 2e49d74
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 18 deletions.
diff --git a/client/components/JobCards.jsx b/client/components/JobCards.jsx
@@ -3,6 +3,7 @@ import { withRouter } from 'react-router';
 import { Link, NavLink, Redirect } from 'react-router-dom';
 import UpdateCard from './UpdateCard.jsx';
 import { CardWrapper } from '../css/JobCards.jsx';
+import ButtonWrapper from '../css/ButtonWrapper';
 
 class JobCards extends Component {
   constructor(props) {
@@ -73,9 +74,9 @@ class JobCards extends Component {
     }
     return (
       <div>
-        <h2>{title}</h2>
+        <h2>{company}</h2>
         <ul>
-          <li>Company: {company}</li>
+          <li>Title: {title}</li>
           <li>Description: {description}</li>
           <li>Location: {location}</li>
           <li>Salary: {salary}</li>
@@ -86,8 +87,10 @@ class JobCards extends Component {
           <li>Updated at: {new Date(last_updated).toLocaleDateString()}</li>
           <li>Notes: {notes}</li>
         </ul>
-        <button onClick={this.deleteCard}>Delete Card</button>
-        <button onClick={this.editCard}> edit</button>
+        <span>
+          <ButtonWrapper onClick={this.deleteCard}>delete</ButtonWrapper>
+          <ButtonWrapper onClick={this.editCard}> edit</ButtonWrapper>
+        </span>
       </div>
     );
   }

diff --git a/client/css/ButtonWrapper.js b/client/css/ButtonWrapper.js
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export default styled.button`
+  border: 1px solid #9a97a8;
+  border-radius: 1em;
+  color: #9a97a8;
+  background-color: white;
+  padding-left: 1em;
+  padding-right: 1em;
+
+  font-size: 1em;
+  margin-right: 15px;
+  margin-left: 15px;
+`;
diff --git a/client/css/DashboardWrapper.js b/client/css/DashboardWrapper.js
@@ -10,5 +10,6 @@ export default styled.div`
   nav {
     display: flex;
     border: 4px solid pink;
-  }  
+  }
+  font-family: 'Lato', sans-serif;
 `;
diff --git a/client/css/JobCards.jsx b/client/css/JobCards.jsx
@@ -21,9 +21,18 @@ export default styled.div`
     background-color: white;
     margin: 5px;
     border: 3px solid pink;
+    border-radius: 0.5em;
   }
 
   li {
-    text-decoration-
+    text-decoration: none;
+    list-style-type: circle; 
   }
-`;
+ span {
+   display: flex; 
+   justify-content: center;
+   align-items: center; 
+   padding-bottom: 0.5em;
+
+ }
+`;
diff --git a/index.html b/index.html
@@ -1,14 +1,17 @@
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Job Hunter</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Lato"
+      rel="stylesheet"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Job Hunter</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script src="build/bundle.js"></script>
-  <!-- <script>
+  <body>
+    <div id="root"></div>
+    <script src="build/bundle.js"></script>
+    <!-- <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', function () {
         navigator.serviceWorker.register('service-worker.js').then(function (registration) {
@@ -25,6 +28,5 @@
       console.log('service worker is not supported');
     }
   </script> -->
-</body>
-
+  </body>
 </html>