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/students/applications/page.tsx

    r50f2fb4 rba52069  
    2323
    2424const TableCell = ({ children, className = "" }: TableCellProps) => (
    25   <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
     25  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
    2626    {children}
    2727  </td>
    … …  
    7878      <div className="bg-primary text-white rounded-xl p-8 mb-8">
    7979        <div className="flex items-center gap-4">
    80           <div className="bg-white bg-opacity-20 rounded-full p-4">
    81             <FontAwesomeIcon icon={faPenToSquare} className="text-3xl text-primary" />
     80          <div className="bg-white rounded-full p-4">
     81            <FontAwesomeIcon icon={faPenToSquare} className="text-3xl text-[#0272D1]" />
    8282          </div>
    8383          <div>
    … …  
    9191
    9292      {/* Session Selection */}
    93       <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
     93      <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
    9494        <div className="flex items-center justify-between">
    95           <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
     95          <h2 className="text-lg font-semibold text-card-foreground flex items-center gap-2">
    9696            <FontAwesomeIcon icon={faCalendarAlt} className="text-primary" />
    9797            {t('select_exam_session', 'Избери испитна сесија:')}
    … …  
    101101            <button
    102102              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
    103               className="bg-white border border-gray-300 rounded-lg px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary min-w-80"
     103              className="bg-card border border-border rounded-lg px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary min-w-80"
    104104            >
    105105              <div className="flex items-center justify-between">
    … …  
    109109                <FontAwesomeIcon
    110110                  icon={faChevronDown}
    111                   className={`w-4 h-4 text-gray-400 transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
     111                  className={`w-4 h-4 text-muted-foreground transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
    112112                />
    113113              </div>
    … …  
    115115
    116116            {isDropdownOpen && (
    117               <div className="absolute z-10 right-0 mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-lg">
     117              <div className="absolute z-10 right-0 mt-1 w-80 bg-card border border-border rounded-lg shadow-lg">
    118118                {applicationsData.examSessions.map((session) => (
    119119                  <button
    … …  
    123123                      setIsDropdownOpen(false);
    124124                    }}
    125                     className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
     125                    className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent first:rounded-t-lg last:rounded-b-lg"
    126126                  >
    127                     <div className="font-medium text-gray-900">{t(session.id, session.name)}</div>
    128                     <div className="text-xs text-gray-500">{session.year} - {t(session.semester, session.semester)} - {t(session.session, session.session)}</div>
     127                    <div className="font-medium text-card-foreground">{t(session.id, session.name)}</div>
     128                    <div className="text-xs text-muted-foreground">{session.year} - {t(session.semester, session.semester)} - {t(session.session, session.session)}</div>
    129129                  </button>
    130130                ))}
    … …  
    136136
    137137      {/* Applications Section */}
    138       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     138      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    139139        <div className="bg-primary text-white px-6 py-4">
    140140          <h2 className="text-xl font-bold">{t('registered_exams', 'Пријавени испити')}</h2>
    … …  
    143143        <div className="overflow-x-auto">
    144144          <table className="w-full">
    145             <thead className="bg-gray-50">
     145            <thead className="bg-accent">
    146146              <tr>
    147                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    148                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('serial_number', 'Сериски број')}</th>
    149                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code', 'Код')}</th>
    150                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject', 'Предмет')}</th>
    151                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed', 'Завршена')}</th>
    152                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('fee', 'Таксени')}</th>
    153                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
    154                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('instructor', 'Наставник')}</th>
    155                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('decade', 'Декада')}</th>
     147                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
     148                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('serial_number', 'Сериски број')}</th>
     149                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('code', 'Код')}</th>
     150                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('subject', 'Предмет')}</th>
     151                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('completed', 'Завршена')}</th>
     152                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('fee', 'Таксени')}</th>
     153                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date', 'Датум')}</th>
     154                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('instructor', 'Наставник')}</th>
     155                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('decade', 'Декада')}</th>
    156156              </tr>
    157157            </thead>
    158             <tbody className="divide-y divide-gray-100">
     158            <tbody className="divide-y divide-border">
    159159              {applications.map((application) => (
    160                 <tr key={application.id} className="hover:bg-gray-50 transition-colors">
    161                   <TableCell className="font-medium text-gray-900">{application.id}</TableCell>
     160                <tr key={application.id} className="hover:bg-accent transition-colors">
     161                  <TableCell className="font-medium text-card-foreground">{application.id}</TableCell>
    162162                  <TableCell>
    163163                    <span className="font-mono text-sm text-primary font-medium hover:underline cursor-pointer">
    … …  
    166166                  </TableCell>
    167167                  <TableCell className="font-mono text-sm font-medium">{application.code}</TableCell>
    168                   <TableCell className="font-medium text-gray-900 max-w-xs">
     168                  <TableCell className="font-medium text-card-foreground max-w-xs">
    169169                    <div className="flex items-center gap-2">
    170170                      <FontAwesomeIcon icon={faFileText} className="w-4 h-4 text-primary" />
    … …  
    178178                    <FeeBadge fee={application.fee} />
    179179                  </TableCell>
    180                   <TableCell className="text-gray-600 font-medium">{application.date}</TableCell>
     180                  <TableCell className="text-muted-foreground font-medium">{application.date}</TableCell>
    181181                  <TableCell>
    182182                    <div className="flex items-center gap-2">
    183                       <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-gray-400" />
    184                       <span className="font-medium text-gray-900">{t(application.instructor, application.instructor)}</span>
     183                      <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-muted-foreground" />
     184                      <span className="font-medium text-card-foreground">{t(application.instructor, application.instructor)}</span>
    185185                    </div>
    186186                  </TableCell>
    … …  
    208208      {/* Statistics Cards */}
    209209      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
    210         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     210        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    211211          <div className="flex items-center gap-4">
    212212            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
    … …  
    214214            </div>
    215215            <div>
    216               <h3 className="text-lg font-bold text-gray-900">{t('registered_exams', 'Пријавени испити')}</h3>
     216              <h3 className="text-lg font-bold text-card-foreground">{t('registered_exams', 'Пријавени испити')}</h3>
    217217              <p className="text-2xl font-bold text-blue-600">
    218218                {applications.length}
    … …  
    222222        </div>
    223223
    224         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     224        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    225225          <div className="flex items-center gap-4">
    226226            <div className="bg-green-100 text-green-600 rounded-full p-3">
    … …  
    228228            </div>
    229229            <div>
    230               <h3 className="text-lg font-bold text-gray-900">{t('completed', 'Завршени')}</h3>
     230              <h3 className="text-lg font-bold text-card-foreground">{t('completed', 'Завршени')}</h3>
    231231              <p className="text-2xl font-bold text-green-600">
    232232                {applications.filter(app => app.completed === t('yes', 'Да')).length}
    … …  
    236236        </div>
    237237
    238         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     238        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    239239          <div className="flex items-center gap-4">
    240240            <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
    … …  
    242242            </div>
    243243            <div>
    244               <h3 className="text-lg font-bold text-gray-900">{t('total_fee', 'Вкупна такса')}</h3>
     244              <h3 className="text-lg font-bold text-card-foreground">{t('total_fee', 'Вкупна такса')}</h3>
    245245              <p className="text-2xl font-bold text-yellow-600">
    246246                {applications.reduce((sum, app) => sum + parseFloat(app.fee.replace(',', '.')), 0).toFixed(2)}
Note: See TracChangeset for help on using the changeset viewer.