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/components/exams.tsx

    r50f2fb4 rba52069  
    116116
    117117  const getGradeColor = (grade: number) => {
    118     if (grade >= 9) return "bg-green-100 text-green-800 border-green-200";
    119     if (grade >= 8) return "bg-yellow-100 text-yellow-800 border-yellow-200";
    120     if (grade >= 6) return "bg-orange-100 text-orange-800 border-orange-200";
    121     return "bg-red-100 text-red-800 border-red-200";
     118    if (grade >= 9) return "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20";
     119    if (grade >= 8) return "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20";
     120    if (grade >= 6) return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20";
     121    return "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20";
    122122  };
    123123
    … …  
    186186  if (isLoading) {
    187187    return (
    188       <div className="bg-white rounded-lg shadow-sm p-6">
     188      <div className="bg-card rounded-lg shadow-sm p-6">
    189189        {t('loading', 'Loading...')}
    190190      </div>
    … …  
    194194  if (errorMessage) {
    195195    return (
    196       <div className="bg-white rounded-lg shadow-sm p-6">
    197         <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
     196      <div className="bg-card rounded-lg shadow-sm p-6">
     197        <div className="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
    198198          {t('failed_to_load_exams', errorMessage)}
    199199        </div>
    … …  
    203203
    204204  return (
    205     <div className="bg-white rounded-lg shadow-sm p-6 space-y-6">
     205    <div className="bg-card rounded-lg shadow-sm p-6 space-y-6">
    206206      {/* Statistics Section */}
    207207      <div className="space-y-4">
    … …  
    209209          {/* Average Grade */}
    210210          <div className="text-center">
    211             <div className="text-3xl font-bold text-gray-900">{stats.average}</div>
    212             <div className="text-sm text-gray-500 mt-1">{t('average', 'Просек')}</div>
     211            <div className="text-3xl font-bold text-card-foreground">{stats.average}</div>
     212            <div className="text-sm text-muted-foreground mt-1">{t('average', 'Просек')}</div>
    213213          </div>
    214214
    215215          {/* Credits */}
    216216          <div className="text-center">
    217             <div className="text-3xl font-bold text-gray-900">
     217            <div className="text-3xl font-bold text-card-foreground">
    218218              {stats.credits.current}
    219               <span className="text-lg text-gray-400">/{stats.credits.total}</span>
     219              <span className="text-lg text-muted-foreground">/{stats.credits.total}</span>
    220220            </div>
    221             <div className="text-sm text-gray-500 mt-1">{t('credits', 'Кредити')}</div>
     221            <div className="text-sm text-muted-foreground mt-1">{t('credits', 'Кредити')}</div>
    222222          </div>
    223223
    224224          {/* Passed Exams */}
    225225          <div className="text-center">
    226             <div className="text-3xl font-bold text-gray-900">{stats.passed}</div>
    227             <div className="text-sm text-gray-500 mt-1">{t('passed', 'Положени')}</div>
     226            <div className="text-3xl font-bold text-card-foreground">{stats.passed}</div>
     227            <div className="text-sm text-muted-foreground mt-1">{t('passed', 'Положени')}</div>
    228228          </div>
    229229
    230230          {/* Remaining Exams */}
    231231          <div className="text-center">
    232             <div className="text-3xl font-bold text-gray-900">{stats.remaining}</div>
    233             <div className="text-sm text-gray-500 mt-1">{t('remaining', 'Останато')}</div>
     232            <div className="text-3xl font-bold text-card-foreground">{stats.remaining}</div>
     233            <div className="text-sm text-muted-foreground mt-1">{t('remaining', 'Останато')}</div>
    234234          </div>
    235235        </div>
    236236
    237237        {/* Progress Bar spanning entire statistics section */}
    238         <div className="w-full bg-gray-200 rounded-full h-2">
     238        <div className="w-full bg-secondary rounded-full h-2">
    239239          <div
    240             className="bg-blue-500 h-2 rounded-full transition-all duration-300"
     240            className="bg-primary h-2 rounded-full transition-all duration-300"
    241241            style={{ width: `${creditsPercentage}%` }}
    242242          ></div>
    … …  
    246246      {/* Exams Table */}
    247247      <div>
    248         <h3 className="text-xl font-semibold text-gray-900 mb-4">{t('exams', 'Испити')}</h3>
     248        <h3 className="text-xl font-semibold text-card-foreground mb-4">{t('exams', 'Испити')}</h3>
    249249
    250250        <div className="overflow-x-auto">
    251251          <table className="min-w-full">
    252252            <thead>
    253               <tr className="border-b border-gray-200">
    254                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">#</th>
    255                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('subject', 'Предмет')}</th>
    256                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('semester', 'Семестар')}</th>
    257                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('credits', 'Кредити')}</th>
    258                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
     253              <tr className="border-b border-border">
     254                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">#</th>
     255                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('subject', 'Предмет')}</th>
     256                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('semester', 'Семестар')}</th>
     257                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('credits', 'Кредити')}</th>
     258                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
    259259                  <button
    260260                    onClick={handleSortByDate}
    261                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
     261                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-accent hover:text-accent-foreground transition-all duration-200 transform hover:scale-105"
    262262                  >
    263263                    {t('date', 'Датум')}
    … …  
    265265                      icon={getSortIcon('date')}
    266266                      className={`text-xs transition-colors duration-200 ${
    267                         sortField === 'date' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
     267                        sortField === 'date' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
    268268                      }`}
    269269                    />
    270270                  </button>
    271271                </th>
    272                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
     272                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
    273273                  <button
    274274                    onClick={handleSortByGrade}
    275                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
     275                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-accent hover:text-accent-foreground transition-all duration-200 transform hover:scale-105"
    276276                  >
    277277                    {t('grade', 'Оценка')}
    … …  
    279279                      icon={getSortIcon('grade')}
    280280                      className={`text-xs transition-colors duration-200 ${
    281                         sortField === 'grade' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
     281                        sortField === 'grade' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
    282282                      }`}
    283283                    />
    … …  
    286286              </tr>
    287287            </thead>
    288             <tbody className="divide-y divide-gray-100">
     288            <tbody className="divide-y divide-border">
    289289              {getSortedExams().map((exam) => (
    290                 <tr key={exam.id} className="hover:bg-gray-50 transition-colors duration-150">
    291                   <td className="py-4 px-4 text-sm text-gray-900">{exam.id}</td>
    292                   <td className="py-4 px-4 text-sm text-gray-900 font-medium">{exam.subject}</td>
    293                   <td className="py-4 px-4 text-sm text-gray-500">{exam.semester}</td>
    294                   <td className="py-4 px-4 text-sm text-gray-500">{exam.credits}</td>
    295                   <td className="py-4 px-4 text-sm text-gray-500">{exam.date}</td>
     290                <tr key={exam.id} className="hover:bg-accent/50 transition-colors duration-150">
     291                  <td className="py-4 px-4 text-sm text-card-foreground">{exam.id}</td>
     292                  <td className="py-4 px-4 text-sm text-card-foreground font-medium">{exam.subject}</td>
     293                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.semester}</td>
     294                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.credits}</td>
     295                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.date}</td>
    296296                  <td className="py-4 px-4">
    297297                    <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium border ${getGradeColor(exam.grade)}`}>
Note: See TracChangeset for help on using the changeset viewer.