student profile css change

src/App.css

@@ -167,7 +167,6 @@ div .signup{
 }
 
 .canvasDiv{
-
   width:100%;
 }
 
@@ -229,10 +228,6 @@ li.list{
   text-align: center;
 }
 
-.modal{
-  /* border:none; */
-}
-
 
 /* ----------------------   NavBar.js  ---------------------- */
 .logo{
@@ -242,7 +237,6 @@ li.list{
 
 nav{
   box-shadow: 0 1px 1px 1px rgba(0,0,0,.2);
-  /* background-color: rgb(204, 220, 250); */
 }
 
 .modalTitle{
@@ -254,3 +248,43 @@ nav{
 .titleDiv{
   text-align: center;
 }
+
+
+/* ---------------------------------  StudentProfile.js    ---------------------------- */
+.std-profile {
+  text-align: center;
+  font-family: 'Mali', cursive;
+  font-weight: bold;
+  background-color: lightblue;
+  height: 100vh;
+}
+
+.profile-label{
+  margin: 5px;
+}
+
+.codeForm{
+  padding-top: 20%;
+}
+
+#img4{
+  background: url(../src/gif9.gif);
+  background-size: contain;
+  width: 200px;
+  height: 200px;
+  position: relative;
+  margin-top: 5%;
+  margin-left: 70%;
+}
+
+#snow {
+  background: url(../src/snow.gif);
+}
+
+@media only screen and (max-width: 1020px) {
+  #img4{
+    margin-top: 25%;
+    margin-left: 70%;
+  }
+
+}

src/components/studentProfile.js

@@ -6,15 +6,9 @@ import React, { Component } from 'react';
 export default class StudentProfile extends Component {
 
     state = {
-        lesson_id: null
+        lesson_id: ""
     }
 
-
-    componentDidMount(){
-
-    }
-
-
     handleSubmit = (event) => {
         event.preventDefault();
 
@@ -26,7 +20,7 @@ export default class StudentProfile extends Component {
                     "Accept": "application/json"
                 },
                 body: JSON.stringify({
-                    lesson_id: this.state.lesson_id
+                    lesson_id: parseInt(this.state.lesson_id)
                 })
             }).then(resp=>resp.json())
             .then(data=> {
@@ -40,24 +34,21 @@ export default class StudentProfile extends Component {
 
     handleChange = (event) => {
         this.setState({
-            lesson_id: parseInt(event.target.value)
+            lesson_id: event.target.value
         }) 
     }
 
     render() {
         return( 
             <div className="std-profile">
-               <form className="auth-form" onSubmit={this.handleSubmit}>
-                    <ul className="form-ul">
-                        <li>
-                            <label>Lesson Id</label>
-                            <input type="text" name="lesson_id" placeholder="lesson id" onChange={this.handleChange} value={this.state.name}/>
-                        </li>
-                        <li>
-                            <input type="submit" value="submit" className="submit-btn" />
-                        </li>
-                    </ul>
-                </form>
+                <div id="snow"> 
+                    <form className="codeForm" onSubmit={this.handleSubmit}>
+                        <label className="profile-label">Please type the secret code to join class</label>
+                        <input type="text" name="lesson_id" placeholder="Secret Code" onChange={this.handleChange} value={this.state.lesson_id}/>
+                        <button type="submit" value="submit" className="btn btn-primary">Join</button>
+                    </form>  
+                    <div id='img4'></div>
+                </div>
             </div>
         )