dividing main components in our app and log in page #13

FACG4 · Jul 25, 2018 · 8a5ffe7 · 8a5ffe7
1 parent 245e546
commit 8a5ffe7
Show file tree

Hide file tree

Showing 21 changed files with 61 additions and 81 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -5,39 +5,21 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
+
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+
     <title>React App</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+
   </body>
 </html>
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -2,10 +2,8 @@ import React, {
   Component
 } from 'react';
 
-
-
-import Login from './login/Login.jsx';
-import Flight from './flights/Flight.jsx';
+import Login from './pages/login/Login.jsx';
+import Flight from './pages/flights/Flight.jsx';
 import './App.css';
 
 class App extends Component {
@@ -17,7 +15,7 @@ class App extends Component {
   }
 
   render() {
-           return (<Flight />);
+           return (<Login/>);
 
   }
 }

diff --git a/client/src/button/Button.jsx → client/src/components/button/Button.jsx b/client/src/button/Button.jsx → client/src/components/button/Button.jsx
@@ -1,7 +1,7 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './button.css'
 
 

diff --git a/client/src/button/button.css → client/src/components/button/button.css b/client/src/button/button.css → client/src/components/button/button.css
diff --git a/client/src/header/Header.jsx → client/src/components/header/Header.jsx b/client/src/header/Header.jsx → client/src/components/header/Header.jsx
@@ -1,7 +1,7 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './header.css'
 
 

diff --git a/client/src/header/header.css → client/src/components/header/header.css b/client/src/header/header.css → client/src/components/header/header.css
diff --git a/client/src/header/plane.png → client/src/components/header/plane.png b/client/src/header/plane.png → client/src/components/header/plane.png
diff --git a/client/src/input/Input.jsx → client/src/components/input/Input.jsx b/client/src/input/Input.jsx → client/src/components/input/Input.jsx
@@ -1,7 +1,7 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './input.css';
 
   class Input extends Component {
@@ -16,9 +16,8 @@ import React, {
         } = this.props;
         console.log(this.props)
       return (
-          <div>
-           <input className={className}   placeholder={placeholder}/>
-         </div>
+           <input className={className} placeholder={placeholder}/>
+
       );
     }
 

diff --git a/client/src/input/input.css → client/src/components/input/input.css b/client/src/input/input.css → client/src/components/input/input.css
@@ -1,6 +1,7 @@
 
   .container input{
     background-color: #91ADF6;
-    border-color: #91ADF6;
+    /* border-color: #91ADF6; */
     padding: 5px;
+    display: inline;
 }
