Moved to Material-UI

vcua-mobify · Mar 24, 2020 · 7bdc617 · 7bdc617
1 parent 6b680c1
commit 7bdc617
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
+    "@material-ui/core": "^4.9.7",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <!-- Material UI dependencies -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <title>Target Manager App</title>
   </head>
   <body>

diff --git a/src/CreateTarget.js b/src/CreateTarget.js
@@ -1,4 +1,7 @@
 import React from 'react';
+import Button from '@material-ui/core/Button';
+import Input from '@material-ui/core/Input';
+import Card from '@material-ui/core/Card';
 import './CreateTarget.css';
 
 class CreateTarget extends React.Component {
@@ -28,12 +31,12 @@ class CreateTarget extends React.Component {
 
     render() {
         return (
-        <div className="c-createTarget">
+        <Card className="c-createTarget">
             <h1>New Target</h1>
-            <input type="text" name="targetName" value={this.state.targetName} placeholder="Target Name" onChange={this.inputChange} />
-            <input type="text" name="targetSlug" value={this.state.targetSlug} placeholder="Target Slug" onChange={this.inputChange} />
-            <button type="button" value="Create" onClick={this.buttonClick}>Create</button>
-        </div>
+            <Input type="text" name="targetName" value={this.state.targetName} placeholder="Target Name" onChange={this.inputChange} />
+            <Input type="text" name="targetSlug" value={this.state.targetSlug} placeholder="Target Slug" onChange={this.inputChange} />
+            <Button value="Create" onClick={this.buttonClick}>Create</Button>
+        </Card>
         );
     }
   }

diff --git a/src/Target.js b/src/Target.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import storefront from './storefront.png';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import StorefrontIcon from '@material-ui/icons/Storefront';
 import './Target.css';
 
 class Target extends React.Component {
@@ -16,13 +18,15 @@ class Target extends React.Component {
 
   render() {
     return (
-      <div className="c-target">
+      <Card className="c-target">
         <h1>{this.props.name}</h1>
         <p>{this.props.region}</p>
-        <a href={this.props.link}><img className="c-target__icon" src={storefront} alt="storefront icon" /></a>
+        <a href={this.props.link}>
+          <StorefrontIcon fontSize='large' color='primary' />
+        </a>
         <p>Deployed at {this.props.deploy}</p>
-        <p className="c-target__delete" onClick={this.buttonClick}>DELETE</p>
-      </div>
+        <Button className="c-target__delete" color="secondary" onClick={this.buttonClick}>DELETE</Button>
+      </Card>
     );
   }
 }

diff --git a/src/storefront.png b/src/storefront.png