improved styling

Author: ishvar99

src/App.css

@@ -13,8 +13,8 @@ body {
 
 .App {
  display: flex;
- height: 85vh;
- margin: 50px auto;
+ /* height: 500px; */
+ margin: 10px auto;
  width: 50vw;
  justify-content: space-around;
  align-items: center;
@@ -26,4 +26,5 @@ body {
 .header {
  text-align: center;
  font-size: 64px;
+ margin-bottom: 150px;
 }

src/components/Array/Array.css

@@ -1,6 +1,7 @@
 .array-container {
  display: flex;
  flex-wrap: wrap;
- width: 100%;
+ width: 120%;
  justify-content: space-evenly;
+ margin-bottom: 50px;
 }

src/components/ArrayItem/ArrayItem.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import './ArrayItem.css';
 const ArrayItem = ({ item, result }) => {
- let className = '';
+ let className = 'array-item';
  if (item == result) {
- className = 'result';
+ className += ' result';
  }
  return (
- <div className='array-item'>
- <p className={className}>{item}</p>
+ <div className={className}>
+ <p>{item}</p>
  </div>
  );
 };

src/components/SearchBox/SearchBox.css

@@ -11,9 +11,11 @@
  padding: 25px;
  border: none;
  min-width: 250px;
+ margin-bottom: 100px;
  position: relative;
 }
 #search-button {
+ margin-bottom: 100px;
  text-decoration: none;
  cursor: pointer;
  outline: none;