Style a little bit player input. References #5

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "giphy-api": "^2.0.1",
+    "node-sass": "^4.14.1",
     "random-words": "^1.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/App.js

@@ -3,7 +3,7 @@ import GiphyApi from "giphy-api";
 import randomWords from "random-words";
 import GifList from "./components/gif_list";
 import PlayerInput from "./components/player_input";
-import "./App.css";
+import "./assets/stylesheets/App.scss";
 
 const giphy = GiphyApi("fafiKafsEJZchqyTLli0XAt4PQkz3Sk9");
 

src/assets/stylesheets/App.scss

@@ -0,0 +1,36 @@
+.App {
+  text-align: center;
+  padding: 100px 0 0;
+
+  .interaction {
+    // border: 1px solid brown;
+    display: flex;
+    height: 100px;
+    justify-content: center;
+    align-items: center;
+
+    .input-field {
+      border: none;
+      height: 70px;
+      font-size: 25px;
+      border-radius: 5px 0 0 5px;
+      -webkit-appearance: none;
+      background: none;
+      outline: 0;
+      padding: 0;
+      text-align: left;
+      padding-left: 20px;
+      background-color: rgb(230, 230, 230);
+      color: rgb(66, 66, 66);
+    }
+    .input-submit {
+      height: 70px;
+      padding: 0 20px;
+      font-size: 25px;
+      border: none;
+      border-radius: 0 5px 5px 0;
+      color: rgb(230, 230, 230);
+      background-color: rgb(66, 66, 66);
+    }
+  }
+}

src/components/player_input.jsx

@@ -20,14 +20,15 @@ class PlayerInput extends React.Component {
   render() {
     const { playerAnswer } = this.state;
     return (
-      <form onSubmit={this.handleSubmit}>
+      <form className="interaction" onSubmit={this.handleSubmit}>
         <input
           type="text"
+          className="input-field"
           placeholder="Your guess"
           value={playerAnswer}
           onChange={this.handleChange}
         />
-        <input type="submit" value="Play" />
+        <input className="input-submit" type="submit" value="Play" />
       </form>
     );
   }

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./assets/stylesheets/index.scss";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change