diff --git a/client/src/sidenav/Sidenav.jsx → client/src/components/sidenav/Sidenav.jsx b/client/src/sidenav/Sidenav.jsx → client/src/components/sidenav/Sidenav.jsx
@@ -1,7 +1,7 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './sidenav.css'
 
   class Sidenav extends Component {

diff --git a/client/src/sidenav/add.jpeg → client/src/components/sidenav/add.jpeg b/client/src/sidenav/add.jpeg → client/src/components/sidenav/add.jpeg
diff --git a/client/src/sidenav/sidenav.css → client/src/components/sidenav/sidenav.css b/client/src/sidenav/sidenav.css → client/src/components/sidenav/sidenav.css
diff --git a/client/src/sidenav/table.png → client/src/components/sidenav/table.png b/client/src/sidenav/table.png → client/src/components/sidenav/table.png
diff --git a/client/src/table/Table.jsx → client/src/components/table/Table.jsx b/client/src/table/Table.jsx → client/src/components/table/Table.jsx
@@ -1,7 +1,7 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './table.css';
 
 

diff --git a/client/src/table/table.css → client/src/components/table/table.css b/client/src/table/table.css → client/src/components/table/table.css
diff --git a/client/src/index.js b/client/src/index.js
@@ -2,5 +2,4 @@ import React from 'react' ;
 import ReactDOM from 'react-dom' ;
 import App from './App.jsx' ;
 
-
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/client/src/flights/Flight.jsx → client/src/pages/flights/Flight.jsx b/client/src/flights/Flight.jsx → client/src/pages/flights/Flight.jsx
@@ -1,13 +1,13 @@
 import React, {
     Component
   } from 'react';
-  import '../App.css';
+  import '../../App.css';
   import './flight.css';
 
 
-  import Header from '../header/Header.jsx';
-import Sidenav from '../sidenav/Sidenav.jsx';
-import Table from '../table/Table.jsx'
+  import Header from '../../components/header/Header.jsx';
+import Sidenav from '../../components/sidenav/Sidenav.jsx';
+import Table from '../../components/table/Table.jsx'
 
 
   class Flight extends Component {

diff --git a/client/src/flights/flight.css → client/src/pages/flights/flight.css b/client/src/flights/flight.css → client/src/pages/flights/flight.css
diff --git a/client/src/login/Login.jsx → client/src/pages/login/Login.jsx b/client/src/login/Login.jsx → client/src/pages/login/Login.jsx
@@ -2,10 +2,9 @@ import React, {
   Component
 } from 'react';
 import './login.css';
-import '../App.css';
-import '../input/Input.jsx'
-import Input from '../input/Input.jsx';
-import Button from '../button/Button.jsx';
+import '../../App.css';
+import Input from '../../components/input/Input.jsx';
+import Button from '../../components/button/Button.jsx';
 
 
 
@@ -27,22 +26,18 @@ class Login extends Component {
         <div className="inputs-group">
 
 
-        <div className="user">
-        <div className="usericon">
-            <span className="fas fa-user-tie"></span>
-        </div>
-          <div className="userinput">
+        {/* <div className="user">
+        <div className="usericon"> */}
+            <label class="start_date">
             <Input className="uname" placeholder='Username' />
-          </div>
-
-        </div>
+            </label>
+          {/* </div>
+        </div> */}
 
         <Input className='password' placeholder='Password'  />
         </div>
         <Button  textvalue="Login"/>
 
-
-
 </div>
 
     );

diff --git a/client/src/login/login.css → client/src/pages/login/login.css b/client/src/login/login.css → client/src/pages/login/login.css
@@ -1,33 +1,35 @@
 body {
   background-color: #EEEEEE;
 }
-.container{
+
+.container {
   text-align: center;
   background-color: white;
   width: 50%;
   margin: auto;
   height: 600px;
-  margin-top:35px;
-
+  margin-top: 35px;
 }
 
-.container h1{
-  margin-top:-43px;
+.container h1 {
+  margin-top: -43px;
 }
+
 .container .plane {
   width: 300px;
-  }
-  .container .inputs-group{
-    margin-top:60px;
-
-  }
-  .container input ,
-  .container button
-  {
-    width:250px;
-  }
-  .container button{
-    /* background-color:  #404040;
+}
+
+.container .inputs-group {
+  margin-top: 60px;
+}
+
+.container input,
+.container button {
+  width: 250px;
+}
+
+.container button {
+  /* background-color:  #404040;
     border: none;
     color:#91ADF6;
     font-weight: bold;
@@ -37,22 +39,26 @@ body {
     font-size: 16px;
     cursor: pointer;
     border-radius: 12px; */
-    height: 40px;
-  }
-  .container input{
-    height: 30px;
-  margin-bottom: 20px;
+  height: 40px;
 }
 
+.container input {
+  height: 30px;
+  margin-bottom: 20px;
+}
 
 .userinput,
 .usericon {
-    display: inline;
+  background-color: #91ADF6;
+  border-color: #91ADF6;
+  padding: 5px;
+  height: 44px;
 }
+
 .user {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .user>div {
-  display: inline-block;
+  display: inline;
 }
diff --git a/client/src/login/plane.png → client/src/pages/login/plane.png b/client/src/login/plane.png → client/src/pages/login/plane.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,5 +2,4 @@ import React from 'react' ;
		import ReactDOM from 'react-dom' ;
		import App from './App.jsx' ;


		ReactDOM.render(<App />, document.getElementById('root'));