galpodlipnik/student-info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kinda okj

Browse Source
This commit is contained in:
Gal Podlipnik 2025-06-17 02:43:16 +02:00
parent 09a21fdbf2
commit ea7a8cd5de
13 changed files with 22829 additions and 22764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nx.json
View File

@ -36,3 +36,4 @@
}, },
"defaultProject": "student-app" "defaultProject": "student-app"
} }

51
package-lock.json generated
View File

@ -16,9 +16,7 @@
"@angular/core": "~20.0.0", "@angular/core": "~20.0.0",
"@angular/forms": "~20.0.0", "@angular/forms": "~20.0.0",
"@angular/platform-browser": "~20.0.0", "@angular/platform-browser": "~20.0.0",
"@angular/platform-server": "~20.0.0",
"@angular/router": "~20.0.0", "@angular/router": "~20.0.0",
"@angular/ssr": "~20.0.0",
"@mmstack/primitives": "^20.0.0", "@mmstack/primitives": "^20.0.0",
"@primeng/themes": "^19.1.3", "@primeng/themes": "^19.1.3",
"express": "^4.21.2", "express": "^4.21.2",
@ -2988,26 +2986,6 @@
} }
} }
}, },
"node_modules/@angular/platform-server": {
"version": "20.0.3",
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-20.0.3.tgz",
"integrity": "sha512-7v0BSHgbohgxAJ0pROOtHJzwvp7AHf9sZd3Lws+UzRp0UUzdtUj2qDH1Ag1lQbXx6yxSLbsVDdVQi7F1woJyVQ==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0",
"xhr2": "^0.2.0"
},
"engines": {
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/common": "20.0.3",
"@angular/compiler": "20.0.3",
"@angular/core": "20.0.3",
"@angular/platform-browser": "20.0.3",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/router": { "node_modules/@angular/router": {
"version": "20.0.3", "version": "20.0.3",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-20.0.3.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.0.3.tgz",
@ -3026,26 +3004,6 @@
"rxjs": "^6.5.3 || ^7.4.0" "rxjs": "^6.5.3 || ^7.4.0"
} }
}, },
"node_modules/@angular/ssr": {
"version": "20.0.2",
"resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-20.0.2.tgz",
"integrity": "sha512-BIjjQvSuzzLRwfSbeOeZGA5jj7xFKHeYBs5RuySpGgz5t60GJpyn5h1iAU6GRhMZ4flCwja8CvRkiFjAUa0yIA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/platform-server": "^20.0.0",
"@angular/router": "^20.0.0"
},
"peerDependenciesMeta": {
"@angular/platform-server": {
"optional": true
}
}
},
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
"version": "7.27.1", "version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@ -22251,15 +22209,6 @@
} }
} }
}, },
"node_modules/xhr2": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.2.1.tgz",
"integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==",
"license": "MIT",
"engines": {
"node": ">= 6"
}
},
"node_modules/y18n": { "node_modules/y18n": {
"version": "5.0.8", "version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

2
package.json
View File

@ -16,9 +16,7 @@
"@angular/core": "~20.0.0", "@angular/core": "~20.0.0",
"@angular/forms": "~20.0.0", "@angular/forms": "~20.0.0",
"@angular/platform-browser": "~20.0.0", "@angular/platform-browser": "~20.0.0",
"@angular/platform-server": "~20.0.0",
"@angular/router": "~20.0.0", "@angular/router": "~20.0.0",
"@angular/ssr": "~20.0.0",
"@mmstack/primitives": "^20.0.0", "@mmstack/primitives": "^20.0.0",
"@primeng/themes": "^19.1.3", "@primeng/themes": "^19.1.3",
"express": "^4.21.2", "express": "^4.21.2",

8
project.json
View File

@ -22,12 +22,7 @@
"input": "public" "input": "public"
} }
], ],
"styles": ["./src/styles.scss"], "styles": ["./src/styles.scss"]
"server": "src/main.server.ts",
"ssr": {
"entry": "src/server.ts"
},
"outputMode": "server"
}, },
"configurations": { "configurations": {
"production": { "production": {
@ -89,3 +84,4 @@
} }
} }
} }

29
src/app/add-student.component.ts
View File

