Small style changes and env fun

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Other
+.env

package-lock.json

@@ -3144,14 +3144,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
+      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
+        "fdir": "^6.5.0",
-        "picomatch": "^4.0.2"
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -3161,11 +3161,14 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.6",
+      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -3307,18 +3310,18 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.0",
+      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
-      "integrity": "sha512-3jdAy3NhBJYsa/lCFcnRfbK4kNkO/bhijFCnv5ByUQk/eekYagoV2yQSISUrhpV+5JiY5hmwOh7jNnQ68dFMuQ==",
+      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.6",
+        "fdir": "^6.5.0",
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
         "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.14"
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -3382,11 +3385,14 @@
       }
     },
     "node_modules/vite/node_modules/fdir": {
-      "version": "6.4.6",
+      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },

src/App.tsx

@@ -76,7 +76,7 @@ function App() {
         newestOnTop={false}
         closeOnClick={false}
         rtl={false}
-        theme={systemDark ? "light" : "dark"}
+        theme={systemDark ? "dark" : "light"}
       />
       <Router>
         <Routes>

src/pages/home/home.tsx

@@ -25,6 +25,7 @@ const Home = () => {
             </li>
           </ul>
         </nav>
+        <h2>Test var: {import.meta.env.VITE_TEST}</h2>
       </div>
     </div>
   )

src/pages/login/login.css

@@ -72,9 +72,10 @@
 
 
 .login-button {
-  margin-top: "10px";
+  margin-top: 10px;
   padding: 16px 32px;
   font-size: 16px;
+  width: 100%;
   border-radius: 12px;
   background-color: var(--buttons-main-color);
   color: var(--text_dark);
@@ -104,3 +105,12 @@
   color: var(--links-hover-color);
   text-decoration: none;
 }
+
+
+.separator {
+  color: var(--links-hover-color);
+  font-size: medium;
+  font-family: sans-serif;
+  margin-left: 4;
+  margin-right: 4;
+}

src/pages/login/login.tsx

@@ -79,6 +79,12 @@ const Login = () => {
               required
               showError={usernameEmpty}
               errorMessage="Please enter your username"
+    //           icon=<svg xmlns="http://www.w3.org/2000/svg" class="min-icon" fill="currentcolor" viewBox="0 0 256 256"><g><path d="M128.1,144c39.2,0.1,71.1-31.4,71.4-70.6c0-39.4-32-71.4-71.4-71.4s-71.4,32-71.4,71.4
+		// C57,112.6,89,144.1,128.1,144"></path><path d="M214.6,197.3c-10.8-13.9-24.9-25-41-32.2c-7.3-3.3-14.9-5.9-22.7-7.6
+		// c-7.7-1.7-15.5-2.6-23.4-2.6c-1.6,0-3.2,0-4.7,0.1h-0.5c-3.9,0.2-7.7,0.6-11.5,1.2c-27.1,4.3-51.6,18.7-68.6,40.2
+		// c-0.6,0.8-1.2,1.6-1.8,2.4l0,0c-7.8,11-8.9,25.4-2.8,37.3c1.4,2.7,3.2,5.2,5.3,7.5c2.1,2.2,4.5,4.1,7.1,5.6
+		// c2.6,1.5,5.4,2.7,8.4,3.5c3.1,0.8,6.2,1.2,9.4,1.2h120.6c3.2,0,6.4-0.4,9.5-1.2c2.9-0.8,5.8-2,8.4-3.5c2.6-1.5,5-3.5,7-5.7
+		// c2.1-2.3,3.9-4.8,5.3-7.6C224.7,223.4,223.2,208.4,214.6,197.3"></path></g></svg>
             />
             <FormField
               type="password"
@@ -101,9 +107,15 @@ const Login = () => {
           <h2>
             <a href="https://git.frik.su/Beesquit/picrinth-admin" className="login-link">Frontend</a>
           </h2>
+          <span className="separator">
+            |
+          </span>
           <h2>
             <a href="https://git.frik.su/Beesquit/picrinth-server" className="login-link">Backend</a>
           </h2>
+          <span className="separator">
+            |
+          </span>
           <h2>
             <a href="https://git.frik.su/Beesquit" className="login-link">Author</a>
           </h2>