начало стилизации страниц сайта

React/CodePen/src/components/snippet.js

@@ -9,52 +9,6 @@ import {actionSnippetAdd}   from "../actions/actionSnippetAdd";
 
 import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
 
-const List = () => {
-	const [listData, setListData] = useState([
-		{name:"French1", position: 0, id:0},
-		{name:"French2", position: 0, id:1},
-		{name:"French3", position: 0, id:2},
-		{name:"French4", position: 0, id:3},
-		{name:"French5", position: 0, id:4},
-		{name:"French6", position: 0, id:5}
-	]);
-
-	const SortableItem = sortableElement(({value, index}) => (
-		<div>
-			<div>{value.name}</div>
-		</div>
-	))
-
-	const SortableList = sortableContainer(({items})=>{
-		return(
-			<div>
-				{items
-					.sort((a,b) => a.position - b.position)
-					.map((value, index) => (
-						<SortableItem value={value} index={index} key={value.id} />
-					))
-				}
-			</div>
-		)
-	})
-
-	const onSortEnd = ({oldIndex, newIndex}) => {
-		let arr = arrayMove(listData, oldIndex, newIndex);
-		for(let i=0; i<arr.length; i++){
-			arr[i].position = i;
-		}
-		setListData(arr)
-	}
-
-	const listTitle = <div><b>list items</b></div>
-
-	return(
-		<>
-			<SortableList items={listData} onSortEnd={onSortEnd} axis='xy' />
-		</>
-	)
-}
-
 ///---------------------------------------------------------=------------------
 /*
 const SortableItem = sortableElement(({value}) => <li>{value}</li>);
@@ -203,13 +157,8 @@ bluek.onclick = () => {
 		setFiles(arr)
 	}
 
-
   return (
     <div>
-
-     
-
-
         <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
                 height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
 

React/CodePen/src/pages/homePage.js

@@ -12,7 +12,7 @@ const Home = () => {
 		if(sec === 0) return;
 		const interval = setInterval(()=>{
  			setSec(sec=>sec-1)
-		},1000)
+		},500)
 
 		return () => { 
         	clearInterval(interval)	

React/CodePen/src/pages/login.js

@@ -4,67 +4,68 @@ import { actionFullLogin } from "../actions/actionFullLogin";
 import { Redirect } from "react-router";
 
 const Log = ({ onLog, LogedIn }) => {
-  const [login, setLogin] = useState("");
-  const [password, setPassword] = useState("");
-  return LogedIn ? (
-    <Redirect to ="/"/>
-  ) : (
-    <>
-      <div className="container" >
-        <div id="loginbox" style={{marginTop: "120px", border:"1px solid black"}} className="">
-          <div >
-            <div>
-              <div style={{backgroundColor:'pink'}}>Авторизация</div>
-            </div>
+    const [login, setLogin] = useState("");
+    const [password, setPassword] = useState("");
+    return LogedIn ? (
+        <Redirect to ="/"/>
+    ) : (
+      <>
+          <div className="container" >
+            <div className='row'>
+              <div id="loginbox" style={{marginTop: "120px"}} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
+                  <div className="panel panel-info" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>
 
-            <div style={{paddingTop: "30px"}}>
-              <div style={{display: "none"}}></div>
+                      <div className="panel-heading">
+                          <div className="panel-title">Login</div>
+                      </div>
 
-              <form id="loginform" className="form-horizontal" role="form">
-                <div style={{ "marginBottom": "25px" }} className="input-group">
-                  <span className="">
-                    <i className=""></i>
-                  </span>
-                  <input id="login-username" type="text" className="form-control" 
-                      name="username" value={login} placeholder="Login"
-                      onChange={ e =>{
-                          console.log(e.target.value)
-                          setLogin(e.target.value) && <Redirect to ="/"/>
-                        } 
-                      } 
-                  />
-                </div>
-                <div style={{marginBottom: "25px"}} className="input-group">
-                  <span className="">
-                      <i className=""></i>
-                  </span>
-                  <input id="login-password" type="password" className="form-control"
-                      name="password" placeholder="Password" value={password}
-                      onChange={(e) => setPassword(e.target.value)}/>
-                </div>
-                <div style={{ marginTop: "10px" }} className="form-group">
-                  <div className="">
-                    <a id="btn-login" href="#" onClick={() => onLog(login, password)}>
-                      Войти
-                    </a>
-                  </div>
-                </div>
-                <div className="form-group">
-                  <div>
-                    <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
-                      <a href="/registration">Зарегестрироваться</a>
-                    </div>
+                      <div className="input-group" style={{paddingTop: "30px"}}>
+                          <form className="form-horizontal" id="loginform" role="form">
+                              <div className="input-group" style={{"marginBottom": "25px"}} >
+                                  <input className="form-control" 
+                                         type="text" name="username"
+                                         value={login} 
+                                         placeholder="Login" 
+                                         onChange={ e =>{ console.log(e.target.value); setLogin(e.target.value) && <Redirect to ="/"/>}} 
+                                  />
+                              </div>
+
+                              <div className="input-group" style={{marginBottom: "25px"}} >
+                                  <span className="input-group-addon">
+                                    <i className="glyphicon glyphicon-lock"></i>
+                                  </span>
+                                  <input className="form-control" 
+                                         id="login-password" 
+                                         type="password" 
+                                         name="password" 
+                                         placeholder="Password" 
+                                         value={password}
+                                         onChange={(e) => setPassword(e.target.value)}
+                                  />
+                              </div>
+
+                              <div className="form-row text-center" style={{marginTop: "10px", paddingLeft: '35%'}}>
+                                  <div type="button" class="btn btn-success col-md-6">
+                                      <a id="btn-login" href="#" onClick={() => onLog(login, password)} style={{textDecoration: 'none', color: 'Black'}}>
+                                          Log in
+                                      </a>
+                                  </div>
+                              </div>
+                              <div className="form-row text-center">
+                                  <div className=" col-md-12 control">
+                                      <div style={{"border-top": "1px solid#888","padding-top": "15px","font-size": "85%"}}>
+                                          <a href="/registration">Registration</a>
+                                      </div>
+                                  </div>
+                              </div>
+                          </form>
+                      </div>
                   </div>
-                </div>
-              </form>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </>
-  );
+      </>
+    );
 };
 
-export const LogForm = connect((state) => ({ LogedIn: state?.auth?.token }), {
-  onLog: actionFullLogin,
-})(Log);
+export const LogForm = connect((state) => ({ LogedIn: state?.auth?.token }), {onLog: actionFullLogin})(Log);