@ -80,13 +80,37 @@ import { StudentService } from './student.service';
:host ::ng-deep { :host ::ng-deep {
.p-inputtext:enabled:focus { .p-inputtext:enabled:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-light); box-shadow: var(--focus-ring);
} }
.p-multiselect:not(.p-disabled).p-focus { .p-multiselect:not(.p-disabled).p-focus {
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-light); box-shadow: var(--focus-ring);
} }
.p-inputtext,
.p-multiselect {
background-color: var(--card-background) !important;
color: var(--text-color) !important;
border-radius: var(--input-radius) !important;
border: 1px solid var(--table-border-color) !important;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
color 0.3s;
}
.p-inputtext:enabled:hover,
.p-multiselect:not(.p-disabled):hover {
border-color: var(--primary-light);
}
}
.card-container {
max-width: 480px;
margin: 2rem auto;
}
.form-actions {
margin-top: var(--spacing-lg);
} }
`, `,
], ],
@ -125,3 +149,4 @@ export class AddStudentComponent {
this.router.navigate(['/students']); this.router.navigate(['/students']);
} }
} }

74
src/app/app.component.ts
View File

@ -49,104 +49,113 @@ import { ButtonModule } from 'primeng/button';
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 0 1.5rem; padding: 0 var(--spacing-lg);
height: 4rem; height: 4rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
transition: background-color 0.3s;
} }
.navbar-left .app-title { .navbar-left .app-title {
color: #fff; color: #fff;
font-size: 1.4rem; font-size: 1.5rem;
font-weight: 600; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
} }
.navbar-center a { .navbar-center a {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.85);
margin: 0 1rem; margin: 0 var(--spacing-md);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
padding: 0.5rem 0; padding: var(--spacing-sm) 0;
position: relative; position: relative;
transition: color 0.2s ease; transition: color 0.2s;
}
.navbar-center a.active, &.active,
.navbar-center a:hover { &:hover {
color: #fff; color: #fff;
}
.navbar-center a.active::after, &::after {
.navbar-center a:hover::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: -2px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #fff; background-color: #fff;
border-radius: 2px;
}
}
} }
.navbar-right { .navbar-right {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem;
} }
.avatar { .avatar {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;
margin-right: 0.75rem; margin-right: var(--spacing-sm);
object-fit: cover; object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
background: #fff;
} }
.username { .username {
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
margin-left: 0.25rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
} }
.theme-toggle-btn { .theme-toggle-btn {
background: transparent; background: #fff !important;
color: #fff; color: var(--primary-color) !important;
border-radius: 50%; border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
margin-left: 1rem;
} }
.theme-toggle-btn:hover { .dark-theme .theme-toggle-btn {
background: rgba(255, 255, 255, 0.1); background: #fff !important;
color: var(--primary-color) !important;
border: 1.5px solid var(--primary-light);
}
:root .theme-toggle-btn {
--theme-toggle-bg: #f3f4f8;
--theme-toggle-icon: #23272f;
} }
.main-content { .main-content {
min-height: calc(100vh - 4rem); min-height: calc(100vh - 4rem);
padding: 2rem 0; padding: var(--spacing-xl) 0;
background: var(--background-color);
transition: background 0.3s;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem; padding: 0 var(--spacing-lg);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar { .navbar {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
padding: 1rem; padding: var(--spacing-md);
} }
.navbar-center { .navbar-center {
margin: 1rem 0; margin: var(--spacing-md) 0;
} }
.navbar-right { .navbar-right {
@ -155,7 +164,7 @@ import { ButtonModule } from 'primeng/button';
} }
.main-content { .main-content {
padding: 1rem 0; padding: var(--spacing-md) 0;
} }
} }
`, `,
@ -193,4 +202,3 @@ export class App implements OnInit {
} }
} }
} }

10
src/app/app.config.server.ts
View File

@ -1,10 +0,0 @@
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering, withRoutes } from '@angular/ssr';
import { appConfig } from './app.config';
import { serverRoutes } from './app.routes.server';
const serverConfig: ApplicationConfig = {
providers: [provideServerRendering(withRoutes(serverRoutes))],
};
export const config = mergeApplicationConfig(appConfig, serverConfig);

8
src/app/app.routes.server.ts
View File

@ -1,8 +0,0 @@
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{
path: '**',
renderMode: RenderMode.Prerender,
},
];

28
src/app/edit-student.component.ts
View File

