Merge branch 'main' of https://github.com/raisfeld-ori/d_vault

src/pages/login/loading.tsx

@@ -1,7 +1,6 @@
 import './login.css';
 import { invoke } from '@tauri-apps/api';
 import { useState } from 'react';
-// import { useNavigate } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 import {useEffect} from "react";
 

src/pages/login/login.css

@@ -71,6 +71,7 @@
     border-radius: 50%;
     display: inline-block;
     overflow: hidden; 
+    margin-top: 10svh;
 }
 
 .dot img {
@@ -180,9 +181,8 @@
 }
 
 #melody {
-    font-weight: bold;
-    margin-top: 10svh;
-    color: #0f0000;
+    margin-top: 2svh;
+    color: #ffffff;
     font-size: 2svh;
 }
 
@@ -314,41 +314,88 @@
    }
 
 
-
-
-
-   @-webkit-keyframes rotating /* Safari and Chrome */ {
-    from {
-      -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
+/* ---------------------- loading screen ------------------------------ */
+
+.load
+{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+  width:150px;
+  height:150px;
+  background:transparent;
+  border:3px solid #323232;
+  border-radius:50%;
+  text-align:center;
+  line-height:150px;
+  font-family:sans-serif;
+  font-size:20px;
+  color:#00aaff;
+  letter-spacing:4px;
+  text-transform:uppercase;
+  text-shadow:0 0 10px #006aff;
+  box-shadow:0 0 20px rgba(50, 50, 50, 0.5);
+}
+.load:before
+{
+  content:'';
+  position:absolute;
+  top:-3px;
+  left:-3px;
+  width:100%;
+  height:100%;
+  border:3px solid transparent;
+  border-top:3px solid #0084ff;
+  border-right:3px solid #0084ff;
+  border-radius:50%;
+  animation:animateC 2s linear infinite;
+}
+.loadspan
+{
+  display:block;
+  position:absolute;
+  top:calc(50% - 2px);
+  left:50%;
+  width:50%;
+  height:4px;
+  background:transparent;
+  transform-origin:left;
+  animation:animate 2s linear infinite;
+}
+.loadspan:before
+{
+  content:'';
+  position:absolute;
+  width:10px;
+  height:10 px;
+  border-radius:50%;
+  background:#00b3ff;
+  top:-6px;
+  right:-8px;
+  box-shadow:0 0 20px #00bfff;
+}
+@keyframes animateC
+{
+  0%
+  {
+    transform:rotate(0deg);
   }
-  @keyframes rotating {
-    from {
-      -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
+  100%
+  {
+    transform:rotate(360deg);
   }
-  .rotating {
-    -webkit-animation: rotating 2s linear infinite;
-    -moz-animation: rotating 2s linear infinite;
-    -ms-animation: rotating 2s linear infinite;
-    -o-animation: rotating 2s linear infinite;
-    animation: rotating 2s linear infinite;
-  }
+}
+@keyframes animate
+{
+  0%
+  {
+    transform:rotate(45deg);
+  }
+  100%
+  {
+    transform:rotate(405deg);
+  }
+}
+
+

src/pages/login/login.tsx

@@ -2,7 +2,6 @@ import './login.css';
 import { useState } from 'react';
 import { invoke } from '@tauri-apps/api';
 import { useNavigate } from 'react-router-dom';
-import miku from '../../assets/Default_pfp.svg.png';
 
 
 
@@ -41,9 +40,6 @@ function login(){
 
                     <p id='plslogin'>Welcome back! <td></td> Please log to your account.</p>
 
-                <div className="dot">
-            <img src={miku} alt="Descriptive text" />
-                </div>
 
                     <div className="input-group">
                     <label className="label">Username</label>

src/pages/login/signup.tsx

@@ -1,7 +1,6 @@
 import './login.css';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import miku from '../../assets/Default_pfp.svg.png';
 
 
 function Login() {
@@ -22,9 +21,7 @@ function Login() {
             <div id='menu'>
                 <div id='form'>
                     <p id='plslogin'>Welcome!<td></td>Enter your credentials to Sign Up</p>
-                    <div className="dot">
-                        <img src={miku} alt="Descriptive text" />
-                    </div>
+
                     <div className="input-group">
                         <label className="label">Username</label>
                         <input onChange={e => setName(e.currentTarget.value)} autoComplete="off" name="info" id="info" className="input" placeholder='Enter your username' type="info" />