Changed pages names and distribution

Author: FranP-code

src/App.css

@@ -24,10 +24,10 @@ header * h2, header header h2 {
 }
 
 a {
-  color: #2c87ff;
+  color: rgb(44, 135, 255);
 }
 a::visited {
-  color: #2c87ff;
+  color: rgb(44, 135, 255);
 }
 
 .title-one::-moz-selection, .title-two::-moz-selection, #rotatory-text-element::-moz-selection {

src/App.css.map

@@ -1,11 +1,11 @@
 import './App.css';
-import PageOne from './components/Pages/PageOne';
-import PageTwo from './components/Pages/PageTwo';
-import PageTwoAndHalf from './components/Pages/PageTwoAndHalf';
-import PageThree from './components/Pages/PageThree/PageThree';
-import PageFour from './components/Pages/PageFour/PageFour';
-import PageFive from './components/Pages/PageFive/PageFive';
-import PageSix from './components/Pages/PageSix/PageSix';
+import MainPage from './Pages/Welcome/MainPage/MainPage';
+import DescriptionPage from './Pages/Welcome/DescriptionPage/DescriptionPage';
+import GoToUserPage from './Pages/Welcome/GoToUserPage/GoToUserPage';
+import RegisterUserPage from './Pages/CreateAccount/RegisterUserPage/RegisterUserPage';
+import UserProfile from './Pages/User/UserProfile/UserProfile';
+import CreatePost from './Pages/User/CreatePost/CreatePost';
+import ViewPost from './Pages/User/ViewPost/ViewPost';
 
 import React from 'react'
 import {
@@ -22,21 +22,21 @@ function App() {
       <Router>
         <Switch>
           <Route path="/create-account">
-            <PageThree />
+            <RegisterUserPage />
           </Route>
           <Route path="/:username/post/:postId">
-            <PageSix />
+            <ViewPost />
           </Route>
           <Route path="/:username/write/:postId?">
-            <PageFive />
+            <CreatePost />
           </Route>
           <Route path="/:username">
-            <PageFour />
+            <UserProfile />
           </Route>
           <Route path="/">
-            <PageOne />
-            <PageTwo />
-            <PageTwoAndHalf />
+            <MainPage />
+            <DescriptionPage />
+            <GoToUserPage />
           </Route>
         </Switch>
       </Router>

src/App.jsx

@@ -0,0 +1,64 @@
+#register-user-page .flex-container {
+  display: flex;
+  margin-top: 5vh;
+}
+#register-user-page .flex-container .link-preview {
+  margin-left: 10vw;
+}
+#register-user-page .flex-container .link-preview .username {
+  background: linear-gradient(133deg, rgb(63, 94, 251) 0%, rgb(185, 49, 49) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+#register-user-page .flex-container .link-preview .username::-moz-selection {
+  background: none;
+  background: #ffe83d;
+  color: #000;
+  -webkit-background-clip: border-box;
+  -webkit-text-fill-color: initial;
+}
+#register-user-page .flex-container .link-preview .username::selection {
+  background: none;
+  background: #ffe83d;
+  color: #000;
+  -webkit-background-clip: border-box;
+  -webkit-text-fill-color: initial;
+}
+#register-user-page .flex-container .account-form form {
+  display: flex;
+  flex-direction: column;
+}
+#register-user-page .flex-container .account-form form input {
+  height: 5vh;
+  margin-bottom: 1vh;
+  outline: none;
+  border: none;
+  border-bottom: 1px solid #000;
+  font-size: 2.3vh;
+}
+#register-user-page .flex-container .account-form form Button {
+  margin-top: 3vh;
+}
+@media (max-width: 900px) {
+  #register-user-page header .additional-text {
+    position: absolute;
+    top: -20%;
+  }
+  #register-user-page .flex-container {
+    flex-direction: column;
+  }
+  #register-user-page .flex-container .account-form, #register-user-page .flex-container .account-form form {
+    width: 94vw !important;
+  }
+  #register-user-page .flex-container .link-preview {
+    margin-left: 0;
+    margin-top: 8vh;
+  }
+  #register-user-page .flex-container .link-preview .title-two {
+    margin-top: 2.5vh;
+    font-size: 18pt;
+    display: flex;
+    flex-direction: column;
+    word-break: break-all;
+  }
+}/*# sourceMappingURL=RegisterUserPage.css.map */

src/components/Pages/PageThree/Firebase Querys/checkUsername.js renamed to src/Pages/CreateAccount/RegisterUserPage/Firebase Querys/checkUsername.js

@@ -1,17 +1,17 @@
 import React, { useRef, useState } from 'react'
