Changeset ba52069 for src/app/page.tsx


Ignore:
Timestamp:
02/13/26 19:32:02 (7 months ago)
Author:
Stefan-Saveski <stefansaveski19@…>
Branches:
master
Children:
d7deae5
Parents:
50f2fb4
Message:

Added dark theme.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/app/page.tsx

    r50f2fb4 rba52069  
    5656              {/* Sticky Notes */}
    5757              <div className="w-full flex flex-col gap-4">
    58                 <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
    59                   <div className="text-sm font-bold text-gray-900 mb-2">{t('login_student_title')}</div>
    60                   <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
     58                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
     59                  <div className="text-sm font-bold text-card-foreground mb-2">{t('login_student_title')}</div>
     60                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
    6161                    {t('login_student_example')}
    6262                  </div>
    63                   <div className="mt-3 text-xs text-gray-700">
     63                  <div className="mt-3 text-xs text-muted-foreground">
    6464                    {t('login_note_slow')}
    6565                  </div>
    6666                </div>
    6767
    68                 <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
    69                   <div className="text-sm font-bold text-gray-900 mb-2">{t('login_professor_title')}</div>
    70                   <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
     68                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
     69                  <div className="text-sm font-bold text-card-foreground mb-2">{t('login_professor_title')}</div>
     70                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
    7171                    {t('login_professor_example')}
    7272                  </div>
    … …  
    7777              <div className="w-full max-w-md lg:max-w-none lg:w-[28rem] mx-auto">
    7878                {/* Login Card */}
    79                 <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
     79                <div className="bg-card rounded-2xl shadow-xl border border-border overflow-hidden">
    8080                {/* Header */}
    8181                <div className="bg-primary text-white px-8 py-6 text-center">
    8282              <div className="mb-4">
    83                 <div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full">
    84                   <FontAwesomeIcon icon={faUser} className="text-2xl text-primary" />
     83                <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-full shadow-lg">
     84                  <FontAwesomeIcon icon={faUser} className="text-2xl text-[#0272D1]" />
    8585                </div>
    8686              </div>
    … …  
    100100                {/* Email Field */}
    101101                <div>
    102                   <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
     102                  <label htmlFor="email" className="block text-sm font-medium text-muted-foreground mb-2">
    103103                    {t('login_email_label')}
    104104                  </label>
    105105                  <div className="relative">
    106106                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    107                       <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-gray-400" />
     107                      <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
    108108                    </div>
    109109                    <input
    … …  
    114114                      value={formData.email}
    115115                      onChange={handleInputChange}
    116                       className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
     116                      className="w-full pl-10 pr-4 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
    117117                      placeholder={t('login_email_placeholder')}
    118118                    />
    … …  
    122122                {/* Password Field */}
    123123                <div>
    124                   <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
     124                  <label htmlFor="password" className="block text-sm font-medium text-muted-foreground mb-2">
    125125                    {t('login_password_label')}
    126126                  </label>
    127127                  <div className="relative">
    128128                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    129                       <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-gray-400" />
     129                      <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-muted-foreground" />
    130130                    </div>
    131131                    <input
    … …  
    136136                      value={formData.password}
    137137                      onChange={handleInputChange}
    138                       className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
     138                      className="w-full pl-10 pr-12 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
    139139                      placeholder={t('login_password_placeholder')}
    140140                    />
    … …  
    142142                      type="button"
    143143                      onClick={() => setShowPassword(!showPassword)}
    144                       className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
     144                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
    145145                    >
    146146                      <FontAwesomeIcon
    … …  
    159159                      name="remember"
    160160                      type="checkbox"
    161                       className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
     161                      className="h-4 w-4 text-primary focus:ring-primary border-input rounded"
    162162                    />
    163                     <label htmlFor="remember" className="ml-2 block text-sm text-gray-700">
     163                    <label htmlFor="remember" className="ml-2 block text-sm text-muted-foreground">
    164164                      {t('login_remember_me')}
    165165                    </label>
    … …  
    174174
    175175                {errorMessage && (
    176                   <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
     176                  <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
    177177                    {t(errorMessage) || errorMessage}
    178178                  </div>
    … …  
    192192
    193193            {/* Footer */}
    194             <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
    195               <p className="text-center text-sm text-gray-600">
     194            <div className="bg-accent px-8 py-4 border-t border-border">
     195              <p className="text-center text-sm text-muted-foreground">
    196196                {t('login_no_account')}{' '}
    197197                <button className="text-primary hover:text-blue-700 font-medium transition-colors">
    … …  
    204204                {/* Additional Info */}
    205205                <div className="mt-6 text-center">
    206                   <div className="inline-flex items-center gap-2 px-4 py-2 bg-white bg-opacity-80 rounded-lg shadow-sm">
     206                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-card bg-opacity-80 rounded-lg shadow-sm">
    207207                    <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
    208                     <span className="text-sm text-gray-600">
     208                    <span className="text-sm text-muted-foreground">
    209209                      {t('login_footer')}
    210210                    </span>
Note: See TracChangeset for help on using the changeset viewer.