Project Done

projectreact/src/App.css

@@ -16,36 +16,4 @@
   margin: auto;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-.form-elegant .font-small {
-  font-size: 0.8rem;
-}
-
-.form-elegant .z-depth-1a {
-  -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26),
-    0 4px 12px 0 rgba(121, 155, 254, 0.25);
-  box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26),
-    0 4px 12px 0 rgba(121, 155, 254, 0.25);
-}
 
-.form-elegant .z-depth-1-half,
-.form-elegant .btn:hover {
-  -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28),
-    0 4px 15px 0 rgba(36, 133, 255, 0.15);
-  box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28),
-    0 4px 15px 0 rgba(36, 133, 255, 0.15);
-}

projectreact/src/App.js

@@ -3,13 +3,11 @@ import "./App.css";
 import { Provider } from "react-redux";
 import Routes from "./components/routes";
 import { store } from "./reducers/store";
-import CTester from "./components/tester";
 
 function App() {
   return (
     <>
       <Provider store={store}>
-        {/* <CTester/> */}
         <Routes />
       </Provider>
     </>

projectreact/src/components/editor.js

@@ -18,6 +18,13 @@ 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"
 
 const Editor = ({
   data = { type: "html", text: "", name: "" },
@@ -69,7 +76,7 @@ const Editor = ({
       </button>
       <AceEditor
         className="editor"
-        width="480px"
+        width="calc(100%)"
         height="300px"
         value={data.text}
         onChange={(text) =>
@@ -79,7 +86,7 @@ const Editor = ({
         mode={data.type}
         theme="monokai"
         name="blah2"
-        fontSize={14}
+        fontSize={13}
         showPrintMargin={true}
         showGutter={true}
         highlightActiveLine={true}

projectreact/src/components/tester.js

@@ -1,8 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-
-const Tester = (props) => <pre>{JSON.stringify(props, null, 4)}</pre>;
-
-const CTester = connect((state) => state?.promise?.searchSnippet?.payload?.data?.SnippetFind)(Tester);
-
-export default CTester;

projectreact/src/pages/cabinet.js

@@ -9,8 +9,8 @@ import { actionAuthLogout } from "../actions/actionAuthLogout";
 const Cabinet = ({ onLogOut }) => {
   return (
     <>
-      <div className="container d-flex justify-content-center align-items-center mt-5 mb-5">
-        <div className="card">
+      <div className="container d-flex justify-content-center align-items-center mt-5 mb-5" >
+        <div className="card" style = {{boxShadow:'7px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
           <div className="upper">
             {" "}
             <ImgProfile px={"300px"} />{" "}
@@ -26,7 +26,7 @@ const Cabinet = ({ onLogOut }) => {
               <ConnectNickName />
             </h4>
             <a href="/projects">
-              <button type="button" className="btn btn-outline-success">
+              <button type="button" className="btn btn-outline-success border-success">
                 My Projects
               </button>
             </a>

projectreact/src/pages/login.js

@@ -10,15 +10,15 @@ const Log = ({ onLog, LogedIn }) => {
     <Redirect to ="/"/>
   ) : (
     <>
-      <div className="container">
+      <div className="container" >
         <div
           id="loginbox"
-          style={{ "margin-top": "50px" }}
+          style={{ marginTop: "120px"}}
           className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"
         >
-          <div className="panel panel-info">
+          <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">Sign In</div>
+              <div className="panel-title">Login</div>
             </div>
 
             <div style={{ "padding-top": "30px" }} className="panel-body">
@@ -74,7 +74,7 @@ const Log = ({ onLog, LogedIn }) => {
                         onLog(login, password)
                       }
                     >
-                      Login{" "}
+                      Sign In
                     </a>
                   </div>
                 </div>

projectreact/src/pages/projects.js

@@ -17,7 +17,7 @@ const Projects = ({ snippets }) => {
       </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 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"}

projectreact/src/pages/reg.js

@@ -16,12 +16,12 @@ const Reg = ({ onReg, LogedIn }) => {
       <div className="container">
         <div
           id="loginbox"
-          style={{ "margin-top": "50px" }}
+          style={{ marginTop: "120px" }}
           className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"
         >
-          <div className="panel panel-info">
-            <div className="panel-heading">
-              <div className="panel-title">Registration</div>
+          <div className="panel panel-info" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>
+            <div className="panel-heading" style = {{backgroundColor:'#ADD8E6' }}>
+              <div className="panel-title" >Registration</div>
             </div>
 
             <div style={{ "padding-top": "30px" }} className="panel-body">

projectreact/src/pages/search.js

@@ -33,7 +33,7 @@ const Search = ({onSearch , snippets}) => {
 
   {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 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"}