project is done

React/CodePen/src/App.css

@@ -1,3 +1,6 @@
+@import url(https://fonts.googleapis.com/css?family=Righteous);
+
+
 .App {
   font: 400 14px "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
   overflow-x: hidden;
@@ -9,11 +12,6 @@
 	border:1px solid black;	
 }
 
-.headerBlock2{
-	position: "relative";
-	left: 60%;
-	padding-top:10px;
-}
 
 .foot{
 	width: 100%;
@@ -30,4 +28,37 @@
 	text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;
 }
 
+#myStyle{
+  display: inline-block;
+  color: white;
+  background-color: blue;
+  font-family: 'Righteous', serif;
+  font-size: 2em; 
+  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
+}
+
+#myStyle:after {
+    content: attr(data-shadow);
+    position: absolute;
+    top: .06em; left: .06em;
+    z-index: -1;
+    text-shadow: none;
+    background-image:
+      linear-gradient(
+        45deg,
+        transparent 20%,
+        hsla(48,20%,90%,1) 45%,
+        hsla(48,20%,90%,1) 55%,
+        transparent 0
+        );
+    background-size: .05em .05em;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  
+    animation: shad-anim 15s linear infinite;
+}
 
+@keyframes shad-anim {
+  0% {background-position: 0 0}
+  0% {background-position: 100% -100%}
+  }

React/CodePen/src/actions/actionFindUser.js

@@ -1,8 +1,6 @@
 import { actionPromise } from "./actionPromise";
-import { userFind } from "./requests";
+import { userFind } 	 from "./requests";
 
 export const actionFindUser = () => async (dispatch, getState) => {
-    return await dispatch(
-      actionPromise("findUser", userFind(getState()?.auth?.payload?.sub?.id))
-    );
-  };
+    return await dispatch(actionPromise("findUser", userFind(getState()?.auth?.payload?.sub?.id)));
+};

React/CodePen/src/actions/actionFullAvatar.js

@@ -1,6 +1,6 @@
-import {actionUploadFile} from "./actionUploadFile";
-import {actionSetAvatar}  from "./actionSetAvatar";
-import {actionFindUser}   from "./actionFindUser";
+import { actionUploadFile } from "./actionUploadFile";
+import { actionSetAvatar }  from "./actionSetAvatar";
+import { actionFindUser }   from "./actionFindUser";
 
 export const actionFullAvatar = (file) => async (dispatch) => {
     let result = await dispatch(actionUploadFile(file));

React/CodePen/src/actions/actionFullLogin.js

@@ -1,17 +1,18 @@
-import {actionPromise} from "./actionPromise";
-import {log} from "./requests";
-import {actionAuthLogin} from "./actionAuthLogin";
-import {actionFindUser} from "./actionFindUser";
+import { actionPromise }   from "./actionPromise";
+import { log } 			   from "./requests";
+import { actionAuthLogin } from "./actionAuthLogin";
+import { actionFindUser }  from "./actionFindUser";
 
 export const actionFullLogin = (login, password) => async (dispatch) => {
-	  let result = await dispatch(actionPromise("login", log(login, password)));
-	  if (result?.data?.login !== null) {
-		  	console.log(result);
-		    dispatch(actionAuthLogin(result.data.login));
-	  } else {
-	    	alert("Такого пользователя не существует!");
-	  }
-	  await dispatch(actionFindUser());
+	let result = await dispatch(actionPromise("login", log(login, password)));
+	if (result?.data?.login !== null) {
+		//console.log(result);
+		dispatch(actionAuthLogin(result.data.login));
+	} else {
+	   	alert("Такого пользователя не существует!");
+	}
+	 
+	await dispatch(actionFindUser());
 };
 
 

React/CodePen/src/actions/actionFullRegister.js

@@ -1,11 +1,11 @@
-import { actionRegister } from "./actionRegister";
+import { actionRegister }  from "./actionRegister";
 import { actionFullLogin } from "./actionFullLogin";
 
 export const actionFullRegister = (login, password) => async (dispatch) => {
     let result = await dispatch(actionRegister(login, password));
     if (result?.data?.createUser !== null) {
-      await dispatch(actionFullLogin(login, password));
+      	await dispatch(actionFullLogin(login, password));
     } else {
-      alert("Такой пользователь уже есть!");
+      	alert("Такой пользователь уже есть!");
     }
-  };
+};

React/CodePen/src/actions/actionImgFind.js

@@ -1,3 +1,3 @@
 export const actionImgFind = () => async (dispatch) => {
     return await dispatch(actionPromise("img", imgFind()));
-  };
+};

React/CodePen/src/actions/actionPending.js

@@ -1 +1 @@
-export const actionPending = (name) => ({type: "PROMISE", status: "PENDING",name});
+export const actionPending = (name) => ({ type: "PROMISE", status: "PENDING", name });

React/CodePen/src/actions/actionPromise.js

@@ -1,14 +1,14 @@
-import { actionPending } from "./actionPending";
+import { actionPending }  from "./actionPending";
 import { actionResolved } from "./actionResolved";
 import { actionRejected } from "./actionRejected";
 
 export const actionPromise = (name, promise) => async (dispatch) => {
-  dispatch(actionPending(name));
-  try {
-    let payload = await promise;
-    dispatch(actionResolved(name, payload));
-    return payload;
-  } catch (error) {
-    dispatch(actionRejected(name, error));
-  }
+	dispatch(actionPending(name));
+	try {
+	   	let payload = await promise;
+	    dispatch(actionResolved(name, payload));
+	    return payload;
+	} catch (error) {
+	    dispatch(actionRejected(name, error));
+	}
 };

React/CodePen/src/actions/actionRegister.js

@@ -1,6 +1,6 @@
 import { actionPromise } from "./actionPromise";
-import { reg } from "./requests";
+import { reg } 			 from "./requests";
 
 export const actionRegister = (login, password) => async (dispatch) => {
     return await dispatch(actionPromise("register", reg(login, password)));
-  };
+};

React/CodePen/src/actions/actionRejected.js

@@ -3,4 +3,4 @@ export const actionRejected = (name, error) => ({
     status: "REJECTED",
     name,
     error,
-  });
+});

React/CodePen/src/actions/actionResolved.js

@@ -1 +1 @@
-export const actionResolved = (name, payload) => ({type: "PROMISE", status: "RESOLVED", name, payload});
+export const actionResolved = (name, payload) => ({ type: "PROMISE", status: "RESOLVED", name, payload });

React/CodePen/src/actions/actionSearch.js

@@ -1,7 +1,7 @@
-import {search} from "./requests";
-import {actionPromise} from "./actionPromise";
+import { search } 	     from "./requests";
+import { actionPromise } from "./actionPromise";
 
 export const actionSearch = (string) => async (dispatch) => {
-    return await dispatch(actionPromise('searchSnippet', search(string)))
+   	return await dispatch(actionPromise('searchSnippet', search(string)))
 }
 

React/CodePen/src/actions/actionSetAvatar.js