-import './PageThree.css'
-import AccountForm from '../../AccountForm/AccountForm'
-import LinkPreview from '../../LinkPreview/LinkPreview'
-import MainHeader from '../../MainHeader/MainHeader'
 import { useSnackbar } from 'notistack';
+import {withRouter} from 'react-router'
+
+import './RegisterUserPage.css'
 
+import AccountForm from '../../../components/AccountForm/AccountForm'
+import LinkPreview from '../../../components/LinkPreview/LinkPreview'
+import MainHeader from '../../../components/MainHeader/MainHeader'
 import checkUsername from './Firebase Querys/checkUsername'
 import createUser from './Firebase Querys/createUser'
 import createUserDocumentOnFirestore from './Firebase Querys/createUserDocumentOnFirestore'
 
-import {withRouter} from 'react-router'
-
-const PageThree = (props) => {
+const RegisterUserPage = (props) => {
 
     const [displayUsername, setDisplayUsername] = useState('username')
     const [username, setUsername] = useState('username')
@@ -56,6 +56,8 @@ const PageThree = (props) => {
         const email = emailValue.current.value
         const password = passwordValue.current.value
 
+        setUsername(username.trim())
+
         if (username === '' || username === 'username') {
 
             enqueueSnackbar("Please, write a username.", {
@@ -152,8 +154,8 @@ const PageThree = (props) => {
     }
 
     return (
-        <div className='page' id='page-three'>
-            <MainHeader additionalText={"Create Account"}/>
+        <div className='page' id='register-user-page'>
+            <MainHeader additionalText={"Create Account"} link={"../"}/>
             <div className='flex-container'>
                 <AccountForm action={'register'}
 
@@ -172,4 +174,4 @@ const PageThree = (props) => {
     )
 }
 
-export default withRouter(PageThree)
+export default withRouter(RegisterUserPage)

src/components/Pages/PageThree/Firebase Querys/createUser.js renamed to src/Pages/CreateAccount/RegisterUserPage/Firebase Querys/createUser.js

@@ -1,5 +1,4 @@
-#page-three {
-
+#register-user-page {
     .flex-container {
 
         display: flex;

src/components/Pages/PageThree/Firebase Querys/createUserDocumentOnFirestore.js renamed to src/Pages/CreateAccount/RegisterUserPage/Firebase Querys/createUserDocumentOnFirestore.js

@@ -1,17 +1,17 @@
-.page {
+#user-create-post {
   display: flex;
   flex-direction: column;
   height: auto;
 }
-.page .title-container {
+#user-create-post .title-container {
   width: 94vw;
   display: flex;
   align-items: center;
   padding-top: 2vh;
   padding-bottom: 1vh;
   border-bottom: 3px solid #000;
 }
-.page .title-container .title-input {
+#user-create-post .title-container .title-input {
   width: 100%;
   font-weight: bold;
   overflow-wrap: break-word;
@@ -20,30 +20,30 @@
   border: none;
   outline: none;
 }
-.page .title-container .title-input::-moz-placeholder {
+#user-create-post .title-container .title-input::-moz-placeholder {
   color: #afafaf;
 }
-.page .title-container .title-input:-ms-input-placeholder {
+#user-create-post .title-container .title-input:-ms-input-placeholder {
   color: #afafaf;
 }
-.page .title-container .title-input::placeholder {
+#user-create-post .title-container .title-input::placeholder {
   color: #afafaf;
 }
-.page .w-md-editor {
+#user-create-post .w-md-editor {
   height: 45vh !important;
   margin-top: 3vh;
   padding-top: 5vh;
 }
-.page .w-md-editor .w-md-editor-content {
+#user-create-post .w-md-editor .w-md-editor-content {
   height: 89% !important;
 }
-.page .guide-pragraph {
+#user-create-post .guide-pragraph {
   margin-top: 1vh;
 }
-.page .guide-pragraph a {
-  color: #2c87ff;
+#user-create-post .guide-pragraph a {
+  color: rgb(44, 135, 255);
 }
-.page .submit {
+#user-create-post .submit {
   margin: 5vh 0px;
   align-self: center;
 }
@@ -81,4 +81,4 @@
   .page .submit {
     width: 35vw !important;
   }
-}/*# sourceMappingURL=PageFive.css.map */
+}/*# sourceMappingURL=CreatePost.css.map */

src/Pages/CreateAccount/RegisterUserPage/RegisterUserPage.css

@@ -1,20 +1,24 @@
 import React, { useRef, useState } from 'react'
-import "./PageFive.css"
 import MDEditor from '@uiw/react-md-editor';
+import moment from 'moment';
 import {withRouter} from 'react-router'
 import {useParams} from 'react-router-dom'
-import ButtonComponent from '../../ButtonComponent/ButtonComponent'
-import { getAuth, onAuthStateChanged } from "firebase/auth";
-import checkUsernameExistance from './Firebase Querys/checkUsernameExistance';
-import Loading from '../../Loading/Loading';
 import { useSnackbar } from 'notistack';
-import moment from 'moment';
+
+import "./CreatePost.css"
+
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+
+import ButtonComponent from '../../../components/ButtonComponent/ButtonComponent'
+import Loading from '../../../components/Loading/Loading';
+import GoBackArrow from '../../../components/GoBackArrow/GoBackArrow';
+
 import addPostToDatabase from './Firebase Querys/addPostToDatabase';
-import GoBackArrow from '../../GoBackArrow/GoBackArrow';
+import checkUsernameExistance from './Firebase Querys/checkUsernameExistance';
 import editPostOnDatabase from './Firebase Querys/editPostOnDatabase'
 import getPost from './Firebase Querys/getPost'
 
-const PageFive = ({history}) => {
+const CreatePost = ({history}) => {
 
     const readingTime = require('reading-time/lib/reading-time');
 
@@ -32,7 +36,7 @@ const PageFive = ({history}) => {
 
     React.useEffect(() => {
 
-        async function pageFiveHandler() {
+        async function createPostHandler() {
 
             const data = await checkUsernameExistance(username)
             const auth = getAuth()
@@ -56,7 +60,7 @@ const PageFive = ({history}) => {
             setLoading(false)
         } 
 
-        pageFiveHandler()
+        createPostHandler()
     }, [])
 
     async function submitFunction() {
@@ -185,7 +189,7 @@ const PageFive = ({history}) => {
             }
             {
                 userLoged ? 
-                    <div className="page">
+                    <div className="page" id="user-create-post">
                         <div className="animate_animated animate__fadeIn title-container">
                             <GoBackArrow onClickFunction={() => history.push(`/${username}`)}/>
                             <input type="text" onChange={(e) => setTitle(e.target.value)} value={title} className='title-input title-one' placeholder='Title'/>
@@ -211,4 +215,4 @@ const PageFive = ({history}) => {
     )
 }
 
-export default withRouter(PageFive)
+export default withRouter(CreatePost)

src/Pages/CreateAccount/RegisterUserPage/RegisterUserPage.css.map

@@ -1,4 +1,4 @@
-.page {
+#user-create-post {
 
     display: flex;
     flex-direction: column;

src/components/Pages/PageThree/PageThree.jsx renamed to src/Pages/CreateAccount/RegisterUserPage/RegisterUserPage.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import { collection, getDoc, getFirestore, limit, query, where, doc } from "firebase/firestore"
-import { firebase } from '../../../firebase'
+import {getDoc, getFirestore, doc } from "firebase/firestore"
+import { firebase } from '../../../../../firebase'
 
 const getUsernameByUid = async (uid) => {
 

src/components/Pages/PageThree/PageThree.scss renamed to src/Pages/CreateAccount/RegisterUserPage/RegisterUserPage.scss

@@ -1,7 +1,9 @@
-import { getAuth, signInWithEmailAndPassword, getAdditionalUserInfo } from 'firebase/auth';
-import { useSnackbar } from 'notistack';
 import React from 'react'
-import ButtonComponent from '../ButtonComponent/ButtonComponent';
+import { getAuth, signInWithEmailAndPassword} from 'firebase/auth';
+import { useSnackbar } from 'notistack';
+
+import ButtonComponent from '../../../../components/ButtonComponent/ButtonComponent';
+
 import getUsernameByUid from './Firebase Querys/getUsernameByUid';
 
 const LoginForm = ({username, loginFormHidden, emailInput, passwordInput, alternateLoginForm}) => {

src/components/Pages/NoDataPage/NoDataPage.jsx renamed to src/Pages/NoDataPage/NoDataPage.jsx

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from 'react'
 import styled from 'styled-components'
-import ButtonComponent from '../ButtonComponent/ButtonComponent'
 import {withRouter} from 'react-router'
-import { useSnackbar } from 'notistack'
-import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'
+
+import ButtonComponent from '../../../../components/ButtonComponent/ButtonComponent'
 import LoginForm from './LoginForm'
 
 const UserHeader = ({displayUsername, signedIn, history, username}) => {

src/components/Pages/PageFive/PageFive.css renamed to src/Pages/User/CreatePost/CreatePost.css

@@ -1,8 +1,8 @@
 import React from 'react'
 import moment from 'moment'
-import TitleTwo from '../Titles/TitleTwo'
 import { withRouter } from 'react-router'
-import TitleThree from '../Titles/TitleThree'
+
+import TitleThree from '../../../../components/Titles/TitleThree'
 
 const Article = ({post, history, username}) => {