converted to class App and made text Bold

dhafer94 · Dec 1, 2021 · d9e7da2 · d9e7da2
1 parent 393afb1
commit d9e7da2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 23 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import Navigation from './Components/Navigation/Navigation';
 import Logo from './Components/Logo/Logo';
 import ImageLinkForm from './Components/ImageLinkForm/ImageLinkForm';
@@ -10,24 +10,26 @@ import particlesOptions, {
 } from './particlesOptions';
 import './App.css';
 
-function App() {
-	return (
-		<>
-			<Particles
-				className='particles'
-				id='tsparticles'
-				init={particlesInit}
-				loaded={particlesLoaded}
-				options={particlesOptions}
-			/>
-			<Navigation />
-			<Logo />
-			<Rank />
-			<ImageLinkForm />
+class App extends Component {
+	render() {
+		return (
+			<>
+				<Particles
+					className='particles'
+					id='tsparticles'
+					init={particlesInit}
+					loaded={particlesLoaded}
+					options={particlesOptions}
+				/>
+				<Navigation />
+				<Logo />
+				<Rank />
+				<ImageLinkForm />
 
-			{/* <FaceRecognition /> */}
-		</>
-	);
+				{/* <FaceRecognition /> */}
+			</>
+		);
+	}
 }
 
 export default App;
diff --git a/src/Components/ImageLinkForm/ImageLinkForm.js b/src/Components/ImageLinkForm/ImageLinkForm.js
@@ -3,14 +3,14 @@ import './ImageLinkForm.css';
 
 const ImageLinkForm = () => {
 	return (
-		<div>
+		<div className='b'>
 			<p className='f3  center'>
 				{`This Magic Brain will detect faces in your pictures. Give it a try`}
 			</p>
 			<div className='center'>
 				<div className='form center pa4 br3 shadow-5'>
 					<input className='f4 pa2 w-70 center' type='text' />
-					<button className='w-30 grow f4 link ph3 pv2 dib white bg-orange'>
+					<button className='b w-30 grow f4 link ph3 pv2 dib white bg-orange'>
 						Detect
 					</button>
 				</div>

diff --git a/src/Components/Navigation/Navigation.js b/src/Components/Navigation/Navigation.js
@@ -3,7 +3,7 @@ import React from 'react';
 const Navigation = () => {
 	return (
 		<nav style={{ display: 'flex', justifyContent: 'flex-end' }}>
-			<p className='f3 link dim black underline pa3 pointer'>Sign Out</p>
+			<p className='b f3 link dim black underline pa3 pointer'>Sign Out</p>
 		</nav>
 	);
 };

diff --git a/src/Components/Rank/Rank.js b/src/Components/Rank/Rank.js
@@ -3,8 +3,8 @@ import React from 'react';
 const Rank = () => {
 	return (
 		<div>
-			<div className=' center white f3'>{`Dhafer, your current rank is...`}</div>
-			<div className=' center white f1'>{`#5`}</div>
+			<div className='b center white f3'>{`Dhafer, your current rank is...`}</div>
+			<div className='b center white f1'>{`#5`}</div>
 		</div>
 	);
 };