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

    r50f2fb4 rba52069  
    142142
    143143const TableCell = ({ children, className = "" }: TableCellProps) => (
    144   <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
     144  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
    145145    {children}
    146146  </td>
    … …  
    164164  }
    165165  return (
    166     <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
     166    <span className={`${baseClasses} bg-accent text-gray-800`}>
    167167      {t(status) || status}
    168168    </span>
    … …  
    275275    return (
    276276      <div className="min-h-screen pb-8">
    277         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
     277        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
    278278          {t('loading')}
    279279        </div>
    … …  
    305305      <div className="bg-primary text-white rounded-xl p-8 mb-8">
    306306        <div className="flex items-center gap-4">
    307           <div className="bg-white bg-opacity-20 rounded-full p-4">
    308             <FontAwesomeIcon icon={faBook} className="text-3xl text-primary" />
     307          <div className="bg-white rounded-full p-4">
     308            <FontAwesomeIcon icon={faBook} className="text-3xl text-[#0272D1]" />
    309309          </div>
    310310          <div>
    … …  
    324324         
    325325          {/* Status Card */}
    326           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
    327             <div className="text-sm text-gray-600 mb-2">
     326          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
     327            <div className="text-sm text-muted-foreground mb-2">
    328328              {t('status')}: <span className="text-primary font-semibold">{t('enrolled_by_student')}</span>
    329329            </div>
    330             <div className="text-sm text-gray-600">
     330            <div className="text-sm text-muted-foreground">
    331331              {t('ticket_number')}: <span className="font-semibold">{currentSemester.ticketNumber}</span>
    332332            </div>
    … …  
    334334
    335335          {/* Semester Selection */}
    336           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
    337             <div className="text-sm text-gray-600 mb-2">
     336          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
     337            <div className="text-sm text-muted-foreground mb-2">
    338338              {t('debt_from_documents')}: <span className="font-semibold">{currentSemester.debt}</span>
    339339            </div>
    340340           
    341341            <div className="relative mt-4">
    342               <label className="block text-sm font-medium text-gray-700 mb-2">
     342              <label className="block text-sm font-medium text-muted-foreground mb-2">
    343343                {t('select_semester')}:
    344344              </label>
    … …  
    346346                <button
    347347                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
    348                   className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
     348                  className="w-full bg-card border border-border rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
    349349                >
    350350                  <div className="flex items-center justify-between">
    … …  
    354354                    <FontAwesomeIcon
    355355                      icon={faChevronDown}
    356                       className={`w-4 h-4 text-gray-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
     356                      className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
    357357                    />
    358358                  </div>
    … …  
    360360               
    361361                {isDropdownOpen && (
    362                   <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg">
     362                  <div className="absolute z-10 w-full mt-1 bg-card border border-border rounded-lg shadow-lg">
    363363                    {subjectsData.semesters.map((semester) => (
    364364                      <button
    … …  
    368368                          setIsDropdownOpen(false);
    369369                        }}
    370                         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"
     370                        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"
    371371                      >
    372                         <div className="font-medium text-gray-900">{semester.name}</div>
    373                         <div className="text-xs text-gray-500">{t('status')}: {semester.status}</div>
     372                        <div className="font-medium text-card-foreground">{semester.name}</div>
     373                        <div className="text-xs text-muted-foreground">{t('status')}: {semester.status}</div>
    374374                      </button>
    375375                    ))}
    … …  
    387387
    388388          {/* Enrolled Subjects */}
    389           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
    390             <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
     389          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
     390            <h3 className="font-semibold text-card-foreground mb-3 flex items-center gap-2">
    391391              <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
    392392              {t('enrolled_subjects')}
    … …  
    400400        {/* Right Column - Financial Information */}
    401401        <div className="lg:col-span-2">
    402           <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     402          <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    403403            <div className="bg-primary text-white px-6 py-4">
    404404              <h2 className="text-xl font-bold flex items-center gap-2">
    … …  
    413413                {/* Left Financial Column */}
    414414                <div className="space-y-4">
    415                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    416                     <span className="text-gray-600">{t('sum')}:</span>
     415                  <div className="flex justify-between items-center py-2 border-b border-border">
     416                    <span className="text-muted-foreground">{t('sum')}:</span>
    417417                    <span className="font-semibold text-primary">{currentSemester.financialInfo.sum}</span>
    418418                  </div>
    419                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    420                     <span className="text-gray-600">{t('paid')}:</span>
     419                  <div className="flex justify-between items-center py-2 border-b border-border">
     420                    <span className="text-muted-foreground">{t('paid')}:</span>
    421421                    <span className="font-semibold text-green-600">{currentSemester.financialInfo.paid}</span>
    422422                  </div>
    423                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    424                     <span className="text-gray-600">{t('due')}:</span>
     423                  <div className="flex justify-between items-center py-2 border-b border-border">
     424                    <span className="text-muted-foreground">{t('due')}:</span>
    425425                    <span className="font-semibold text-red-600">{currentSemester.financialInfo.due}</span>
    426426                  </div>
    … …  
    433433                {/* Right Financial Column */}
    434434                <div className="space-y-4">
    435                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    436                     <span className="text-gray-600">{t('credits')}:</span>
     435                  <div className="flex justify-between items-center py-2 border-b border-border">
     436                    <span className="text-muted-foreground">{t('credits')}:</span>
    437437                    <span className="font-semibold text-primary">{currentSemester.financialInfo.credits}</span>
    438438                  </div>
    439                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    440                     <span className="text-gray-600">{t('mksa')}:</span>
     439                  <div className="flex justify-between items-center py-2 border-b border-border">
     440                    <span className="text-muted-foreground">{t('mksa')}:</span>
    441441                    <span className="font-semibold">{currentSemester.financialInfo.MKSA}</span>
    442442                  </div>
    443                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    444                     <span className="text-gray-600">{t('electronic_registration')}:</span>
     443                  <div className="flex justify-between items-center py-2 border-b border-border">
     444                    <span className="text-muted-foreground">{t('electronic_registration')}:</span>
    445445                    <span className="font-semibold">{currentSemester.financialInfo.electronicRegistration}</span>
    446446                  </div>
    447                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    448                     <span className="text-gray-600">{t('eukim')}:</span>
     447                  <div className="flex justify-between items-center py-2 border-b border-border">
     448                    <span className="text-muted-foreground">{t('eukim')}:</span>
    449449                    <span className="font-semibold">{currentSemester.financialInfo.eUKIM}</span>
    450450                  </div>
    451                   <div className="flex justify-between items-center py-2 border-b border-gray-100">
    452                     <span className="text-gray-600">{t('bank_provision')}:</span>
     451                  <div className="flex justify-between items-center py-2 border-b border-border">
     452                    <span className="text-muted-foreground">{t('bank_provision')}:</span>
    453453                    <span className="font-semibold">{currentSemester.financialInfo.bankProvision}</span>
    454454                  </div>
    … …  
    465465
    466466      {/* Subjects Table */}
    467       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     467      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    468468        <div className="bg-primary text-white px-6 py-4">
    469469          <h2 className="text-xl font-bold">{t('subjects_list')}</h2>
    … …  
    472472        <div className="overflow-x-auto">
    473473          <table className="w-full">
    474             <thead className="bg-gray-50">
     474            <thead className="bg-accent">
    475475              <tr>
    476                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    477                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code')}</th>
    478                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('hours')}</th>
    479                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('which_time')}</th>
    480                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject')}</th>
    481                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
    482                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
    483                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signature')}</th>
    484                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('group')}</th>
    485                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('professor')}</th>
     476                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
     477                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('code')}</th>
     478                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('hours')}</th>
     479                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('which_time')}</th>
     480                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('subject')}</th>
     481                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('semester')}</th>
     482                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status')}</th>
     483                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('signature')}</th>
     484                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('group')}</th>
     485                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('professor')}</th>
    486486              </tr>
    487487            </thead>
    488             <tbody className="divide-y divide-gray-100">
     488            <tbody className="divide-y divide-border">
    489489              {currentSubjects.map((subject: Subject) => (
    490                 <tr key={subject.id} className="hover:bg-gray-50 transition-colors">
    491                   <TableCell className="font-medium text-gray-900">{subject.id}</TableCell>
     490                <tr key={subject.id} className="hover:bg-accent transition-colors">
     491                  <TableCell className="font-medium text-card-foreground">{subject.id}</TableCell>
    492492                  <TableCell className="font-mono text-sm text-primary font-medium">{subject.code}</TableCell>
    493493                  <TableCell className="font-medium">{subject.hours}</TableCell>
    494494                  <TableCell className="text-center font-medium">{subject.kojPat}</TableCell>
    495                   <TableCell className="font-medium text-gray-900 max-w-xs">
     495                  <TableCell className="font-medium text-card-foreground max-w-xs">
    496496                    <div className="flex items-center gap-2">
    497497                      <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
    … …  
    505505                  <TableCell className="text-center">
    506506                    {subject.signature ? t(subject.signature, subject.signature) : (
    507                       <span className="text-gray-400">—</span>
     507                      <span className="text-muted-foreground">—</span>
    508508                    )}
    509509                  </TableCell>
    510510                  <TableCell className="text-center">
    511511                    {subject.group ? t(subject.group, subject.group) : (
    512                       <span className="text-gray-400">—</span>
     512                      <span className="text-muted-foreground">—</span>
    513513                    )}
    514514                  </TableCell>
    515515                  <TableCell>
    516516                    {subject.professor ? t(subject.professor, subject.professor) : (
    517                       <span className="text-gray-400">—</span>
     517                      <span className="text-muted-foreground">—</span>
    518518                    )}
    519519                  </TableCell>
Note: See TracChangeset for help on using the changeset viewer.