@ -94,12 +94,38 @@ import { StudentService } from './student.service';
.p-inputtext:disabled { .p-inputtext:disabled {
opacity: 0.8; opacity: 0.8;
background-color: #f5f5f5; background-color: #f5f5f5;
color: var(--text-secondary);
} }
.p-inputtext,
.p-multiselect {
background-color: var(--card-background) !important;
color: var(--text-color) !important;
border-radius: var(--input-radius) !important;
border: 1px solid var(--table-border-color) !important;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
color 0.3s;
}
.p-inputtext:enabled:focus,
.p-multiselect:not(.p-disabled).p-focus { .p-multiselect:not(.p-disabled).p-focus {
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-light); box-shadow: var(--focus-ring);
} }
.p-inputtext:enabled:hover,
.p-multiselect:not(.p-disabled):hover {
border-color: var(--primary-light);
}
}
.card-container {
max-width: 480px;
margin: 2rem auto;
}
.form-actions {
margin-top: var(--spacing-lg);
} }
.not-found-message { .not-found-message {

27
src/app/overview.component.ts
View File

@ -29,6 +29,7 @@ import { StudentService } from './student.service';
icon="pi pi-refresh" icon="pi pi-refresh"
class="p-button-secondary" class="p-button-secondary"
(click)="generateMock()" (click)="generateMock()"
[disabled]="students().length > 0"
></button> ></button>
</div> </div>
</div> </div>
@ -100,6 +101,7 @@ import { StudentService } from './student.service';
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
gap: 1rem;
} }
.action-buttons-header { .action-buttons-header {
@ -119,8 +121,10 @@ import { StudentService } from './student.service';
:host ::ng-deep { :host ::ng-deep {
.p-datatable { .p-datatable {
border-radius: 8px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
box-shadow: var(--card-shadow);
background-color: var(--card-background);
.p-datatable-header { .p-datatable-header {
background-color: var(--card-background) !important; background-color: var(--card-background) !important;
@ -132,7 +136,7 @@ import { StudentService } from './student.service';
background-color: var(--table-header-bg) !important; background-color: var(--table-header-bg) !important;
color: var(--text-color) !important; color: var(--text-color) !important;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
font-weight: 600; font-weight: 700;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: var(--table-border-color); border-color: var(--table-border-color);
} }
@ -169,12 +173,10 @@ import { StudentService } from './student.service';
} }
&.p-highlight { &.p-highlight {
background-color: var( background-color: #000000 !important;
--paginator-button-selected-bg color: #ffffff !important;
) !important; border-color: #000000 !important;
color: var(--paginator-button-selected-text) !important; font-weight: 600;
border-color: var(--paginator-button-selected-bg) !important;
font-weight: 500;
} }
} }
} }
@ -188,6 +190,14 @@ import { StudentService } from './student.service';
background-color: var(--table-row-bg) !important; background-color: var(--table-row-bg) !important;
} }
} }
.p-button {
border-radius: var(--input-radius);
font-weight: 600;
letter-spacing: 0.2px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -239,4 +249,3 @@ export class OverviewComponent {
this.studentsService.deleteSutdent(id); this.studentsService.deleteSutdent(id);
} }
} }

8
src/main.server.ts
View File

@ -1,8 +0,0 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app.component';
import { config } from './app/app.config.server';
const bootstrap = () => bootstrapApplication(App, config);
export default bootstrap;

66
src/server.ts
View File

