Changeset ba52069 for src


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.

Location:
src
Files:
2 added
16 edited

Legend:

Unmodified
Added
Removed

  • src/app/globals.css

    r50f2fb4 rba52069  
    8080
    8181.dark {
    82   --background: oklch(0.145 0 0);
    83   --foreground: oklch(0.985 0 0);
    84   --card: oklch(0.205 0 0);
    85   --card-foreground: oklch(0.985 0 0);
    86   --popover: oklch(0.205 0 0);
    87   --popover-foreground: oklch(0.985 0 0);
    88   --primary: oklch(0.922 0 0);
    89   --primary-foreground: oklch(0.205 0 0);
    90   --secondary: oklch(0.269 0 0);
    91   --secondary-foreground: oklch(0.985 0 0);
    92   --muted: oklch(0.269 0 0);
    93   --muted-foreground: oklch(0.708 0 0);
    94   --accent: oklch(0.269 0 0);
    95   --accent-foreground: oklch(0.985 0 0);
    96   --destructive: oklch(0.704 0.191 22.216);
    97   --border: oklch(1 0 0 / 10%);
    98   --input: oklch(1 0 0 / 15%);
    99   --ring: oklch(0.556 0 0);
    100   --chart-1: oklch(0.488 0.243 264.376);
    101   --chart-2: oklch(0.696 0.17 162.48);
    102   --chart-3: oklch(0.769 0.188 70.08);
    103   --chart-4: oklch(0.627 0.265 303.9);
    104   --chart-5: oklch(0.645 0.246 16.439);
    105   --sidebar: oklch(0.205 0 0);
    106   --sidebar-foreground: oklch(0.985 0 0);
    107   --sidebar-primary: oklch(0.488 0.243 264.376);
    108   --sidebar-primary-foreground: oklch(0.985 0 0);
    109   --sidebar-accent: oklch(0.269 0 0);
    110   --sidebar-accent-foreground: oklch(0.985 0 0);
    111   --sidebar-border: oklch(1 0 0 / 10%);
    112   --sidebar-ring: oklch(0.556 0 0);
     82  --background: oklch(0.15 0.01 240);
     83  --foreground: oklch(0.95 0.01 240);
     84  --card: oklch(0.18 0.01 240);
     85  --card-foreground: oklch(0.95 0.01 240);
     86  --popover: oklch(0.18 0.01 240);
     87  --popover-foreground: oklch(0.95 0.01 240);
     88  --primary: #3b82f6;
     89  --primary-foreground: oklch(0.98 0 0);
     90  --secondary: oklch(0.25 0.01 240);
     91  --secondary-foreground: oklch(0.95 0.01 240);
     92  --muted: oklch(0.25 0.01 240);
     93  --muted-foreground: oklch(0.65 0.01 240);
     94  --accent: oklch(0.25 0.01 240);
     95  --accent-foreground: oklch(0.95 0.01 240);
     96  --destructive: oklch(0.6 0.22 25);
     97  --border: oklch(0.3 0.01 240);
     98  --input: oklch(0.25 0.01 240);
     99  --ring: oklch(0.5 0.15 240);
     100  --chart-1: oklch(0.6 0.2 270);
     101  --chart-2: oklch(0.65 0.18 180);
     102  --chart-3: oklch(0.7 0.19 90);
     103  --chart-4: oklch(0.6 0.24 310);
     104  --chart-5: oklch(0.65 0.22 30);
     105  --sidebar: oklch(0.18 0.01 240);
     106  --sidebar-foreground: oklch(0.95 0.01 240);
     107  --sidebar-primary: oklch(0.5 0.2 260);
     108  --sidebar-primary-foreground: oklch(0.98 0 0);
     109  --sidebar-accent: oklch(0.25 0.01 240);
     110  --sidebar-accent-foreground: oklch(0.95 0.01 240);
     111  --sidebar-border: oklch(0.3 0.01 240);
     112  --sidebar-ring: oklch(0.5 0.15 240);
    113113}
    114114
    … …  
    118118  }
    119119  body {
    120     @apply text-foreground;
    121     background-color: #F4FAFF;
     120    @apply text-foreground bg-background;
    122121  }
    123122}

  • src/app/layout.tsx

    r50f2fb4 rba52069  
    66import { I18nextProvider } from 'react-i18next';
    77import i18n from '../i18n';
     8import { ThemeProvider } from '../components/theme-provider';
     9import { ThemeToggle } from '../components/theme-toggle';
    810
    911config.autoAddCss = false;
    … …  
    2527}>) {
    2628  return (
    27     <html lang="en">
     29    <html lang="en" suppressHydrationWarning>
    2830      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
    29         <I18nextProvider i18n={i18n}>
    30           <div className="mx-auto max-w-6xl px-4">{children}</div>
    31         </I18nextProvider>
     31        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
     32          <I18nextProvider i18n={i18n}>
     33            <div className="fixed top-4 right-4 z-50">
     34              <ThemeToggle />
     35            </div>
     36            <div className="mx-auto max-w-6xl px-4">{children}</div>
     37          </I18nextProvider>
     38        </ThemeProvider>
    3239      </body>
    3340    </html>

  • 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>

  • src/app/professor/profile/page.tsx

    r50f2fb4 rba52069  
    9898  const { t } = useTranslation();
    9999  return (
    100     <div className="flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0">
    101       <div className="flex items-center gap-2 text-gray-600 font-medium">
     100    <div className="flex justify-between items-center py-3 border-b border-border last:border-b-0">
     101      <div className="flex items-center gap-2 text-muted-foreground font-medium">
    102102        {icon && <FontAwesomeIcon icon={icon} className="w-4 h-4" />}
    103103        <span>{t(label)}:</span>
    104104      </div>
    105       <div className="text-gray-900 font-semibold text-right max-w-xs break-words">
     105      <div className="text-card-foreground font-semibold text-right max-w-xs break-words">
    106106        {value || t('n_a')}
    107107      </div>
    … …  
    119119  const { t } = useTranslation();
    120120  return (
    121     <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     121    <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    122122      <div className="bg-primary text-white px-6 py-4">
    123123        <div className="flex items-center gap-3">
    … …  
    185185    return (
    186186      <div className="min-h-screen pb-8">
    187         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">{t('loading')}</div>
     187        <div className="bg-card rounded-xl shadow-sm border border-border p-6">{t('loading')}</div>
    188188      </div>
    189189    );
    … …  
    208208        <div className="flex items-center gap-6">
    209209          <div className="relative">
    210             <div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center border-2 border-white border-opacity-30">
    211               <FontAwesomeIcon icon={faUser} className="text-3xl text-primary" />
     210            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-white shadow-lg">
     211              <FontAwesomeIcon icon={faUser} className="text-3xl text-[#0272D1]" />
    212212            </div>
    213213            <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>

  • src/app/professor/students/page.tsx

    r50f2fb4 rba52069  
    129129
    130130  return (
    131     <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
     131    <div className="bg-card rounded-xl shadow-sm border border-border p-6">
    132132      <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    133133
    134134        <div>
    135           <h1 className="text-2xl font-semibold text-gray-900">{t('prof_students_title')}</h1>
    136           <p className="text-gray-700 mt-1">
     135          <h1 className="text-2xl font-semibold text-card-foreground">{t('prof_students_title')}</h1>
     136          <p className="text-muted-foreground mt-1">
    137137            {t('prof_students_data_note')} <span className="font-mono">/api/prof/students</span> (demo store).
    138138          </p>
    … …  
    141141        <div className="flex flex-col sm:flex-row gap-3">
    142142          <div className="flex flex-col">
    143             <label className="text-sm text-gray-700">{t('filter_by_subject')}</label>
     143            <label className="text-sm text-muted-foreground">{t('filter_by_subject')}</label>
    144144            <select
    145               className="border border-gray-300 rounded-lg px-3 py-2"
     145              className="border border-border rounded-lg px-3 py-2"
    146146              value={subjectFilter}
    147147              onChange={(e) => setSubjectFilter(e.target.value)}
    … …  
    159159
    160160          <div className="flex flex-col">
    161             <label className="text-sm text-gray-700">{t('find_student_by_id')}</label>
     161            <label className="text-sm text-muted-foreground">{t('find_student_by_id')}</label>
    162162            <input
    163               className="border border-gray-300 rounded-lg px-3 py-2"
     163              className="border border-border rounded-lg px-3 py-2"
    164164              placeholder={t('student_id_placeholder')}
    165165              value={studentIdQuery}
    … …  
    177177
    178178      <div className="mt-6 overflow-x-auto">
    179         <table className="min-w-full border border-gray-200 rounded-lg overflow-hidden">
    180           <thead className="bg-gray-50">
     179        <table className="min-w-full border border-border rounded-lg overflow-hidden">
     180          <thead className="bg-accent">
    181181            <tr>
    182               <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('student')}</th>
    183               <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('id')}</th>
    184               <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('subject')}</th>
    185               <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('grade')}</th>
    186               <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('actions')}</th>
     182              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('student')}</th>
     183              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('id')}</th>
     184              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('subject')}</th>
     185              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('grade')}</th>
     186              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('actions')}</th>
    187187            </tr>
    188188          </thead>
    … …  
    190190            {loading ? (
    191191              <tr>
    192                 <td className="px-4 py-4 text-gray-700" colSpan={5}>
     192                <td className="px-4 py-4 text-muted-foreground" colSpan={5}>
    193193                  {t('loading')}
    194194                </td>
    … …  
    196196            ) : filteredRows.length === 0 ? (
    197197              <tr>
    198                 <td className="px-4 py-4 text-gray-700" colSpan={5}>
     198                <td className="px-4 py-4 text-muted-foreground" colSpan={5}>
    199199                  {t('no_students_found')}
    200200                </td>
    … …  
    207207
    208208                return (
    209                   <tr key={key} className="hover:bg-gray-50">
    210                     <td className="px-4 py-3 border-b text-gray-900">{r.studentName}</td>
    211                     <td className="px-4 py-3 border-b text-gray-900">{r.studentIdStr}</td>
    212                     <td className="px-4 py-3 border-b text-gray-900">{r.subjectName}</td>
     209                  <tr key={key} className="hover:bg-accent">
     210                    <td className="px-4 py-3 border-b text-card-foreground">{r.studentName}</td>
     211                    <td className="px-4 py-3 border-b text-card-foreground">{r.studentIdStr}</td>
     212                    <td className="px-4 py-3 border-b text-card-foreground">{r.subjectName}</td>
    213213                    <td className="px-4 py-3 border-b">
    214214                      <div className="flex items-center gap-3">
    215215                        <select
    216                           className="border border-gray-300 rounded-lg px-3 py-2"
     216                          className="border border-border rounded-lg px-3 py-2"
    217217                          value={selected}
    218218                          onChange={(e) =>
    … …  
    229229                          ))}
    230230                        </select>
    231                         <span className="text-sm text-gray-600">
     231                        <span className="text-sm text-muted-foreground">
    232232                          {t('current')}: {r.grade > 0 ? r.grade : t('none')}
    233233                        </span>

  • 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)}

  • src/app/students/documents/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>
    … …  
    3838  }
    3939  return (
    40     <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 text-gray-600 rounded-full">
     40    <span className="inline-flex items-center justify-center w-8 h-8 bg-accent text-muted-foreground rounded-full">
    4141      <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
    4242    </span>
    … …  
    7373      <div className="bg-primary text-white rounded-xl p-8 mb-8">
    7474        <div className="flex items-center gap-4">
    75           <div className="bg-white bg-opacity-20 rounded-full p-4">
    76             <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-primary" />
     75          <div className="bg-white rounded-full p-4">
     76            <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-[#0272D1]" />
    7777          </div>
    7878          <div>
    … …  
    8686
    8787      {/* Document Request Form */}
    88       <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
    89         <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
     88      <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
     89        <h2 className="text-lg font-semibold text-card-foreground mb-6 flex items-center gap-2">
    9090          <FontAwesomeIcon icon={faFileText} className="text-primary" />
    9191          {t('new_document_request', 'Ново барање за документ')}
    … …  
    9595          {/* Document Type Selection */}
    9696          <div>
    97             <label className="block text-sm font-medium text-gray-700 mb-2">
     97            <label className="block text-sm font-medium text-muted-foreground mb-2">
    9898              {t('select_document', 'Избери документ')}:
    9999            </label>
    … …  
    101101              <button
    102102                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
    103                 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"
     103                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"
    104104              >
    105105                <div className="flex items-center justify-between">
    106                   <span className="text-sm text-gray-900 truncate">
     106                  <span className="text-sm text-card-foreground truncate">
    107107                    {selectedDocument ? t(selectedDocument.id) : t('select_document', 'Избери документ')}
    108108                  </span>
    109109                  <FontAwesomeIcon
    110110                    icon={faChevronDown}
    111                     className={`w-4 h-4 text-gray-400 transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
     111                    className={`w-4 h-4 text-muted-foreground transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
    112112                  />
    113113                </div>
    … …  
    115115             
    116116              {isDropdownOpen && (
    117                 <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-80 overflow-y-auto">
     117                <div className="absolute z-10 w-full mt-1 bg-card border border-border rounded-lg shadow-lg max-h-80 overflow-y-auto">
    118118                  {documentsData.documentTypes.map((docType) => (
    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 border-b border-gray-100 last:border-b-0"
     125                      className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent border-b border-border last:border-b-0"
    126126                    >
    127                       <div className="font-medium text-gray-900">{t(docType.id)}</div>
     127                      <div className="font-medium text-card-foreground">{t(docType.id)}</div>
    128128                      {docType.price > 0 && (
    129129                        <div className="text-xs text-blue-600 mt-1">{t('price', 'Цена')}: {docType.price} мкд</div>
    … …  
    138138          {/* Comment Section */}
    139139          <div>
    140             <label className="block text-sm font-medium text-gray-700 mb-2">
     140            <label className="block text-sm font-medium text-muted-foreground mb-2">
    141141              {t('comment', 'Коментар')}:
    142142            </label>
    … …  
    145145              onChange={(e) => setComment(e.target.value)}
    146146              rows={4}
    147               className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
     147              className="w-full border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
    148148              placeholder={t('add_comment', 'Додај коментар')}
    149149            />
    … …  
    163163
    164164      {/* Documents Table */}
    165       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     165      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    166166        <div className="bg-primary text-white px-6 py-4">
    167167          <h2 className="text-xl font-bold">{t('my_documents', 'Мои документи')}</h2>
    … …  
    170170        <div className="overflow-x-auto">
    171171          <table className="w-full">
    172             <thead className="bg-gray-50">
     172            <thead className="bg-accent">
    173173              <tr>
    174                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    175                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('archive', 'Архива')}</th>
    176                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
    177                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('request', 'Барање')}</th>
    178                 <th className="px-4 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('price', 'Цена')}</th>
    179                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid', 'Платено')}</th>
    180                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('document', 'Документ')}</th>
    181                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
    182                 <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status', 'Статус')}</th>
    183                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('comment', 'Коментар')}</th>
     174                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
     175                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('archive', 'Архива')}</th>
     176                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date', 'Датум')}</th>
     177                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('request', 'Барање')}</th>
     178                <th className="px-4 py-4 text-right text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('price', 'Цена')}</th>
     179                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('paid', 'Платено')}</th>
     180                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('document', 'Документ')}</th>
     181                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
     182                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status', 'Статус')}</th>
     183                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('comment', 'Коментар')}</th>
    184184              </tr>
    185185            </thead>
    186             <tbody className="divide-y divide-gray-100">
     186            <tbody className="divide-y divide-border">
    187187              {currentDocuments.map((document) => (
    188                 <tr key={document.id} className="hover:bg-gray-50 transition-colors">
    189                   <TableCell className="font-medium text-gray-900">{document.id}</TableCell>
     188                <tr key={document.id} className="hover:bg-accent transition-colors">
     189                  <TableCell className="font-medium text-card-foreground">{document.id}</TableCell>
    190190                  <TableCell className="font-mono text-sm text-primary font-medium">{document.archive}</TableCell>
    191                   <TableCell className="text-gray-600">{document.date}</TableCell>
    192                   <TableCell className="font-medium text-gray-900 max-w-xs">
     191                  <TableCell className="text-muted-foreground">{document.date}</TableCell>
     192                  <TableCell className="font-medium text-card-foreground max-w-xs">
    193193                    {t(document.request)}
    194194                  </TableCell>
    … …  
    210210                      <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-green-600" />
    211211                    ) : (
    212                       <span className="text-gray-400">{t('none', '—')}</span>
     212                      <span className="text-muted-foreground">{t('none', '—')}</span>
    213213                    )}
    214214                  </TableCell>
    … …  
    218218                  <TableCell>
    219219                    {document.comment || (
    220                       <span className="text-gray-400">{t('none', '—')}</span>
     220                      <span className="text-muted-foreground">{t('none', '—')}</span>
    221221                    )}
    222222                  </TableCell>
    … …  
    228228
    229229        {/* Pagination */}
    230         <div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
    231           <div className="flex items-center gap-4 text-sm text-gray-700">
     230        <div className="bg-accent px-6 py-4 flex items-center justify-between border-t border-border">
     231          <div className="flex items-center gap-4 text-sm text-muted-foreground">
    232232            <div className="flex items-center gap-2">
    233233              <span>{t('show_rows', 'Прикажи редови')}:</span>
    … …  
    235235                value={recordsPerPage}
    236236                onChange={(e) => setRecordsPerPage(Number(e.target.value))}
    237                 className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
     237                className="border border-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
    238238              >
    239239                <option value={15}>15</option>
    … …  
    249249                value={currentPage}
    250250                onChange={(e) => setCurrentPage(Number(e.target.value))}
    251                 className="w-12 border border-gray-300 rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
     251                className="w-12 border border-border rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
    252252              /> {t('of', 'од')} {totalPages}
    253253            </div>
    … …  
    258258              onClick={() => setCurrentPage(1)}
    259259              disabled={currentPage === 1}
    260               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     260              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    261261            >
    262262              <FontAwesomeIcon icon={faAngleDoubleLeft} className="w-4 h-4" />
    … …  
    265265              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
    266266              disabled={currentPage === 1}
    267               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     267              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    268268            >
    269269              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
    … …  
    275275              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
    276276              disabled={currentPage === totalPages}
    277               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     277              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    278278            >
    279279              <FontAwesomeIcon icon={faChevronRight} className="w-4 h-4" />
    … …  
    282282              onClick={() => setCurrentPage(totalPages)}
    283283              disabled={currentPage === totalPages}
    284               className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
     284              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
    285285            >
    286286              <FontAwesomeIcon icon={faAngleDoubleRight} className="w-4 h-4" />
    287287            </button>
    288             <span className="ml-4 text-sm text-gray-700">
     288            <span className="ml-4 text-sm text-muted-foreground">
    289289              {t('last', 'Последна')}
    290290            </span>
    291291          </div>
    292292
    293           <div className="text-sm text-gray-700">
     293          <div className="text-sm text-muted-foreground">
    294294            {t('total', 'Вкупно')}: {documents.length}
    295295          </div>
    … …  
    309309      {/* Statistics Cards */}
    310310      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
    311         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     311        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    312312          <div className="flex items-center gap-4">
    313313            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
    … …  
    315315            </div>
    316316            <div>
    317               <h3 className="text-lg font-bold text-gray-900">{t('total_documents', 'Вкупно документи')}</h3>
     317              <h3 className="text-lg font-bold text-card-foreground">{t('total_documents', 'Вкупно документи')}</h3>
    318318              <p className="text-2xl font-bold text-blue-600">
    319319                {documents.length}
    … …  
    323323        </div>
    324324
    325         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     325        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    326326          <div className="flex items-center gap-4">
    327327            <div className="bg-green-100 text-green-600 rounded-full p-3">
    … …  
    329329            </div>
    330330            <div>
    331               <h3 className="text-lg font-bold text-gray-900">{t('approved', 'Одобрени')}</h3>
     331              <h3 className="text-lg font-bold text-card-foreground">{t('approved', 'Одобрени')}</h3>
    332332              <p className="text-2xl font-bold text-green-600">
    333333                {documents.filter(doc => doc.status === "approved").length}
    … …  
    337337        </div>
    338338
    339         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     339        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    340340          <div className="flex items-center gap-4">
    341341            <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
    … …  
    343343            </div>
    344344            <div>
    345               <h3 className="text-lg font-bold text-gray-900">{t('total_price', 'Вкупна цена')}</h3>
     345              <h3 className="text-lg font-bold text-card-foreground">{t('total_price', 'Вкупна цена')}</h3>
    346346              <p className="text-2xl font-bold text-yellow-600">
    347347                {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} {t('mkd', 'мкд')}

  • src/app/students/layout.tsx

    r50f2fb4 rba52069  
    3232}>) {
    3333  return (
    34     <html lang="en">
    35       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
    36         <div className="mx-auto max-w-6xl px-4">
    37           <Header />
    38           <Navbar />
    39           {children}
    40         </div>
    41       </body>
    42     </html>
     34    <div className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
     35      <Header />
     36      <Navbar />
     37      {children}
     38    </div>
    4339  );
    4440}

  • src/app/students/profile/page.tsx

    r50f2fb4 rba52069  
    9898  const { t } = useTranslation();
    9999  return (
    100     <div className="flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0">
    101       <div className="flex items-center gap-2 text-gray-600 font-medium">
     100    <div className="flex justify-between items-center py-3 border-b border-border last:border-b-0">
     101      <div className="flex items-center gap-2 text-muted-foreground font-medium">
    102102        {icon && <FontAwesomeIcon icon={icon} className="w-4 h-4" />}
    103103        <span>{t(label)}:</span>
    104104      </div>
    105       <div className="text-gray-900 font-semibold text-right max-w-xs break-words">
     105      <div className="text-card-foreground font-semibold text-right max-w-xs break-words">
    106106        {value || t('n_a')}
    107107      </div>
    … …  
    119119  const { t } = useTranslation();
    120120  return (
    121     <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     121    <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    122122      <div className="bg-primary text-white px-6 py-4">
    123123        <div className="flex items-center gap-3">
    … …  
    187187    return (
    188188      <div className="min-h-screen pb-8">
    189         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
     189        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
    190190          {t('loading')}
    191191        </div>
    … …  
    212212        <div className="flex items-center gap-6">
    213213          <div className="relative">
    214             <div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center border-2 border-white border-opacity-30">
    215               <FontAwesomeIcon icon={faUser} className="text-3xl text-primary" />
     214            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-white shadow-lg">
     215              <FontAwesomeIcon icon={faUser} className="text-3xl text-[#0272D1]" />
    216216            </div>
    217217            <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>

  • src/app/students/semesters/page.tsx

    r50f2fb4 rba52069  
    4949
    5050const TableCell = ({ children, className = "" }: TableCellProps) => (
    51   <td className={`px-4 py-3 text-sm border-b border-gray-100 ${className}`}>
     51  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
    5252    {children}
    5353  </td>
    … …  
    6666  }
    6767  return (
    68     <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
     68    <span className={`${baseClasses} bg-accent text-gray-800`}>
    6969      {t(status) || status}
    7070    </span>
    … …  
    8787    );
    8888  }
    89   return <span className="text-gray-400">—</span>;
     89  return <span className="text-muted-foreground">—</span>;
    9090};
    9191
    … …  
    163163    return (
    164164      <div className="min-h-screen pb-8">
    165         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
     165        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
    166166          {t('loading')}
    167167        </div>
    … …  
    185185      <div className="bg-primary text-white rounded-xl p-8 mb-8">
    186186        <div className="flex items-center gap-4">
    187           <div className="bg-white bg-opacity-20 rounded-full p-4">
    188             <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-primary" />
     187          <div className="bg-white rounded-full p-4">
     188            <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-[#0272D1]" />
    189189          </div>
    190190          <div>
    … …  
    198198
    199199      {/* Table Container */}
    200       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
     200      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
    201201        <div className="bg-primary text-white px-6 py-4">
    202202          <h2 className="text-xl font-bold">{t('semesters_list')}</h2>
    … …  
    205205        <div className="overflow-x-auto">
    206206          <table className="w-full">
    207             <thead className="bg-gray-50">
     207            <thead className="bg-accent">
    208208              <tr>
    209                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
    210                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
    211                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('direction')}</th>
    212                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('quota')}</th>
    213                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('note')}</th>
    214                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('student_com')}</th>
    215                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('sum')}</th>
    216                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid')}</th>
    217                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('ukim')}</th>
    218                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('created_on')}</th>
    219                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date_changed')}</th>
    220                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('credits')}</th>
    221                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('type')}</th>
    222                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc')}</th>
    223                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc1')}</th>
    224                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('verified')}</th>
    225                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('taxes')}</th>
    226                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signatures')}</th>
    227                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
    228                 <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed')}</th>
     209                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
     210                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('semester')}</th>
     211                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('direction')}</th>
     212                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('quota')}</th>
     213                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('note')}</th>
     214                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('student_com')}</th>
     215                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('sum')}</th>
     216                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('paid')}</th>
     217                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('ukim')}</th>
     218                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('created_on')}</th>
     219                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date_changed')}</th>
     220                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('credits')}</th>
     221                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('type')}</th>
     222                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('doc')}</th>
     223                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('doc1')}</th>
     224                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('verified')}</th>
     225                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('taxes')}</th>
     226                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('signatures')}</th>
     227                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status')}</th>
     228                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('completed')}</th>
    229229              </tr>
    230230            </thead>
    231             <tbody className="divide-y divide-gray-100">
     231            <tbody className="divide-y divide-border">
    232232              {semesters.map((semester) => (
    233                 <tr key={semester.id} className="hover:bg-gray-50 transition-colors">
    234                   <TableCell className="font-medium text-gray-900">{semester.id}</TableCell>
     233                <tr key={semester.id} className="hover:bg-accent transition-colors">
     234                  <TableCell className="font-medium text-card-foreground">{semester.id}</TableCell>
    235235                  <TableCell className="font-medium text-primary">{semester.semester}</TableCell>
    236236                  <TableCell>{semester.direction}</TableCell>
    … …  
    246246                      </span>
    247247                    ) : (
    248                       <span className="text-gray-400">—</span>
     248                      <span className="text-muted-foreground">—</span>
    249249                    )}
    250250                  </TableCell>
    … …  
    255255                      </span>
    256256                    ) : (
    257                       <span className="text-gray-400">—</span>
     257                      <span className="text-muted-foreground">—</span>
    258258                    )}
    259259                  </TableCell>
    … …  
    265265                      </span>
    266266                    ) : (
    267                       <span className="text-gray-400">—</span>
     267                      <span className="text-muted-foreground">—</span>
    268268                    )}
    269269                  </TableCell>
    … …  
    275275                      </span>
    276276                    ) : (
    277                       <span className="text-gray-400">—</span>
     277                      <span className="text-muted-foreground">—</span>
    278278                    )}
    279279                  </TableCell>
    … …  
    282282                      <span className="text-blue-600">{semester.ukim}</span>
    283283                    ) : (
    284                       <span className="text-gray-400">—</span>
    285                     )}
    286                   </TableCell>
    287                   <TableCell className="text-gray-600">{semester.createdOn}</TableCell>
    288                   <TableCell className="text-gray-600">{semester.dateChanged}</TableCell>
     284                      <span className="text-muted-foreground">—</span>
     285                    )}
     286                  </TableCell>
     287                  <TableCell className="text-muted-foreground">{semester.createdOn}</TableCell>
     288                  <TableCell className="text-muted-foreground">{semester.dateChanged}</TableCell>
    289289                  <TableCell className="font-medium text-primary">{semester.credits}</TableCell>
    290290                  <TableCell>
    … …  
    331331      {/* Summary Cards */}
    332332      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
    333         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     333        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    334334          <div className="flex items-center gap-4">
    335335            <div className="bg-green-100 text-green-600 rounded-full p-3">
    … …  
    337337            </div>
    338338            <div>
    339               <h3 className="text-lg font-bold text-gray-900">{t('completed_semesters')}</h3>
     339              <h3 className="text-lg font-bold text-card-foreground">{t('completed_semesters')}</h3>
    340340              <p className="text-2xl font-bold text-green-600">
    341341                {semesters.filter(s => s.completed !== "Не").length}
    … …  
    345345        </div>
    346346
    347         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     347        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    348348          <div className="flex items-center gap-4">
    349349            <div className="bg-blue-100 text-blue-600 rounded-full p-3">
    … …  
    351351            </div>
    352352            <div>
    353               <h3 className="text-lg font-bold text-gray-900">{t('verified_semesters')}</h3>
     353              <h3 className="text-lg font-bold text-card-foreground">{t('verified_semesters')}</h3>
    354354              <p className="text-2xl font-bold text-blue-600">
    355355                {semesters.filter(s => s.verified === "Да").length}
    … …  
    359359        </div>
    360360
    361         <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
     361        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
    362362          <div className="flex items-center gap-4">
    363363            <div className="bg-primary text-white rounded-full p-3">
    … …  
    365365            </div>
    366366            <div>
    367               <h3 className="text-lg font-bold text-gray-900">{t('total_semesters')}</h3>
     367              <h3 className="text-lg font-bold text-card-foreground">{t('total_semesters')}</h3>
    368368              <p className="text-2xl font-bold text-primary">
    369369                {semesters.length}

  • 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>

  • src/components/LanguageSwitcher.tsx

    r50f2fb4 rba52069  
    1313      <button
    1414        onClick={() => changeLanguage('mk')}
    15         className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'mk' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
     15        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'mk' ? 'border-primary text-primary bg-accent' : 'border-border text-muted-foreground bg-card hover:border-primary hover:text-primary'}`}
    1616        aria-label="Macedonian"
    1717      >
    … …  
    2020      <button
    2121        onClick={() => changeLanguage('en')}
    22         className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'en' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
     22        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'en' ? 'border-primary text-primary bg-accent' : 'border-border text-muted-foreground bg-card hover:border-primary hover:text-primary'}`}
    2323        aria-label="English"
    2424      >

  • 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)}`}>

  • src/components/header.tsx

    r50f2fb4 rba52069  
    4545
    4646  return (
    47     <header className="bg-white shadow-sm border-b border-gray-200">
     47    <header className="bg-card shadow-sm border-b border-border">
    4848      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    4949        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 gap-4 sm:gap-0">
    … …  
    7272            {/* University Text */}
    7373            <div className="hidden sm:block">
    74               <div className="text-gray-900 font-medium text-sm">
     74              <div className="text-card-foreground font-medium text-sm">
    7575                {t('university')}
    7676              </div>
    77               <div className="text-gray-700 text-sm">
     77              <div className="text-muted-foreground text-sm">
    7878                {t('faculty')}
    7979              </div>
    … …  
    8888            <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-center sm:justify-end">
    8989              {/* User Avatar */}
    90               <div className="hidden sm:flex items-center justify-center w-10 h-10 bg-gray-800 text-white rounded-full">
     90              <div className="hidden sm:flex items-center justify-center w-10 h-10 bg-primary text-primary-foreground rounded-full">
    9191                <FontAwesomeIcon icon={faUser} className="text-sm" />
    9292              </div>
    9393              {/* User Name */}
    94               <div className="hidden sm:block text-gray-900 font-medium">
     94              <div className="hidden sm:block text-card-foreground font-medium">
    9595                {userName || '...'}
    9696              </div>
    9797              {/* Logout Button - more stylish and full width on mobile */}
    9898              <button
    99                 className="w-full sm:w-auto ml-0 sm:ml-2 px-4 py-2 border-2 border-primary text-primary bg-white rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-blue-50 transition-all duration-200 shadow-sm"
     99                className="w-full sm:w-auto ml-0 sm:ml-2 px-4 py-2 border-2 border-primary text-primary bg-card rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-accent transition-all duration-200 shadow-sm"
    100100                onClick={handleLogout}
    101101              >

  • src/components/navbar.tsx

    r50f2fb4 rba52069  
    3232    <>
    3333      {/* Desktop Navbar */}
    34       <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-white p-7 rounded-xl my-5 text-xl">
     34      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-primary-foreground p-7 rounded-xl my-5 text-xl">
    3535        {menuItems.map((item, index) => (
    3636          <Link key={index} href={item.href}>
    37             <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:scale-105 hover:shadow-lg hover:text-primary">
     37            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground hover:scale-105 hover:shadow-lg">
    3838              <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
    3939              <span>{item.label}</span>
    … …  
    4444
    4545      {/* Mobile Navbar */}
    46       <nav className="md:hidden bg-primary text-white rounded-xl my-5">
     46      <nav className="md:hidden bg-primary text-primary-foreground rounded-xl my-5">
    4747        <div className="flex justify-between items-center p-4">
    4848          {/* IKnow Logo/Text */}
    … …  
    5555          <button
    5656            onClick={toggleMenu}
    57             className="p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-colors duration-300"
     57            className="p-2 rounded-lg hover:bg-card hover:text-card-foreground transition-colors duration-300"
    5858          >
    5959            <FontAwesomeIcon
    … …  
    7171            {menuItems.map((item, index) => (
    7272              <Link key={index} href={item.href}>
    73                 <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:text-primary">
     73                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground">
    7474                  <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
    7575                  <span className="text-lg">{item.label}</span>

  • src/components/professor-navbar.tsx

    r50f2fb4 rba52069  
    2323    <>
    2424      {/* Desktop Navbar */}
    25       <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-white p-7 rounded-xl my-5 text-xl">
     25      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-primary-foreground p-7 rounded-xl my-5 text-xl">
    2626        {menuItems.map((item) => (
    2727          <Link key={item.href} href={item.href}>
    28             <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:scale-105 hover:shadow-lg hover:text-primary">
     28            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground hover:scale-105 hover:shadow-lg">
    2929              <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
    3030              <span>{item.label}</span>
    … …  
    3535
    3636      {/* Mobile Navbar */}
    37       <nav className="md:hidden bg-primary text-white rounded-xl my-5">
     37      <nav className="md:hidden bg-primary text-primary-foreground rounded-xl my-5">
    3838        <div className="flex justify-between items-center p-4">
    3939          <div className="flex items-center gap-2 text-xl font-bold">
    … …  
    4444          <button
    4545            onClick={toggleMenu}
    46             className="p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-colors duration-300"
     46            className="p-2 rounded-lg hover:bg-card hover:text-card-foreground transition-colors duration-300"
    4747            aria-label="Toggle menu"
    4848          >
    … …  
    6262            {menuItems.map((item) => (
    6363              <Link key={item.href} href={item.href}>
    64                 <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:text-primary">
     64                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground">
    6565                  <FontAwesomeIcon
    6666                    icon={item.icon}
Note: See TracChangeset for help on using the changeset viewer.