src/index.css

@@ -3,6 +3,7 @@
   --text_dark: rgba(255, 255, 255, 0.87);
 
   --links-main-color: #cc3f69;
+  --links-hover-color: #ab3659;
 
   --buttons-main-color: #a80032;
   --buttons-hover-color: #92002c;

src/pages/login/login.css

@@ -7,16 +7,6 @@
 }
 
 
-.login-right {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: auto;
-  margin-right: 5vw;
-  margin-left: 5vw;
-}
-
 .login-left {
   overflow: hidden;
   display: flex;
@@ -26,14 +16,22 @@
   margin-right: auto;
 }
 
+.login-right {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: 5vw;
+  margin-left: 5vw;
+  justify-content: inherit;
+}
+
 
 .login-logo-block {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: auto;
-  outline: solid 1px khaki;
 }
 
 .login-login-block {
@@ -41,22 +39,24 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  outline: solid 1px aquamarine;
 }
 
-
 .login-links-block {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
-  margin-top: auto;
   margin-bottom: 2vh;
-  outline: solid 1px olive;
   font-size: xx-small;
 }
 
 
+.login-logo {
+  width: 200px;
+  height: 200px;
+}
+
+
 .login-button {
   margin-top: "10px";
   padding: 16px 32px;
@@ -85,3 +85,8 @@
   color: var(--links-main-color);
   text-decoration: none;
 }
+
+.login-link:hover {
+  color: var(--links-hover-color);
+  text-decoration: none;
+}

src/pages/login/login.tsx

@@ -24,9 +24,10 @@ const Login = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
+    setUsernameEmpty(!username);
+    setPasswordEmpty(!password);
+
     if (!username || !password) {
-      if (!username) setUsernameEmpty(true);
-      if (!password) setPasswordEmpty(true);
       return;
     }
 
@@ -49,13 +50,9 @@ const Login = () => {
       </div>
       <div className="login-right">
         <h2 className="login-logo-block">
-          I'm logo!!
+          <img className="login-logo" src="./myautag.png" alt="Picrinth logo" />
         </h2>
-        {/* <img className="login-logo-block" src="./myautag.png" alt="logo" /> */}
         <div className="login-login-block">
-          <h2>
-            Login
-          </h2>
           <form onSubmit={handleSubmit}
             style={{
               flexDirection: "column",
@@ -73,7 +70,7 @@ const Login = () => {
               required
               showError={usernameEmpty}
               errorMessage="Please enter your username"
-              />
+            />
             <FormField
               type="password"
               placeholder="Password"
@@ -82,11 +79,14 @@ const Login = () => {
               required
               showError={passwordEmpty}
               errorMessage="Please enter your password"
-              />
+            />
             <button type="submit" className="login-button">
               Login
             </button>
           </form>
+          <h2 style={{textAlign: "center"}}>
+            <a href="http://localhost:5173/register" className="login-link">Create account</a>
+          </h2>
         </div>
         <div className="login-links-block">
           <h2>
@@ -96,7 +96,7 @@ const Login = () => {
             <a href="https://git.frik.su/Beesquit/picrinth-server" className="login-link">Backend</a>
           </h2>
           <h2>
-            <a href="https://git.frik.su/Beesquit" className="login-link">Creator profile</a>
+            <a href="https://git.frik.su/Beesquit" className="login-link">Author</a>
           </h2>
         </div>
       </div>