@ -1,66 +0,0 @@
import {
AngularNodeAppEngine,
createNodeRequestHandler,
isMainModule,
writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const app = express();
const angularApp = new AngularNodeAppEngine();
/**
* Example Express Rest API endpoints can be defined here.
* Uncomment and define endpoints as necessary.
*
* Example:
* ```ts
* app.get('/api/**', (req, res) => {
* // Handle API request
* });
* ```
*/
/**
* Serve static files from /browser
*/
app.use(
express.static(browserDistFolder, {
maxAge: '1y',
index: false,
redirect: false,
})
);
/**
* Handle all other requests by rendering the Angular application.
*/
app.use('/**', (req, res, next) => {
angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next()
)
.catch(next);
});
/**
* Start the server if this module is the main entry point.
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
*/
if (isMainModule(import.meta.url)) {
const port = process.env['PORT'] || 4000;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
/**
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
*/
export const reqHandler = createNodeRequestHandler(app);

303
src/styles.scss
View File

@ -3,156 +3,302 @@
html, html,
body { body {
margin: 0; margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
min-height: 100vh;
} }
:root { :root {
// Base colors
--primary-color: #6200ee; --primary-color: #6200ee;
--primary-light: #9951ff; --primary-light: #7f39fb;
--text-color: #333333; --primary-dark: #3700b3;
--background-color: #ffffff; --accent-color: #03dac6;
--card-background: #ffffff; --text-color: #23272f;
--table-header-bg: #f8f9fa; --text-secondary: #555a64;
--table-row-bg: #ffffff; --background-color: #f4f6fa;
--table-row-hover-bg: #f5f5f5;
--table-border-color: #e9ecef; // Card & containers
--paginator-button-selected-bg: var(--primary-color); --card-background: #fff;
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
// Table colors
--table-header-bg: #f3f4f8;
--table-row-bg: #fff;
--table-row-hover-bg: #f0f0f5;
--table-border-color: #e0e3ea;
// Pagination
--paginator-button-selected-bg: #000000;
--paginator-button-selected-text: #ffffff; --paginator-button-selected-text: #ffffff;
--paginator-button-hover-bg: rgba( --paginator-button-hover-bg: rgba(98, 0, 238, 0.08);
98,
0, // Spacing
238, --spacing-xs: 0.25rem;
0.1 --spacing-sm: 0.5rem;
); /* Light purple for hover state */ --spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
// Border radius
--border-radius: 12px;
--input-radius: 8px;
// Focus
--focus-ring: 0 0 0 2px var(--primary-light);
} }
.dark-theme { .dark-theme {
--primary-color: #bb86fc; --primary-color: #bb86fc;
--primary-light: #e2b9ff; --primary-light: #e2b9ff;
--primary-dark: #3700b3;
--accent-color: #03dac6;
--text-color: #e0e0e0; --text-color: #e0e0e0;
--background-color: #121212; --text-secondary: #b0b0b0;
--card-background: #1e1e1e; --background-color: #181a20;
--table-header-bg: #2a2a2a; --card-background: #23242a;
--table-row-bg: #1e1e1e; --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
--table-row-hover-bg: #333333; --table-header-bg: #23242a;
--table-border-color: #444444; --table-row-bg: #181a20;
--paginator-button-selected-bg: var(--primary-color); --table-row-hover-bg: #23242a;
--table-border-color: #33343a;
--paginator-button-hover-bg: rgba(187, 134, 252, 0.12);
--paginator-button-selected-bg: #000000;
--paginator-button-selected-text: #ffffff; --paginator-button-selected-text: #ffffff;
--paginator-button-hover-bg: rgba(
187,
134,
252,
0.2
); /* Light purple for hover state in dark mode */
} }
// Typography
.page-title { .page-title {
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
color: var(--primary-color); color: var(--primary-color);
font-weight: 600; font-weight: 700;
font-size: 2rem;
letter-spacing: 0.5px;
transition: color 0.3s;
} }
// Layout patterns
.flex-row {
display: flex;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-gap {
gap: var(--spacing-md);
}
// Cards and containers
.card-container {
background-color: var(--card-background);
border-radius: var(--border-radius);
padding: var(--spacing-xl) var(--spacing-lg);
box-shadow: var(--card-shadow);
margin-bottom: var(--spacing-xl);
transition: background-color 0.3s, box-shadow 0.3s;
}
// Forms
.form-field { .form-field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
} }
.form-field label { .form-field label {
font-weight: 500; font-weight: 600;
margin-bottom: 0.5rem; margin-bottom: var(--spacing-sm);
color: var(--text-color); color: var(--text-secondary);
letter-spacing: 0.2px;
} }
.form-actions { .form-actions {
margin-top: 2rem; margin-top: var(--spacing-xl);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 1rem; gap: var(--spacing-md);
}
:host ::ng-deep,
body {
.p-component {
font-family: var(--font-family);
}
.p-button {
&.p-button-primary {
background-color: var(--primary-color);
&:hover {
background-color: var(--primary-light);
}
}
} }
input[type='text'],
input[type='email'],
.p-inputtext, .p-inputtext,
.p-multiselect { .p-multiselect {
width: 100%; border-radius: var(--input-radius) !important;
border: 1px solid var(--table-border-color) !important;
padding: var(--spacing-sm) var(--spacing-md) !important;
background-color: var(--card-background) !important;
color: var(--text-color) !important;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
color 0.3s;
box-shadow: none !important;
} }
input[type='text']:focus,
input[type='email']:focus,
.p-inputtext:focus,
.p-multiselect.p-focus {
border-color: var(--primary-color) !important;
box-shadow: var(--focus-ring) !important;
outline: none !important;
}
.p-multiselect {
min-height: 2.5rem;
}
.p-multiselect .p-multiselect-label {
color: var(--text-color) !important;
}
// PrimeNG component styling
.p-component-styles {
// Buttons
.p-button {
border-radius: var(--input-radius);
font-weight: 600;
letter-spacing: 0.2px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: none;
&.p-button-primary {
background-color: var(--primary-color);
border: none;
color: #fff;
&:hover,
&:focus {
background-color: var(--primary-light);
color: #fff;
box-shadow: var(--focus-ring);
}
}
&.p-button-secondary {
background-color: var(--accent-color);
border: none;
color: #23272f;
&:hover,
&:focus {
background-color: #26ffe6;
color: #23272f;
box-shadow: var(--focus-ring);
}
}
&.p-button-outlined {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
&:hover,
&:focus {
background: var(--primary-light);
color: #fff;
box-shadow: var(--focus-ring);
}
}
&.p-button-danger {
background-color: #e53935;
border: none;
color: #fff;
&:hover,
&:focus {
background-color: #b71c1c;
box-shadow: var(--focus-ring);
}
}
&.p-button-text {
background: transparent;
color: var(--primary-color);
&:hover,
&:focus {
background: var(--primary-light);
color: #fff;
box-shadow: var(--focus-ring);
}
}
}
// Tables
.p-datatable { .p-datatable {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
background-color: var(--card-background) !important; background-color: var(--card-background);
border-radius: 8px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: var(--card-shadow);
transition: background-color 0.3s, box-shadow 0.3s;
.p-datatable-header { .p-datatable-header {
background-color: var(--card-background) !important; background-color: var(--card-background);
padding: 1rem; padding: var(--spacing-md);
border-bottom: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color);
} }
.p-datatable-thead > tr > th { .p-datatable-thead > tr > th {
background-color: var(--table-header-bg) !important; background-color: var(--table-header-bg);
color: var(--text-color) !important; color: var(--text-color);
border-color: var(--table-border-color); border-color: var(--table-border-color);
padding: 1rem; padding: var(--spacing-md);
font-weight: 600; font-weight: 700;
font-size: 1rem;
letter-spacing: 0.1px;
} }
.p-datatable-tbody > tr { .p-datatable-tbody > tr {
background-color: var(--table-row-bg) !important; background-color: var(--table-row-bg);
color: var(--text-color) !important; color: var(--text-color);
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: var(--table-row-hover-bg) !important; background-color: var(--table-row-hover-bg);
} }
> td { > td {
background-color: transparent !important; background-color: transparent;
color: var(--text-color) !important; color: var(--text-color);
border-color: var(--table-border-color); border-color: var(--table-border-color);
padding: 1rem; padding: var(--spacing-md);
} }
} }
.p-paginator { .p-paginator {
background-color: var(--card-background) !important; background-color: var(--card-background);
color: var(--text-color) !important; color: var(--text-color);
border-color: var(--table-border-color); border-color: var(--table-border-color);
padding: 1rem; padding: var(--spacing-md);
.p-paginator-element.p-highlight { .p-paginator-element.p-highlight {
background-color: var(--paginator-button-selected-bg) !important; background-color: #000000 !important;
color: var(--paginator-button-selected-text) !important; color: #ffffff !important;
border-color: #000000 !important;
} }
.p-paginator-element:hover { .p-paginator-element:hover {
background-color: var(--paginator-button-hover-bg) !important; background-color: var(--paginator-button-hover-bg);
}
}
} }
} }
.p-datatable-emptymessage td { // Apply these styles globally
background-color: var(--table-row-bg) !important; body {
color: var(--text-color) !important; @extend .p-component-styles;
} }
::-webkit-scrollbar {
width: 10px;
background: var(--background-color);
} }
::-webkit-scrollbar-thumb {
background: var(--table-border-color);
border-radius: 8px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -169,4 +315,3 @@ body {
} }
} }
} }