add css and redo results page

wylie39 · Mar 6, 2021 · 3f1159b · 3f1159b
1 parent 3007aa3
commit 3f1159b
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 20 deletions.
diff --git a/src/components/ClientTopNav.js b/src/components/ClientTopNav.js
@@ -7,6 +7,7 @@ export default class ClientTopNav extends React.Component {
 				<div className="logo">
 					<a href="/">
 						<img
+							className="img"
 							src="/icon.svg"
 							alt="logo"
 							width="50"

diff --git a/src/components/navbar.css b/src/components/navbar.css
@@ -6,7 +6,7 @@
 	padding-left: 0;
 	margin-bottom: 0;
 	list-style: none;
-	text-align: right;
+	text-align: center;
 }
 .logo_text {
 	font-family: Gill Sans, Gill Sans;
@@ -23,12 +23,15 @@
 	background-color: inherit !important;
 }
 .logo {
+	padding-left: 6rem;
 	display: flex;
 	align-items: center;
 }
+.img {
+}
 
 .name {
-	color: #faf0ca;
+	color: #250902;
 	margin-top: 0;
 	margin-bottom: 0;
 	padding-left: 0.5rem;

diff --git a/src/components/results.css b/src/components/results.css
@@ -7,3 +7,35 @@
 .btn-back:hover {
 	background-color: #392f5a;
 }
+
+.card {
+	position: absolute;
+	top: 20rem;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
+	transition: 0.3s;
+	border-radius: 5px; /* 5px rounded corners */
+	width: 272px;
+	color: black;
+	text-align: center;
+}
+.card-text {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	vertical-align: middle;
+}
+
+.card:hover {
+	box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Add rounded corners to the top left and the top right corner of the image */
+img {
+	border-radius: 5px 5px 0 0;
+}
+
+.card-holder {
+	display: flex;
+	position: relative;
+}
diff --git a/src/components/results.js b/src/components/results.js
@@ -14,17 +14,33 @@ export default class Results extends React.Component {
 		var obj = list.find(function (o) {
 			return o.probability === res
 		})
+		var Names = {
+			dog: "It's a dog 🐶",
+			notdog: "It's not a dog, sad 😢",
+			Corgi: "it's a corgi 🐶",
+		}
 		return (
-			<div>
-				<div>
+			<div class="card-holder">
+				<div class="card">
 					<img
 						src={this.props.img}
-						alt="test"
-						width="200"
-						height="300"
+						alt="Avatar"
+						style={{ width: '270px', height: '270px' }}
 					/>
+					<div class="container">
+						<p className="card-text">
+							{
+								Names[
+									JSON.stringify(obj.className).replace(
+										/['"]+/g,
+										''
+									)
+								]
+							}
+						</p>
+					</div>
 				</div>
-				<h2>{JSON.stringify(obj.className).replace(/['"]+/g, '')}</h2>
+				<div></div>
 				<Button
 					variant="primary"
 					onClick={this.props.handleback}

diff --git a/src/components/upload.css b/src/components/upload.css
@@ -1,4 +1,4 @@
-.btn-upload {
+.upload-div {
 	margin-top: 10rem;
 	margin-left: 3rem;
 }
@@ -8,3 +8,9 @@
 	padding-left: 2rem;
 	padding-right: 5rem;
 }
+
+.btn-upload {
+	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
+	background-color: #fea668 !important;
+	color: #ffff !important;
+}
diff --git a/src/components/upload.js b/src/components/upload.js
@@ -5,16 +5,19 @@ import ImageUploader from 'react-images-upload'
 export default class Upload extends React.Component {
 	render() {
 		return (
-			<div className="btn-upload">
-				<ImageUploader
-					withIcon={true}
-					buttonText="Choose image"
-					onChange={this.props.handleFiles}
-					imgExtension={['.jpg', '.png', '.jpeg']}
-					maxFileSize={5242880}
-					className="upload"
-					singleImage={true}
-				/>
+			<div>
+				<div className="upload-div">
+					<ImageUploader
+						withIcon={true}
+						buttonText="Choose an image"
+						onChange={this.props.handleFiles}
+						imgExtension={['.jpg', '.png', '.jpeg']}
+						maxFileSize={5242880}
+						buttonClassName={'btn-upload'}
+						className="upload"
+						singleImage={true}
+					/>
+				</div>
 			</div>
 		)
 	}

diff --git a/src/helpers/helpers.js b/src/helpers/helpers.js
@@ -10,7 +10,7 @@ const metadataURL = {
 	timeStamp: '2021-03-05T16:32:01.301Z',
 	userMetadata: {},
 	modelName: 'tm-my-image-model',
-	labels: ['Dog!', 'Not a dog', 'Corgi'],
+	labels: ['dog', 'notdog', 'Corgi'],
 }
 let model