@@ -1,5 +1,5 @@
-import {actionPromise} from "./actionPromise";
-import {ava} from "./requests";
+import { actionPromise } from "./actionPromise";
+import { ava } 			 from "./requests";
 
 export const actionSetAvatar = (id) => async (dispatch, getState) => {
     return await dispatch(actionPromise("setAvatar", ava(getState()?.auth?.payload?.sub?.id, id)));

React/CodePen/src/actions/actionSnippetAdd.js

@@ -1,5 +1,5 @@
-import {actionPromise} from "./actionPromise";
-import {snippetAdd} from "./requests";
+import { actionPromise } from "./actionPromise";
+import { snippetAdd }    from "./requests";
 
 export const actionSnippetAdd = (title, description, files, idSnippet) => async (dispatch) => {
 	return await dispatch(actionPromise("addSnippet", snippetAdd(title, description, files, idSnippet)));

React/CodePen/src/actions/actionSnippetById.js

@@ -1,5 +1,5 @@
-import {actionPromise} from "./actionPromise";
-import {snippetById} from "./requests";
+import { actionPromise } from "./actionPromise";
+import { snippetById }   from "./requests";
 
 export const actionSnippetById = (id) => async (dispatch) => {
 	return await dispatch(actionPromise("findSnippetById", snippetById(id)));

React/CodePen/src/actions/actionSnippetFindByOwner.js

@@ -1,6 +1,6 @@
-import { actionPromise } from "./actionPromise";
+import { actionPromise }  from "./actionPromise";
 import { snippetByOwner } from "./requests";
 
 export const actionSnippetFindByOwner = (id) => async (dispatch) => {
     return await dispatch(actionPromise("findSnippet", snippetByOwner(id)));
-  };
+};

React/CodePen/src/actions/actionUploadFile.js

@@ -1,4 +1,4 @@
-import {actionPromise} from "./actionPromise";
+import { actionPromise } from "./actionPromise";
 
 export const actionUploadFile = (files) => async (dispatch) => {
     let formdata = new FormData();

React/CodePen/src/actions/gql.js

@@ -3,7 +3,6 @@ const getGQL = (url) =>
     fetch(url, {
       method: "POST",
       headers: {
-        //Accept: "application/json",
         "Content-Type": "application/json",
         ...(localStorage.authToken
           ? { Authorization: "Bearer " + localStorage.authToken }
@@ -12,6 +11,7 @@ const getGQL = (url) =>
       body: JSON.stringify({ query, variables }),
     }).then((res) => res.json());
 
+
 console.log(getGQL);
 
 export const gql = getGQL("/graphql");

React/CodePen/src/actions/requests.js

@@ -14,6 +14,7 @@ export const userFind = (_id) => {
     );
 };
 
+
 export const reg = async (login, password) => {
     let query = `mutation reg($l:String! , $p:String!) {
         createUser(login:$l,password:$p){
@@ -28,10 +29,11 @@ export const reg = async (login, password) => {
     return result;
 };
 
+
 export const log = async (login, password) => {
     let query = ` query log($l:String!,$p:String!) {
         login(login:$l,password:$p)
-      }`;
+    }`;
     let qVariables = {
       l: login,
       p: password
@@ -40,6 +42,7 @@ export const log = async (login, password) => {
     return result;
 };
 
+
 export const search = async (string) => {
     return gql(`query snippetFind($query:String){
         SnippetFind(query:$query){
@@ -60,6 +63,7 @@ export const search = async (string) => {
     );
 };
 
+
 export const snippetByOwner = async (id) => {
     let query = `query snippetFind($query:String){
         SnippetFind(query:$query){
@@ -78,6 +82,7 @@ export const snippetByOwner = async (id) => {
   return res;
 }
 
+
 export const imgFind = async () => {
     return await gql(`query fhbg{
       ImageFind(query:"[{}]"){
@@ -88,6 +93,7 @@ export const imgFind = async () => {
     }`);
 };
 
+
 export const ava = async (idUser, id) => {
     let query = `mutation setAvatar($idUser:String , $idAvatar:ID){ 
       UserUpsert(user:{_id: $idUser, avatar: {_id: $idAvatar}}){
@@ -104,6 +110,7 @@ export const ava = async (idUser, id) => {
     return res;
 };
 
+
 export const snippetAdd = async (title, description, files , idSnippet) => {
     let query = `mutation newSnippet($snippet:SnippetInput) {
       SnippetUpsert(snippet:$snippet){
@@ -122,6 +129,7 @@ export const snippetAdd = async (title, description, files , idSnippet) => {
     return res;
 };
 
+
 export const changePass = async (login, password, newPassword) => {
     let query = `mutation change($login:String!, $password:String!, $newPassword:String!){
                       changePassword(login: $login,
@@ -139,6 +147,7 @@ export const changePass = async (login, password, newPassword) => {
     return result;
 };
 
+
 export const snippetById = async(id) => {
     let query = `query snippetFind($query:String){
         SnippetFind(query:$query){

React/CodePen/src/components/ava.js

@@ -1,6 +1,6 @@
-import  React       from "react";
-import 	{connect} 	from "react-redux";
-import  icon        from "../icon.jpg";
+import  React        from "react";
+import 	{ connect }  from "react-redux";
+import  icon         from "../icon.jpg";
 
 function AvaLogo({link}) {
 	return (

React/CodePen/src/components/editor.js

@@ -1,5 +1,6 @@
-import Langs from "./select";
+import Langs     from "./select";
 import AceEditor from "react-ace";
+
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/mode-css";
 import "ace-builds/src-noconflict/mode-javascript";
@@ -18,34 +19,50 @@ import "ace-builds/src-noconflict/mode-elixir";
 import "ace-builds/src-noconflict/mode-typescript";
 import "ace-builds/src-noconflict/theme-monokai";
 import "ace-builds/src-noconflict/ext-language_tools";
-import"ace-builds/src-noconflict/snippets/javascript";
-import"ace-builds/src-noconflict/snippets/html";
-import"ace-builds/src-noconflict/snippets/css";
-import"ace-builds/src-noconflict/snippets/json";
-import"ace-builds/src-noconflict/worker-javascript";
-import"ace-builds/src-noconflict/worker-html";
-import"ace-builds/src-noconflict/worker-css";
+import "ace-builds/src-noconflict/snippets/javascript";
+import "ace-builds/src-noconflict/snippets/html";
+import "ace-builds/src-noconflict/snippets/css";
+import "ace-builds/src-noconflict/snippets/json";
+import "ace-builds/src-noconflict/worker-javascript";
+import "ace-builds/src-noconflict/worker-html";
+import "ace-builds/src-noconflict/worker-css";
 
 
 const Editor = ({data = {type: "html", text: "", name: ""}, onChange, onDelete}) => {
     return (
-        <div style={{display: "inline-block", width: "calc(95%/3)", marginBottom: "10px", marginTop: "40px", backgroundColor: "#FFE8DB", marginLeft:"1%", border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"}}>
-            <button type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>  
+        <div style={{display: "inline-block", width: "calc(95%/3)", 
+                     marginBottom: "10px", marginTop: "40px", 
+                     backgroundColor: "#FFE8DB", marginLeft:"1%", 
+                     border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"
+                    }}>
+            <button className="close mr-4 " 
+                    type="button" 
+                    aria-label="Close" 
+                    onClick={onDelete} 
+                    style={{fontSize:"40px", backgroundColor:"black"}}>  
                 <span className="text-danger" aria-hidden="true">
                     &times;
                 </span>
             </button>
-            <AceEditor className="editor" width="calc(100%)" height="300px" value={data.text} onChange={(text) => onChange({type: data.type, text, name: data.name })}
-                placeholder="Your Code" mode={data.type} theme="monokai" name="blah2" fontSize={13} showPrintMargin={true}
-                showGutter={true} highlightActiveLine={true} wrapEnabled={true} enableBasicAutocompletion={true} enableLiveAutocompletion={true} 
-                enableSnippets={true} showLineNumbers={true}/>
+            <AceEditor className="editor" width="calc(100%)" height="300px" value={data.text} 
+                       onChange={(text) => onChange({type: data.type, text, name: data.name })}
+                       placeholder="Your Code" mode={data.type} theme="monokai" name="blah2" 
+                       fontSize={13} showPrintMargin={true}
+                       showGutter={true} highlightActiveLine={true} wrapEnabled={true} 
+                       enableBasicAutocompletion={true} enableLiveAutocompletion={true} 
+                       enableSnippets={true} showLineNumbers={true}/>
             <br/> 
             <div className="input-group ml-4" style={{paddingBottom: "10px"}}>
                 <div className="input-group-prepend">
                     <span className="input-group-text" id="basic-addon1">Name of file</span>
                 </div>
-                <input type="text" className="form-control w-25" placeholder="Name of file" aria-label="Name of file"
-                    aria-describedby="basic-addon1" value={data.name} onChange={(e) => onChange({type: data.type, text: data.text, name: e.target.value })}/>
+                <input  className="form-control w-25" 
+                        type="text" 
+                        placeholder="Name of file" 
+                        aria-label="Name of file"
+                        aria-describedby="basic-addon1" 
+                        value={data.name} 
+                        onChange={(e) => onChange({type: data.type, text: data.text, name: e.target.value})}/>
                 <Langs onChange={(type)=> onChange({type, text: data.text, name: data.name})} value={data.type}/>{" "}
             </div>
         </div>

React/CodePen/src/components/footer.js

@@ -1,6 +1,6 @@
-import {useRef, useState} from "react";
-import {connect} from "react-redux";
-import {Redirect} from "react-router";
+import { useRef, useState } from "react";
+import { connect } 			from "react-redux";
+import { Redirect } 		from "react-router";
 
 const Footer = () => {
 	return(

React/CodePen/src/components/header.js

@@ -1,16 +1,16 @@
-import React from "react";
-import ConnectedNick from "./nickHeader";
-import ImgLogo from "./logo";
-import {connect} from "react-redux";
-import {useState} from "react";
-import {actionSearch} from "../actions/actionSearch";
+import  React 		     from "react";
+import  { useState }     from "react";
+import  { connect }      from "react-redux";
+import  ConnectedNick    from "./nickHeader";
+import  ImgLogo          from "./logo";
+import  { actionSearch } from "../actions/actionSearch";
 
 const Header = ({onSearch}) => {
 	const [request, setRequest] = useState('');
 	return (
 		<nav className="navbar navbar-expand-lg shadow-lg navbar-light bg-white ">
-			<ImgLogo props={{width:"40%"}} className="headerSubBlock1"/>
-			<ConnectedNick className="headerSubBlock2"/>
+			<ImgLogo props={{width: "40%"}} />
+			<ConnectedNick/>
 		</nav>
 	);
 };

React/CodePen/src/components/logo.js

@@ -1,12 +1,12 @@
 import React from "react";
-import logo from "../logo.png";
+import logo  from "../logo.png";
 
 function ImgLogo({props}) {
-  return (
-    <a href="/" style={{paddingTop: '100xp', marginLeft: "10px"}}>
-      	<img src={logo} alt="Logo" style={props}/>
-    </a>
-  );
+  	return (
+    	<a href="/" style={{paddingTop: '100xp', marginLeft: "10px"}}>
+      		<img src={logo} alt="Logo" style={props}/>
+    	</a>
+  	);
 }
 
 export default ImgLogo;

React/CodePen/src/components/nick.js

@@ -1,16 +1,16 @@
 import { connect } from "react-redux";
 
+
 const Nick = ({ nick }) => {
-  return (
-    <>
-      <div>
-        <p>{nick}</p>
-      </div>
-    </>
-  );
+  	return (
+    	<>
+      		<div>
+        		<p>{nick}</p>
+      		</div>
+    	</>
+  	);
 };
 
-const ConnectNickName = connect((state) => ({
-  nick: state?.auth?.payload?.sub?.login || 0,
-}))(Nick);
+const ConnectNickName = connect((state) => ({nick: state?.auth?.payload?.sub?.login || 0,}))(Nick);
+
 export default ConnectNickName;

React/CodePen/src/components/nickHeader.js

@@ -1,38 +1,31 @@
-import { connect } from "react-redux";
-import ConnectedAvaLogo from "./ava";
+import { connect }          from "react-redux";
+import { Redirect }         from "react-router";
+import { Link }             from "react-router-dom";
+import ConnectedAvaLogo     from "./ava";
 import { actionAuthLogout } from "../actions/actionAuthLogout";
-import { Redirect } from "react-router";
-import { Link } from "react-router-dom";
+
 
 const NickName = ({nick, onLogOut}) => {
-  return (
-    <>
-      <div className="container">
-        <div className="">
-           <div style={{width: "100%", paddingBottom: "20px"}}>
-                <span style={{color: "black", left:"50px"}}>Your nickname </span>
-                <a href="/cabinet" style={{textDecoration: "none", color: "dark"}}>
-                    {nick} &nbsp;&nbsp;
-                    <ConnectedAvaLogo px={"50px"} mrgn={"10px"} />
-                </a>
-                <button className="btn btn-danger btn-sm" onClick={() => onLogOut()}>
-                    Log out
-                </button>
-            </div>
-            
-            <div>
-                <Link to = "/search" style={{paddingLeft: "86.5%"}}> 
-                    <button className="btn btn-info btn-sm">Search</button> 
-                </Link>
+    return (
+        <>
+            <div className="container" style={{marginTop: '20px'}}>
+                <div className="row">
+                    <div style={{width: "100%", paddingBottom: "20px"}}>
+                        <span style={{color: "black", left:"50px"}}>Your nickname </span>
+                        <a href="/cabinet" style={{textDecoration: "none", color: "dark"}}>
+                            {nick} &nbsp;&nbsp;
+                            <ConnectedAvaLogo style={{width: "300px"}}/> &nbsp;&nbsp;
+                        </a>
+                        <button className="btn btn-danger btn-sm" onClick={() => onLogOut()}>
+                            Log out
+                        </button>
+                    </div>
+                </div>  
             </div>
-        </div>  
-      </div>
-    </>
-  );
+        </>
+    );
 };
 
-const ConnectedNick = connect(
-  (state) => ({ nick: state?.auth?.payload?.sub?.login , logedIn: state.auth.token}),
-  { onLogOut: actionAuthLogout }
-)(NickName);
+const ConnectedNick = connect((state) => ({nick: state?.auth?.payload?.sub?.login, logedIn: state.auth.token}),{onLogOut: actionAuthLogout})(NickName);
+
 export default ConnectedNick;

React/CodePen/src/components/privateRoute.js

@@ -1,10 +1,10 @@
-import React from "react"
-import { connect } from "react-redux"
-import { Redirect,Route } from "react-router"
+import React               from "react"
+import { connect }         from "react-redux"
+import { Redirect, Route } from "react-router"
 
 const PrivateRoute = ({component,roles,auth, ...originProps}) => {
     const PageWrapper = (pageProps) => {
-        const OriginalPage = component
+        const OriginalPage = component;
         if(roles.includes('unknown')){
             return <OriginalPage {...pageProps} />
         }
@@ -18,7 +18,7 @@ const PrivateRoute = ({component,roles,auth, ...originProps}) => {
         return <Redirect to='/login' />
     }
     return (
-      <Route component={PageWrapper} {...originProps} />
+        <Route component={PageWrapper} {...originProps} />
     )
 }
 

React/CodePen/src/components/profile.js

@@ -1,13 +1,13 @@
 import React from "react";
-import wall from "../profileWall.jpeg";
+import wall  from "../profileWall.jpeg";
 
 function ImgProfile({props}) {
-  return (
-    <a href="/">
-      {" "}
-      <img src={wall} alt="wall" style={{props}} />{" "}
-    </a>
-  );
+  	return (
+    	<a href="/">
+      		{" "}
+      		<img src={wall} alt="wall" style={{props}} />{" "}
+    	</a>
+  	);
 }
 
 export default ImgProfile;

React/CodePen/src/components/routes.js

@@ -17,37 +17,44 @@ import CUpload                                  from "../pages/upload";
 
 
 const LoginForm = ({onLogin}) =>{
-  const [login, setLogin] = useState(''); //braunvlad4
-  const [pass, setPass] = useState('');   //123
-  return( 
-    <div className='LoginForm'>
-      <input value={login} style={{backgroundColor: login.length>0 ? 'green' : 'red'}} 
-            placeholder='your login' onChange={e=>setLogin(e.target.value)} />
-      <input value={pass} style={{backgroundColor: pass.length>0 ? 'green' : 'red'}} 
-            placeholder='your pass' onChange={e=>setPass(e.target.value)} />
-      <button onClick={()=>onLogin(login,pass)} disabled={(login.length!==0 && pass.length!==0)?false:true }>Send</button>
-    </div>
-  )
+    const [login, setLogin] = useState(''); //braunvlad4
+    const [pass, setPass] = useState('');   //123
+    return( 
+        <div className='LoginForm'>
+            <input value={login} 
+                   style={{backgroundColor: login.length>0 ? 'green' : 'red'}} 
+                   placeholder='your login' 
+                   onChange={e=>setLogin(e.target.value)} />
+            <input value={pass} 
+                   style={{backgroundColor: pass.length>0 ? 'green' : 'red'}} 
+                   placeholder='your pass' 
+                   onChange={e=>setPass(e.target.value)} />
+            <button onClick={()=>onLogin(login,pass)} 
+                    disabled={(login.length!==0 && pass.length!==0)?false:true }>
+                Send
+            </button>
+        </div>
+    )
 }
 
-const Routes = ({ isAuth }) => {
-  return (
-    <div className="App">
-      <div className="contentDiv">
-          <Switch>
-              <ConnectedPrivateRoute  exact path = "/"       roles = {['user']}     component = {Home}           />
-              <ConnectedPrivateRoute  path = "/cabinet"      roles = {['user']}     component = {ConnectCabinet} />
-              <ConnectedPrivateRoute  path = "/search"       roles = {['user']}     component = {Search}         />
-              <ConnectedPrivateRoute  path = "/project/:id"  roles = {['user']}     component = {CProject}       />
-              <ConnectedPrivateRoute  path = "/changePass"   roles = {['user']}     component = {ChangePass}     />
-              <ConnectedPrivateRoute  path = "/upload"       roles = {['user']}     component = {CUpload}        />
-              <ConnectedPrivateRoute  path = "/projects"     roles = {['user']}     component = {CProjects}      />
-              <ConnectedPrivateRoute  path = "/login"        roles = {['unknown']}  component = {LogForm}        /> 
-              <ConnectedPrivateRoute  path = "/registration" roles = {['unknown']}  component = {RegForm}        />
-          </Switch>
-      </div>
-    </div>
-  );
+const Routes = ({isAuth}) => {
+    return (
+        <div className="App">
+            <div className="contentDiv">
+                <Switch>
+                    <ConnectedPrivateRoute  exact path = "/"       roles = {['user']}     component = {Home}           />
+                    <ConnectedPrivateRoute  path = "/cabinet"      roles = {['user']}     component = {ConnectCabinet} />
+                    <ConnectedPrivateRoute  path = "/search"       roles = {['user']}     component = {Search}         />
+                    <ConnectedPrivateRoute  path = "/project/:id"  roles = {['user']}     component = {CProject}       />
+                    <ConnectedPrivateRoute  path = "/changePass"   roles = {['user']}     component = {ChangePass}     />
+                    <ConnectedPrivateRoute  path = "/upload"       roles = {['user']}     component = {CUpload}        />
+                    <ConnectedPrivateRoute  path = "/projects"     roles = {['user']}     component = {CProjects}      />
+                    <ConnectedPrivateRoute  path = "/login"        roles = {['unknown']}  component = {LogForm}        /> 
+                    <ConnectedPrivateRoute  path = "/registration" roles = {['unknown']}  component = {RegForm}        />
+                </Switch>
+            </div>
+        </div>
+    );
 };
 
 export default Routes

React/CodePen/src/components/select.js

@@ -1,39 +1,38 @@
+
 let languages = {
-  html: "HTML",
-  css: "CSS",
-  javascript: "JavaScript",
-  java: "Java",
-  python: "Python",
-  xml: "XML",
-  ruby: "Ruby",
-  sass: "Sass",
-  markdown: "Markdown",
-  mysql: "MySql",
-  json: "JSON",
-  handlebars: "Handlebars",
-  golang: "Golang",
-  csharp: "C Sharp",
-  elixir: "Elixir",
-  typescript: "TypeScript",
+    html:       "HTML",
+    css:        "CSS",
+    javascript: "JavaScript",
+    java:       "Java",
+    python:     "Python",
+    xml:        "XML",
+    ruby:       "Ruby",
+    sass:       "Sass",
+    markdown:   "Markdown",
+    mysql:      "MySql",
+    json:       "JSON",
+    handlebars: "Handlebars",
+    golang:     "Golang",
+    csharp:     "C Sharp",
+    elixir:     "Elixir",
+    typescript: "TypeScript",
 };
 
-const SelectLang = ({ list = languages, onChange, value }) => {
-  return (
-    <>
-      <select
-        style={{ marginBottom: "10px", marginLeft: "15px" }}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="select"
-      >
-        {Object.entries(list).map(([value, text]) => (
-          <option value={value} key={value}>
-            {text}
-          </option>
-        ))}
-      </select>
-    </>
-  );
+const SelectLang = ({list = languages, onChange, value}) => {
+    return (
+        <>
+            <select className="select"
+                    style={{marginBottom: "10px", marginLeft: "15px"}}
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}>
+                {Object.entries(list).map(([value, text]) => (
+                    <option value={value} key={value}>
+                        {text}
+                    </option>
+                ))}
+            </select>
+        </>
+    );
 };
 
 export default SelectLang;

React/CodePen/src/components/snippet.js

@@ -1,11 +1,11 @@
-import {useRef, useState}   from "react";
-import React from 'react'
-import {connect}            from "react-redux";
-import {Redirect}           from "react-router";
-import {render}             from 'react-dom';
-import {useEffect}          from "react";
-import Editor               from "./editor";
-import {actionSnippetAdd}   from "../actions/actionSnippetAdd";
+import { useRef, useState }   from "react";
+import { useEffect }          from "react";
+import React                  from 'react'
+import { connect }            from "react-redux";
+import { Redirect }           from "react-router";
+import { render }             from 'react-dom';
+import Editor                 from "./editor";
+import { actionSnippetAdd }   from "../actions/actionSnippetAdd";
 
 import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
 
@@ -105,7 +105,7 @@ bluek.onclick = () => {
     const [srcDoc, setSrcDoc] = useState("");
 
     const html = files.filter((elem) => {
-       return elem?.type === "html";
+        return elem?.type === "html";
     })[0]?.text;
 
     const css = files.filter((elem) => {
@@ -126,41 +126,40 @@ bluek.onclick = () => {
                 </html>
             `);
         }, 250);
-
         return () => clearTimeout(timeout);
     }, [html, css, js]);
 
+
     const [click, setClick] = useState(false)
 
     const SortableItem = sortableElement(({value, index}) => {
     	return (
-
     			<span><ins>{value.name || "new edit "}</ins> &nbsp; </span> 
-    		)
-    	
-		
-	})
-
-	const SortableList = sortableContainer(({items})=>{
-		return(
-			<div>
-				{items?.map((value, index) => (
-						<SortableItem value={value} index={index} />
-					))
-				}
-			</div>
-		)
-	})
-
-	const onSortEnd = ({oldIndex, newIndex}) => {
-		let arr = arrayMove(files, oldIndex, newIndex);
-		setFiles(arr)
-	}
+    	)
+	  })
+
+  	const SortableList = sortableContainer(({items})=>{
+  		return(
+  			<div>
+  				{items?.map((value, index) => (
+  						<SortableItem value={value} index={index} />
+  					))
+  				}
+  			</div>
+  		)
+  	})
+
+  	const onSortEnd = ({oldIndex, newIndex}) => {
+  		let arr = arrayMove(files, oldIndex, newIndex);
+  		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"}}/>
+        <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"}}/>
 
         <br/>
         <div style={{marginTop:"20px", textAlign:'center'}}>
@@ -179,10 +178,14 @@ bluek.onclick = () => {
         <br />
         <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
           <div>
-              <button className="btn btn-primary" style={{}} onClick={()=>setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}} >
+              <button className="btn btn-primary"
+                      onClick={() => setFiles([...files, { type: "html" }])} 
+                      key={files} 
+                      style={{marginTop: "10px"}}>
                 Add editor
               </button>       
           </div>
+
           <div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
               <div className="input-group-prepend">
                 <span className="input-group-text" id="basic-addon1">
@@ -192,16 +195,22 @@ bluek.onclick = () => {
               <input value={title} onChange={(e) => setTitle(e.target.value)} type="text" className="form-control"
                 placeholder="Name of project" aria-label="Name of project" aria-describedby="basic-addon1"/>
           </div>
+
           <div className="input-group ml-auto mr-auto w-50">
               <div className="input-group-prepend">
                   <span className="input-group-text ">Description</span>
               </div>
-              <textarea value={description} onChange={(e) => setDescription(e.target.value)} className="form-control "
-                aria-label="With textarea" placeholder="Your description"></textarea> 
+              <textarea className="form-control" 
+                        value={description} 
+                        onChange={(e) => setDescription(e.target.value)} 
+                        aria-label="With textarea" 
+                        placeholder="Your description">
+              </textarea> 
           </div>
-          <button className="btn btn-success float-center mr-5 mb-5" onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
-                  Save project
-              </button>
+          <button className="btn btn-success float-center mr-5 mb-5" 
+                  onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
+              Save project
+          </button>
         </div>
     </div>
   );

React/CodePen/src/pages/cabinet.js

@@ -1,10 +1,11 @@
-import React from "react";
-import {connect} from "react-redux";
-import CNickName from "../components/nick";
-import ImgProfile from "../components/profile";
-import {actionAuthLogout} from "../actions/actionAuthLogout";
-import {Link} from "react-router-dom";
-import ConUpload from "./upload";
+import React                from "react";
+import { connect }          from "react-redux";
+import { Link }             from "react-router-dom";
+import CNickName            from "../components/nick";
+import ImgProfile           from "../components/profile";
+import { actionAuthLogout } from "../actions/actionAuthLogout";
+import ConUpload            from "./upload";
+
 
 const Cabinet = ({onLogOut}) => {
   return (
@@ -16,35 +17,48 @@ const Cabinet = ({onLogOut}) => {
       </Link>
       <br/>
       <br/>
-      <div className="container" >
-        <div className="card">
-          <div className="upper">
-            <div className="user text-center">
-              <div className="profile mt-3">
-                <ConUpload  />{" "}
-              </div>
+      <div className="container d-flex justify-content-center align-items-center mt-2 mb-2" style={{border: '1px olid black'}}>
+        <div className="card" style = {{boxShadow:'7px 5px 10px 2px rgba(34, 60, 80, 0.8)', width: "400px", height: '500px'}}>
+             <h4 id="myStyle"><CNickName/></h4>
+            
+            <div className="upper" style={{paddingBottom: "35px"}}>
+                <div className="user text-center">
+                    <div className="profile mt-3">
+                        <ConUpload/>
+                    </div>
+                </div>
             </div>
-          </div>
 
-          <div className="user text-center">
-            <h4><CNickName /></h4>
-            <a href="/projects">
-              <button type="button" className="btn btn-warning btn-sm">My Projects</button>
-            </a>
-            <div style={{marginTop:"5px"}}>
-              <a href="/">
-                <button className="btn btn-success btn-sm">Main Page</button>
-              </a>
+            <div className="user text-center mt-2" >
+                <a href="/projects" >
+                    <button type="button" className="btn btn-warning btn-sm">My Projects</button>
+                </a>
+                <div style={{marginTop:"10px"}}>
+                  <Link to="/search"> 
+                      <button className="btn btn-info btn-sm">Search</button> 
+                  </Link>
+                </div>
+                <div style={{marginTop:"10px"}}>
+                    <Link to= "/changePass">
+                      <button className="btn btn-info btn-sm">Change pass</button>
+                    </Link>
+                </div>
             </div>
-            <div style={{marginTop:"5px"}}>
-                <Link to= "/changePass">
-                  <button className="btn btn-info btn-sm">Change pass</button>
-                </Link>
+
+            <div className="d-flex justify-content-around" style={{marginTop: '70px'}}>
+                <a href="/">
+                    <button className="btn btn-success btn-sm">Main Page</button>
+                </a>
+                <button className="btn btn-danger btn-sm" 
+                        onClick={() => onLogOut()}>
+                    Log out
+                </button>
             </div>
-            <button onClick={() => onLogOut()} className="btn btn-danger btn-sm" style={{marginTop:"5px"}}>Log out</button>
-          </div>
+
+            <span className="text-center" style={{paddingTop: "13%"}}>⚠click on your avatar to change it⚠</span>
         </div>
       </div>
+      
     </>
   );
 };

React/CodePen/src/pages/changePass.js

@@ -1,13 +1,13 @@
-import {Link} from "react-router-dom";
-import {connect} from "react-redux";
-import {useState} from "react";
-import {actionChangePass} from "../actions/actionChangePassword";
+import { Link } 			from "react-router-dom";
+import { connect } 			from "react-redux";
+import { useState } 		from "react";
+import { actionChangePass } from "../actions/actionChangePassword";
 
 const ChangePass = ({onChangePass}) => {
 	const [log, setLog] 		= useState('')
 	const [pass, setPass] 		= useState('')
 	const [newPass, setNewPass] = useState('')
-	console.log(onChangePass);
+	//console.log(onChangePass);
 	return (
 		<>
 			<Link to="/">
@@ -18,28 +18,36 @@ const ChangePass = ({onChangePass}) => {
 	      	<br/>
 	      	<br/>
 	      	<div className="container">
-	      		<div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
+	      		<div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center', marginTop: "70px"}}>
 	      			<p>
-	      				<input value={log} placeholder='your login' onChange={(e)=>setLog(e.target.value)}
-	      					style={{borderColor: log.length > 0 ? 'green' : 'red'}}/>
+	      				<input className="form-control text-center" 
+	      					   value={log} 
+	      					   placeholder='your login' 
+	      					   onChange={(e) => setLog(e.target.value)}
+	      					   style={{borderColor: log.length > 0 ? 'green' : 'red'}}
+	      				/>
 	      			</p>
 	      			<p>
-	      				<input value={pass} placeholder='your old password' 
-	      					onChange={e=>setPass(e.target.value)}
-	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}} 
+	      				<input className="form-control text-center" 
+	      					   value={pass} 
+	      					   placeholder='your old password' 
+	      					   onChange={(e) => setPass(e.target.value)}
+	      					   style={{borderColor: pass.length > 0 ? 'green' : 'red'}} 
 	      				/>
 	      			</p>
 	      			<p>
-	      				<input placeholder='your new password' 
-	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}}
-		      				onChange={e=>{
-		      					setNewPass(e.target.value)
-		      				}} 
+	      				<input className="form-control col-md-6 text-center" 
+	      					   placeholder='your new password' 
+	      					   style={{borderColor: pass.length > 0 ? 'green' : 'red'}}
+		      				   onChange={(e) => {setNewPass(e.target.value)}} 
 		      			/>
 	      			</p>
 	      			<p>
-	      				<button onClick={()=>onChangePass(log, pass, newPass)} 
-	      					disabled={(log.length!==0 && pass.length!==0 && newPass!==0)?false:true}>Сменить пароль</button>
+	      				<button class="btn btn-success text-center" 
+	      						onClick={() => onChangePass(log, pass, newPass)} 
+	      						disabled={(log.length!==0 && pass.length!==0 && newPass!==0) ? false : true}>
+	      					Сменить пароль
+	      				</button>
 	      			</p>
 	      		</div>
 	      	</div>

React/CodePen/src/pages/homePage.js

@@ -1,19 +1,18 @@
-import  React      			from "react";
-import  Header     			from "../components/header";
-import  CSnippets  			from "../components/snippet";
-import  Footer     			from "../components/footer";
-import  {useRef, useState} 	from "react";
-import  {useEffect} 		from "react";
+import  React      						 from "react";
+import  { useRef, useState, useEffect }  from "react";
+import  Header     						 from "../components/header";
+import  CSnippets  						 from "../components/snippet";
+import  Footer     						 from "../components/footer";
+
 
 const Home = () => {
 	const [sec, setSec] = useState(2);
 
 	useEffect(() => {
 		if(sec === 0) return;
-		const interval = setInterval(()=>{
+		const interval = setInterval(() => {
  			setSec(sec=>sec-1)
-		},500)
-
+		},200)
 		return () => { 
         	clearInterval(interval)	
         }
@@ -29,10 +28,10 @@ const Home = () => {
     	</>
   	) : (
   		<div className="d-flex justify-content-center">
-                <div className="spinner-grow" style={{width: "10rem", height: "10rem", marginTop: "20%"}} role="status">
-                    <span className="sr-only">Loading...</span>
-            	</div>
-        	</div>
+            <div className="spinner-grow" style={{width: "10rem", height: "10rem", marginTop: "20%"}} role="status">
+                <span className="sr-only">Loading...</span>
+           	</div>
+        </div>
   	)
 };
 

React/CodePen/src/pages/login.js

@@ -1,10 +1,10 @@
-import { connect } from "react-redux";
-import { useState } from "react";
+import { connect } 		     from "react-redux";
+import { useState }        from "react";
 import { actionFullLogin } from "../actions/actionFullLogin";
-import { Redirect } from "react-router";
+import { Redirect }        from "react-router";
 
 const Log = ({ onLog, LogedIn }) => {
-    const [login, setLogin] = useState("");
+    const [login, setLogin]       = useState("");
     const [password, setPassword] = useState("");
     return LogedIn ? (
         <Redirect to ="/"/>
@@ -12,8 +12,8 @@ const Log = ({ onLog, LogedIn }) => {
       <>
           <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 className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" id="loginbox" style={{marginTop: "120px"}} >
+                  <div className="panel panel-info" style={{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>
 
                       <div className="panel-heading">
                           <div className="panel-title">Login</div>
@@ -23,10 +23,11 @@ const Log = ({ onLog, LogedIn }) => {
                           <form className="form-horizontal" id="loginform" role="form">
                               <div className="input-group" style={{"marginBottom": "25px"}} >
                                   <input className="form-control" 
-                                         type="text" name="username"
+                                         type="text" 
+                                         name="username"
                                          value={login} 
                                          placeholder="Login" 
-                                         onChange={ e =>{ console.log(e.target.value); setLogin(e.target.value) && <Redirect to ="/"/>}} 
+                                         onChange={(e) => { console.log(e.target.value); setLogin(e.target.value) && <Redirect to ="/"/>}} 
                                   />
                               </div>
 
@@ -46,7 +47,7 @@ const Log = ({ onLog, LogedIn }) => {
 
                               <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'}}>
+                                      <a href="#" id="btn-login" onClick={() => onLog(login, password)} style={{textDecoration: 'none', color: 'Black'}}>
                                           Log in
                                       </a>
                                   </div>
@@ -54,7 +55,7 @@ const Log = ({ onLog, LogedIn }) => {
                               <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>
+                                          <span>if you are not registered click here &rArr;</span>&nbsp; &nbsp;<a href="/registration">Registration</a>
                                       </div>
                                   </div>
                               </div>

React/CodePen/src/pages/project.js

@@ -1,11 +1,11 @@
-import {useEffect} 			    from "react";
-import {connect} 			      from "react-redux";
-import {actionSnippetById} 	from "../actions/actionSnippetById";
-import {useState} 			    from "react";
-import Editor 				      from "../components/editor";
-import {actionSnippetAdd} 	from "../actions/actionSnippetAdd";
-import {Link} 				      from "react-router-dom";
-import {Redirect} 			    from "react-router";
+import { useEffect } 			    from "react";
+import { useState }           from "react";
+import { connect } 			      from "react-redux";
+import { Redirect }           from "react-router";
+import { Link }               from "react-router-dom";
+import { actionSnippetById } 	from "../actions/actionSnippetById";
+import   Editor 				      from "../components/editor";
+import { actionSnippetAdd } 	from "../actions/actionSnippetAdd";
 import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
 
 
@@ -14,15 +14,15 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
       	getSnippet(id);
     }, []);
 
-    const [files, setFiles] = useState([]);
-    const [name, setName] = useState("");
-    const [title, setTitle] = useState("");
+    const [files, setFiles]             = useState([]);
+    const [name, setName]               = useState("");
+    const [title, setTitle]             = useState("");
     const [description, setDescription] = useState("");
 
     useEffect(() => {
-	    setFiles(filesArr);
-	    setTitle(titleText);
-	    setDescription(descriptionText);
+  	    setFiles(filesArr);
+  	    setTitle(titleText);
+  	    setDescription(descriptionText);
     }, [filesArr, titleText, descriptionText]);
 
     const [srcDoc, setSrcDoc] = useState("");
@@ -59,30 +59,25 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
   const SortableItem = sortableElement(({value, index}) => {
     console.log(value);
       return (
-          <span>{value.name || "new edit "}&nbsp; </span> 
+          <span>{value.name || "new edit"}&nbsp; </span> 
       )
   })
 
   const SortableList = sortableContainer(({items})=>{
-
-    console.log(items)
-  
-    return(
-      <div>
-        {items?.map((value, index) => (
-            <SortableItem value={value} index={index} />
-          ))
-        }
-      </div>
-    )
+      //console.log(items)
+      return(
+          <div>
+              {items?.map((value, index) => (
+                  <SortableItem value={value} index={index} />
+                ))
+              }
+          </div>
+      )
   })
-
   const onSortEnd = ({oldIndex, newIndex}) => {
-    let arr = arrayMove(filesArr, oldIndex, newIndex);
-    setFiles(arr)
+      let arr = arrayMove(filesArr, oldIndex, newIndex);
+      setFiles(arr)
   }
-
-
   return (
     <div>
         <Link to="/">
@@ -90,7 +85,7 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
                <span>&#8617;</span> Back to Main Page
             </button>
         </Link>
-        <Link to="/projects">
+        <Link to="/projects" style={{}}>
 	        <button className="float-right btn btn-outline-info border-info mt-2 mr-2">
 	            All projects
 	        </button>
@@ -102,7 +97,6 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
         	<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
                 style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>
 
-
           <div style={{marginTop:"20px", textAlign:'center'}}>
               <p onClick={()=>console.log(files)}><b>Click here </b><span>to reverse the snippets</span></p>
               <SortableList items={files} onSortEnd={onSortEnd} />

React/CodePen/src/pages/projects.js

@@ -1,64 +1,59 @@
-import {connect} from "react-redux";
-import {Link} from "react-router-dom";
+import { connect } from "react-redux";
+import { Link }    from "react-router-dom";
 
 
 const Projects = ({snippets}) => {
     return snippets ? (
         <div>
-              <Link to="/">
-                  <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+            <Link to="/">
+                <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
                     <span>&#8617;</span>Back to Main Page
-                  </button>
-              </Link>
-              <br/> 
-              <br/>
-              <div style={{alignItems: "center", textAlign: "center"}}>
-                  <Link to="/">
-                      <button className="btn btn-success">New project</button>
-                  </Link>
-              </div>
-
-              {snippets?.map((key, index) => (
-                  <div style={{textAlign: "center", alignItems: "center"}}>
-                      <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
-                          <div className="card-body" style={{textAlign: "center"}}>
-                              <h3 className="card-title mb-4 text-info">
-                                  {snippets?.[index]?.title || "Project without name"}
-                              </h3>
-                              <p className="card-text">
-                                  <span className="text-muted">Description</span>&nbsp;
-                                  {snippets?.[index]?.description || ""}
-                              </p>
-                              <Link to={"/project/" + snippets?.[index]?._id}>
-                                  <button className="btn btn-primary mt-3">Open project</button>
-                              </Link>
-                          </div>
-                      </div>
-                  </div>
-              ))}    
-               
-            </div>
-
-          ) : (
-
-            <div>
+                </button>
+            </Link>
+            <br/> 
+            <br/>
+            <div style={{alignItems: "center", textAlign: "center"}}>
                 <Link to="/">
-                    <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-                        <span>&#8617;</span>Back to Main Page
-                    </button>
+                    <button className="btn btn-success">New project</button>
                 </Link>
-                <br /> <br />
-                <div className="d-flex justify-content-center">
-                    <div className="spinner-border mt-3" style={{width: "10rem", height: "10rem"}} role="status">
-                        <span className="sr-only">Loading...</span>
+            </div>
+
+            {snippets?.map((key, index) => (
+                <div style={{textAlign: "center", alignItems: "center"}}>
+                    <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
+                        <div className="card-body" style={{textAlign: "center"}}>
+                            <h3 className="card-title mb-4 text-info">
+                                {snippets?.[index]?.title || "Project without name"}
+                            </h3>
+                            <p className="card-text">
+                                <span className="text-muted">Description</span>&nbsp;
+                                {snippets?.[index]?.description || ""}
+                            </p>
+                            <Link to={"/project/" + snippets?.[index]?._id}>
+                                <button className="btn btn-primary mt-3">Open project</button>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            ))}       
+        </div>
+    ) : (
+        <div>
+            <Link to="/">
+                <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+                    <span>&#8617;</span>Back to Main Page
+                </button>
+            </Link>
+            <br /> <br />
+            <div className="d-flex justify-content-center">
+                <div className="spinner-border mt-3" style={{width: "10rem", height: "10rem"}} role="status">
+                    <span className="sr-only">Loading...</span>
                     </div>
                 </div>
             </div>
-        );
-    };
+    );
+};
 
-const CProjects = connect((state) => ({
-    snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
-}))(Projects);
+const CProjects = connect((state) => ({snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,}))(Projects);
 
 export default CProjects;

React/CodePen/src/pages/reg.js

@@ -1,59 +1,73 @@
-import { connect } from "react-redux";
-import { useState } from "react";
+import { connect }            from "react-redux";
+import { useState }           from "react";
 import { actionFullRegister } from "../actions/actionFullRegister";
-import { Redirect } from "react-router";
+import { Redirect }           from "react-router";
 
 const Reg = ({ onReg, LogedIn }) => {
-    const [login, setLogin] = useState("");
+    const [login, setLogin]       = useState("");
     const [password, setPassword] = useState("");
     return (
       <>
         <div className="container">
-          <div id="loginbox" style={{ marginTop: "120px", border:"1px solid black"}}>
-            <div>
-              <div  style = {{backgroundColor:'pink'}}>
-                <div>Registration</div>
-              </div>
+            <div className='row'>
+                <div className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" id="loginbox" style={{marginTop: "120px"}}>
+                    <div className="panel panel-info" style={{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>
+                        <div className="panel-heading" style={{backgroundColor:'pink'}}>
+                            <div className="panel-title">Registration</div>
+                        </div>
 
-              <div style={{paddingTop: "30px"}} className="panel-body">
-                <form id="loginform" role="form">
-                  <div style={{marginBottom: "25px"}}>
-                    <input id="login-username" type="text" className="form-control" name="username"
-                      value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>
-                  </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"
+                                           id="login-username" 
+                                           type="text"  
+                                           name="username"
+                                           value={login} 
+                                           placeholder="Login"
+                                           onChange={(e) => setLogin(e.target.value)} 
+                                    />
+                                </div>
 
-                  <div style={{marginBottom: "25px"}}>
-                    <input id="login-password" type="password" className="form-control"
-                        name="password" placeholder="Password" value={password}
-                        onChange={(e) => setPassword(e.target.value)}/>
-                  </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 style={{marginTop: "10px"}} className="form-group">
-                    <div className="">
-                      <a id="btn-login" href="#" onClick={() => onReg(login, password)}>
-                        Зарегестрироваться
-                      </a>
-                    </div>
-                  </div>
+                                <div className="form-row text-center" style={{marginTop: "10px", paddingLeft: '35%'}}>
+                                    <div type="button" class="btn btn-success col-md-6">
+                                        <a href="#" id="btn-login" onClick={() => onReg(login, password)} style={{textDecoration: 'none', color: 'white'}}>
+                                            Register
+                                        </a>
+                                    </div>
+                                </div>
 
-                  <div className="form-group">
-                    <div className="">
-                      <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
-                        <a href="/login">Авторизоваться</a>
-                      </div>
+                                <div className="form-row text-center">
+                                    <div className=" col-md-12 control">
+                                        <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
+                                            <span>if you are registered click here &rArr;</span> &nbsp; &nbsp;<a href="/login" >Log in</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
                     </div>
-                  </div>
-                </form>
-              </div>
+                </div>
             </div>
-          </div>
         </div>
       </>
     );
 };
 
-const RegForm = connect((state) => ({ LogedIn: state?.auth?.token }), {
-  onReg: actionFullRegister,
-})(Reg);
+const RegForm = connect((state) => ({ LogedIn: state?.auth?.token }), {onReg: actionFullRegister,})(Reg);
 
 export default RegForm;

React/CodePen/src/pages/search.js

@@ -1,54 +1,58 @@
-import { Link } from "react-router-dom";
+import { Link }         from "react-router-dom";
 import { actionSearch } from "../actions/actionSearch";
-import { connect } from "react-redux";
-import { useState } from "react";
+import { connect }      from "react-redux";
+import { useState }     from "react";
+
 
 const Search = ({onSearch , snippets}) => {
     const [request, setRequest] = useState('');
-  return (
-    <>
-      <Link to="/">
-          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-              <span>&#8617;</span>Back to Main Page
-          </button>
-      </Link>
-        <br/>
-        <br/>
-        <div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
-        <input value={request} onChange={(e) => setRequest(e.target.value)} className="form-control d-inline-block w-50 mt-2"
-        type="search" placeholder="Name of project" aria-label="Search"
-        />
-      <br/>
-      <button
-        className="btn btn-outline-success border-success mt-4 mb-4" onClick = {() => onSearch(request)}
-      >
-        Search
-      </button>
-    </div>
-
-  {snippets?.map((key, index) => (
-    <div style={{ textAlign: "center", alignItems: "center" }}>
-      <div className="card w-50 ml-auto mr-auto mt-3 mb-5">
-        <div className="card-body" style={{ textAlign: "center" }}>
-          <h3 className="card-title mb-4 text-info">
-            {snippets?.[index]?.title || "Project without name"}
-          </h3>
-          <p className="card-text">
-            <span className="text-muted">Description</span>&nbsp;
-            {snippets?.[index]?.description || ""}
-          </p>
-          <p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
-          <Link to={"/project/" + snippets?.[index]?._id}>
-            <button className="btn btn-primary mt-3">Open project</button>
+    return (
+      <>
+          <Link to="/">
+              <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+                  <span>&#8617;</span>Back to Main Page
+              </button>
           </Link>
-        </div>
-      </div>
-    </div>
-  ))}
-</>
-  )
+          <br/>
+          <br/>
+          <div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
+              <input className="form-control d-inline-block w-50 mt-2"
+                     value={request} 
+                     onChange={(e) => setRequest(e.target.value)} 
+                     type="search" 
+                     placeholder="Name of project" 
+                     aria-label="Search"
+              />
+              <br/>
+              <button className="btn btn-outline-success border-success mt-4 mb-4" 
+                      onClick={() => onSearch(request)}>
+                  Search
+              </button>
+          </div>
+
+          {snippets?.map((key, index) => (
+            <div style={{ textAlign: "center", alignItems: "center" }}>
+              <div className="card w-50 ml-auto mr-auto mt-3 mb-5">
+                <div className="card-body" style={{ textAlign: "center" }}>
+                  <h3 className="card-title mb-4 text-info">
+                      {snippets?.[index]?.title || "Project without name"}
+                  </h3>
+                  <p className="card-text">
+                      <span className="text-muted">Description</span>&nbsp;
+                      {snippets?.[index]?.description || ""}
+                  </p>
+                  <p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
+                  <Link to={"/project/" + snippets?.[index]?._id}>
+                      <button className="btn btn-primary mt-3">Open project</button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+      </>
+    )
 };
 
-const CSearch = connect(state => ({snippets:state?.promise?.searchSnippet?.payload?.data?.SnippetFind}) , {onSearch:actionSearch})(Search)
+const CSearch = connect(state => ({snippets: state?.promise?.searchSnippet?.payload?.data?.SnippetFind}), {onSearch:actionSearch})(Search)
 
 export default CSearch;

React/CodePen/src/pages/upload.js

@@ -8,7 +8,7 @@ import ConnectedAvaLogo   from '../components/ava';
 
 const Upload = ({onUpload}) => {
 	const {acceptedFiles, getRootProps, getInputProps}  = useDropzone();
-	let files 											= acceptedFiles.map(file => onUpload(file))
+	let   files 										= acceptedFiles.map(file => onUpload(file))
 	return (
 	    <div {...getRootProps({className: 'dropzone'})} style={{display:'inline'}}>
 	       	<input {...getInputProps()} />
@@ -17,6 +17,6 @@ const Upload = ({onUpload}) => {
 	);
 }
 
-const ConUpload = connect(null , {onUpload:actionFullAvatar})(Upload)
+const ConUpload = connect(null, {onUpload:actionFullAvatar})(Upload)
 
 export default ConUpload;

React/CodePen/src/reducers/authReducer.js

@@ -1,3 +1,4 @@
+
 const jwtDecode = token => {
     try {
         let arrToken = token.split('.')

React/CodePen/src/reducers/promiseReducer.js

@@ -1,13 +1,14 @@
+
 function promiseReducer(state, { type, name, status, payload, error }) {
-  if (!state) {
-    return {}; //{status , payload , error}
-  }
-  if (type === "PROMISE") {
-    return {
-      ...state,
-      [name]: { status, payload, error },
-    };
-  }
-  return state;
+    if (!state) {
+        return {}; //{status , payload , error}
+    }
+    if (type === "PROMISE") {
+        return {
+            ...state,
+            [name]: { status, payload, error },
+        };
+    }
+    return state;
 }
 export default promiseReducer;

React/CodePen/src/reducers/store.js

@@ -1,9 +1,10 @@
-import {createStore, combineReducers, applyMiddleware}      from "redux";
-import thunk                                                from "redux-thunk";
-import promiseReducer       								from "./promiseReducer";
-import authReducer 											from "./authReducer";
-import {actionFindUser} 									from "../actions/actionFindUser";
-import {actionSnippetFindByOwner} 							from "../actions/actionSnippetFindByOwner";
+import {createStore, combineReducers, applyMiddleware}  from "redux";
+import thunk                                            from "redux-thunk";
+import promiseReducer       							from "./promiseReducer";
+import authReducer 										from "./authReducer";
+import {actionFindUser} 								from "../actions/actionFindUser";
+import {actionSnippetFindByOwner} 						from "../actions/actionSnippetFindByOwner";
+
 
 export const store = createStore(
 	combineReducers({promise: promiseReducer,auth: authReducer}),