Css Enhancement...

Author: PremApk

package-lock.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "uuid": "^8.3.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

package.json

@@ -4,31 +4,35 @@ import ResultContainer from '../ResultContainer/ResultContainer';
 import SearchBox from '../SearchBox/SearchBox';
 import './App.css';
 
+//Adding up Git-hub Startup-Name Generator
 const name = require('@rstacruz/startup-name-generator');
 
 class App extends React.Component {
 
+    //State
     state = {
         headerTitle: "Name-It!",
         isChanged: true,
         suggestedNames: []
     };
 
+    //CallBack function triggered from SearchBox Component
     handleInputChange = (InputChangeValue) => {
         this.setState({
             isChanged: !InputChangeValue,
             suggestedNames: InputChangeValue ? name(InputChangeValue) : []
         });
     };
 
+    //Rendering Components
     render() {
         return (
             <div>
-                <Header isChanged={this.state.isChanged} headTitle={this.state.headerTitle} />
+                <Header isChanged={this.state.isChanged} headTitle={this.state.headerTitle} /> 
                 <SearchBox onInputChange={this.handleInputChange} />
                 <ResultContainer suggestedNames={this.state.suggestedNames} />
             </div>
-        )
+        );
     }
 }
 

src/components/App/App.jsx

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 100px;
+    margin-top: 60px;
 }
 
 .head-image {
@@ -11,8 +11,8 @@
 }
 
 .head-image-expanded {
-    min-width: 230px;
-    max-width: 250px;
+    min-width: 250px;
+    max-width: 230px;
 }
 
 .head-image-contracted {
@@ -23,11 +23,11 @@
 .head-text {
     font-family: 'Hachi Maru Pop', cursive;
     margin: 5px 0px 15px 0px;
-    transition: font-size 1s;
+    transition: font-size 1s, font-size 1s;
 }
 
 .head-text-expanded {
-    font-size: 50px;
+    font-size: 36px;
 }
 
 .head-text-contracted {

src/components/Header/Header.css

@@ -5,7 +5,9 @@ const nameCheapURL = 'https://www.namecheap.com/domains/registration/results/?do
 
 const NameCard = ({ suggestedName }) => {
     return (
-        <a className="card-link" href={`${nameCheapURL}${suggestedName}`}>
+        <a target="_blank"
+        rel="noreferrer" 
+        className="card-link" href={`${nameCheapURL}${suggestedName}`}>
             <div className="name-card-container">
                 <p className="name-card">{suggestedName}</p>
             </div>

src/components/NameCard/NameCard.jsx

@@ -2,7 +2,5 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    padding: 40px 100px;
-    font-size: larger;
-
+    padding: 20px 40px;
 }

src/components/ResultContainer/ResultContainer.css

@@ -2,10 +2,12 @@ import React from 'react';
 import NameCard from '../NameCard/NameCard';
 import './ResultContainer.css';
 
+const { v4: uuidv4 } = require('uuid');
+
 const resultContainer = ({ suggestedNames }) => {
 
     const suggestedNamesJSX = suggestedNames.map((suggestedName) => {
-        return <NameCard key={suggestedName} suggestedName={suggestedName} />
+        return <NameCard key={uuidv4()} suggestedName={suggestedName} />
     });
 
     return (

src/components/ResultContainer/ResultContainer.jsx

@@ -1,13 +1,13 @@
 .search-container {
     display: flex;
     justify-content: center;
-    margin: 10px 30px 0px 30px;
+    margin: 10px;
 }
 
 .search-input {
-    padding: 15px 80px;
-    font-size: x-large;
-    width: 400px;
+    padding: 8px 15px;
+
+    width: 250px;
     border-width: 0;
     background: #a592f2;
     color: #e7e9f0;
@@ -17,7 +17,6 @@
 
 .search-input::placeholder {
     color: #e7e9f0;
-    font-size: x-large;
 }
 
 .search-input:focus {

src/components/SearchBox/SearchBox.css

@@ -7,7 +7,7 @@ const searchBox = ({ onInputChange }) => {
             <input
                 onChange={(event) => onInputChange(event.target.value)}
                 className="search-input"
-                placeholder="Search your Keywords here!" />
+                placeholder="Type Keywords Here" />
         </div>
     );
 };