src/index.css

@@ -2,8 +2,11 @@
   --background_dark: #242424;
   --text_dark: rgba(255, 255, 255, 0.87);
 
-  --buttons-main-color: #63001e;
+  --links-main-color: #cc3f69;
-  --buttons-press-color: #ff3e78;
+
+  --buttons-main-color: #a80032;
+  --buttons-hover-color: #92002c;
+  --buttons-press-color: #63001e;
 
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -23,7 +26,7 @@ body {
   margin: 0;
   padding: 0;
   width: 100vw;
-  max-width: 100%;
   height: 100vh;
+  max-width: 100%;
   max-height: 100%;
 }

src/pages/login/login.css

@@ -6,6 +6,7 @@
   justify-content: space-between;
 }
 
+
 .login-right {
   display: flex;
   height: 100%;
@@ -26,9 +27,61 @@
 }
 
 
-.login-block {
+.login-logo-block {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-bottom: auto;
+  outline: solid 1px khaki;
+}
+
+.login-login-block {
+  display: flex;
+  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-button {
+  margin-top: "10px";
+  padding: 16px 32px;
+  font-size: 16px;
+  border-radius: 12px;
+  background-color: var(--buttons-main-color);
+  color: var(--text_dark);
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+}
+
+.login-button:hover {
+  background-color: var(--buttons-hover-color);
+  color: var(--text_dark);
+}
+
+.login-button:active {
+  background-color: var(--buttons-press-color);
+  color: var(--text_dark);
+}
+
+
+.login-link {
+  color: var(--links-main-color);
+  text-decoration: none;
 }

src/pages/login/login.tsx

@@ -48,7 +48,11 @@ const Login = () => {
         </video>
       </div>
       <div className="login-right">
-        <div className="login-block">
+        <h2 className="login-logo-block">
+          I'm logo!!
+        </h2>
+        {/* <img className="login-logo-block" src="./myautag.png" alt="logo" /> */}
+        <div className="login-login-block">
           <h2>
             Login
           </h2>
@@ -79,16 +83,22 @@ const Login = () => {
               showError={passwordEmpty}
               errorMessage="Please enter your password"
               />
-            <button type="submit"
+            <button type="submit" className="login-button">
-              style={{
-                display: "flex",
-                marginTop: "10px"
-              }}
-            >
               Login
             </button>
           </form>
         </div>
+        <div className="login-links-block">
+          <h2>
+            <a href="https://git.frik.su/Beesquit/picrinth-admin" className="login-link">Frontend</a>
+          </h2>
+          <h2>
+            <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>
+          </h2>
+        </div>
       </div>
     </div>
   );