Ignore:
Timestamp:
02/10/26 22:10:32 (5 months ago)
Author:
Filip Gavrilovski <filipgavrilovski28@…>
Branches:
main
Children:
db5fb23
Parents:
1579b4f
Message:

style changes on login and register pages

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/Login.tsx

    r1579b4f r92db381  
    11import { useState } from "react";
    2 import { useNavigate } from "react-router-dom";
     2import { Link, useNavigate } from "react-router-dom";
    33import { toast } from "react-toastify";
    44import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
    … …  
    3232        };
    3333        return (
    34                 <div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
    35                         <h2 className="text-2xl mb-4">Login</h2>
    36                         <form
    37                                 onSubmit={handleLogin}
    38                                 className="bg-white p-6 rounded shadow-md w-80"
    39                         >
    40                                 {error && <p className="text-red-500 mb-4">{error}</p>}
    41                                 <div className="mb-4">
    42                                         <label className="block text-gray-700 mb-2" htmlFor="username">
    43                                                 Username
    44                                         </label>
    45                                         <input
    46                                                 type="text"
    47                                                 id="username"
    48                                                 className="w-full p-2 border border-gray-300 rounded"
    49                                                 value={username}
    50                                                 onChange={(e) => setUsername(e.target.value)}
    51                                         />
     34                <div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center px-4">
     35                        <div className="w-full max-w-md">
     36                                <div className="text-center mb-8">
     37                                        <h1 className="text-4xl font-extrabold text-white mb-2">
     38                                                Welcome Back
     39                                        </h1>
     40                                        <p className="text-gray-400">Log in to continue to FinkWave</p>
    5241                                </div>
    53                                 <div className="mb-4">
    54                                         <label className="block text-gray-700 mb-2" htmlFor="password">
    55                                                 Password
    56                                         </label>
    57                                         <input
    58                                                 type="password"
    59                                                 id="password"
    60                                                 className="w-full p-2 border border-gray-300 rounded"
    61                                                 value={password}
    62                                                 onChange={(e) => setPassword(e.target.value)}
    63                                         />
    64                                 </div>
    65                                 <button
    66                                         type="submit"
    67                                         className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 w-full cursor-pointer"
     42
     43                                <form
     44                                        onSubmit={handleLogin}
     45                                        className="bg-[#181818] rounded-xl p-8 space-y-6"
    6846                                >
    69                                         Login
    70                                 </button>
    71                         </form>
     47                                        {error && (
     48                                                <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
     49                                                        <p className="text-red-400 text-sm">{error}</p>
     50                                                </div>
     51                                        )}
     52
     53                                        <div>
     54                                                <label
     55                                                        className="block text-sm font-medium text-gray-300 mb-2"
     56                                                        htmlFor="username"
     57                                                >
     58                                                        Username
     59                                                </label>
     60                                                <input
     61                                                        type="text"
     62                                                        id="username"
     63                                                        className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
     64                                                        placeholder="Enter your username"
     65                                                        value={username}
     66                                                        onChange={(e) => setUsername(e.target.value)}
     67                                                />
     68                                        </div>
     69
     70                                        <div>
     71                                                <label
     72                                                        className="block text-sm font-medium text-gray-300 mb-2"
     73                                                        htmlFor="password"
     74                                                >
     75                                                        Password
     76                                                </label>
     77                                                <input
     78                                                        type="password"
     79                                                        id="password"
     80                                                        className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
     81                                                        placeholder="Enter your password"
     82                                                        value={password}
     83                                                        onChange={(e) => setPassword(e.target.value)}
     84                                                />
     85                                        </div>
     86
     87                                        <button
     88                                                type="submit"
     89                                                className="w-full py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors cursor-pointer"
     90                                        >
     91                                                Log In
     92                                        </button>
     93
     94                                        <p className="text-center text-sm text-gray-400">
     95                                                Don't have an account?{" "}
     96                                                <Link
     97                                                        to="/register"
     98                                                        className="text-[#1db954] hover:underline font-medium"
     99                                                >
     100                                                        Sign up
     101                                                </Link>
     102                                        </p>
     103                                </form>
     104                        </div>
    72105                </div>
    73106        );
Note: See TracChangeset for help on using the changeset viewer.