diff --git a/.env b/.env index a7a3cf1..cccab81 100644 --- a/.env +++ b/.env @@ -1,6 +1,4 @@ -VITE_API_URL="https://gateway.poweron-center.net" - -#VITE_API_URL="http://127.0.0.1:8000" +VITE_API_BASE_URL="http://localhost:8000" VITE_MICROSOFT_CLIENT_ID="24cd6c8a-b592-4905-a5ba-d5fa9f911154" VITE_MICROSOFT_TENANT_ID="6a51aaeb-2467-4186-9504-2a05aedc591f" VITE_ENTRA_CLIENT_SECRET="2iw8Q~jwqG1iacxHopBt5pstu6R45UC1gIQabcbD" diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..3a4c552 --- /dev/null +++ b/.env.production @@ -0,0 +1,7 @@ +VITE_API_BASE_URL="https://gateway-int.poweron-center.net" +VITE_MICROSOFT_CLIENT_ID="24cd6c8a-b592-4905-a5ba-d5fa9f911154" +VITE_MICROSOFT_TENANT_ID="6a51aaeb-2467-4186-9504-2a05aedc591f" +VITE_ENTRA_CLIENT_SECRET="2iw8Q~jwqG1iacxHopBt5pstu6R45UC1gIQabcbD" +VITE_ENTRA_AUTHORITY="https://login.microsoftonline.com/6a51aaeb-2467-4186-9504-2a05aedc591f" +VITE_ENTRA_REDIRECT_PATH="/auth/callback/" +VITE_ENTRA_REDIRECT_URI="https://gateway.poweron-center.net/api/msft/auth/callback/" diff --git a/.github/workflows/int_poweron-nyla-int.yml b/.github/workflows/int_poweron-nyla-int.yml new file mode 100644 index 0000000..144e20a --- /dev/null +++ b/.github/workflows/int_poweron-nyla-int.yml @@ -0,0 +1,75 @@ +name: Build and deploy Nyla App to int +on: + push: + branches: + - int + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Set up Node.js version + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + + - name: Create production environment file + run: | + echo 'VITE_API_BASE_URL="https://gateway-int.poweron-center.net"' > .env.production + echo 'VITE_MICROSOFT_CLIENT_ID="24cd6c8a-b592-4905-a5ba-d5fa9f911154"' >> .env.production + echo 'VITE_MICROSOFT_TENANT_ID="6a51aaeb-2467-4186-9504-2a05aedc591f"' >> .env.production + echo 'VITE_ENTRA_CLIENT_SECRET="2iw8Q~jwqG1iacxHopBt5pstu6R45UC1gIQabcbD"' >> .env.production + echo 'VITE_ENTRA_AUTHORITY="https://login.microsoftonline.com/6a51aaeb-2467-4186-9504-2a05aedc591f"' >> .env.production + echo 'VITE_ENTRA_REDIRECT_PATH="/auth/callback/"' >> .env.production + echo 'VITE_ENTRA_REDIRECT_URI="https://gateway-int.poweron-center.net/api/msft/auth/callback/"' >> .env.production + + - name: npm install, build + run: | + npm ci + npm run build --if-present + + - name: Upload artifact for deployment job + uses: actions/upload-artifact@v4 + with: + name: node-app + path: | + . + !node_modules + !.git + !.github + !README.md + + deploy: + runs-on: ubuntu-latest + needs: build + environment: + name: 'Production' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} + permissions: + id-token: write #This is required for requesting the JWT + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v4 + with: + name: node-app + + - name: Login to Azure + uses: azure/login@v1 + with: + client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_F22B84BEF16242F48E913761794EFA64 }} + tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_91A621FECC4E4239B35E8842FAD714A4 }} + subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_89F1F8736D6D4566AF238A83525E0BD5 }} + + - name: 'Deploy to Azure Web App' + id: deploy-to-webapp + uses: azure/webapps-deploy@v2 + with: + app-name: 'poweron-nyla-int' + slot-name: 'Production' + package: . \ No newline at end of file diff --git a/.gitignore b/.gitignore index a547bf3..5cbc969 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,8 @@ dist-ssr *.njsproj *.sln *.sw? + +# Environment files +.env +.env.local +.env.*.local \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..36fc528 Binary files /dev/null and b/README.md differ diff --git a/deploy-server.js b/deploy-server.js new file mode 100644 index 0000000..dd43008 --- /dev/null +++ b/deploy-server.js @@ -0,0 +1,26 @@ +import express from 'express'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const app = express(); + +// Serve static files from current directory +app.use(express.static(path.join(__dirname))); + +// Handle React Router - send all requests to index.html +app.get('/*', function(req, res) { + res.sendFile(path.join(__dirname, 'index.html')); +}); + +// Use Azure's PORT environment variable or fallback to 8080 +const port = process.env.PORT || 8080; + +// Listen on all interfaces (important for Azure) +app.listen(port, '0.0.0.0', () => { + console.log(`Server running on port ${port}`); + console.log(`Environment: ${process.env.NODE_ENV || 'development'}`); + console.log(`Directory: ${__dirname}`); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 54f4896..d7d74d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@azure/msal-react": "^3.0.12", "axios": "^1.8.3", "dotenv": "^16.0.3", + "express": "^4.18.2", "framer-motion": "^12.7.3", "fs": "^0.0.1-security", "js-cookie": "^3.0.5", @@ -1399,6 +1400,18 @@ "vite": "^4.2.0 || ^5.0.0 || ^6.0.0" } }, + "node_modules/accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/acorn": { "version": "8.14.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", @@ -1457,6 +1470,11 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1495,6 +1513,42 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/body-parser": { + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", + "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", + "dependencies": { + "bytes": "3.1.2", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "on-finished": "2.4.1", + "qs": "6.11.0", + "raw-body": "2.5.1", + "type-is": "~1.6.18", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/body-parser/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/body-parser/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1542,6 +1596,14 @@ "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==" }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/call-bind-apply-helpers": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", @@ -1554,6 +1616,21 @@ "node": ">= 0.4" } }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1688,6 +1765,25 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -1702,6 +1798,11 @@ "node": ">=18" } }, + "node_modules/cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -1763,6 +1864,14 @@ "node": ">=0.4.0" } }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -1771,6 +1880,15 @@ "node": ">=6" } }, + "node_modules/destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, "node_modules/devlop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", @@ -1815,12 +1933,25 @@ "safe-buffer": "^5.0.1" } }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" + }, "node_modules/electron-to-chromium": { "version": "1.5.158", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.158.tgz", "integrity": "sha512-9vcp2xHhkvraY6AHw2WMi+GDSLPX42qe2xjYaVoZqFRJiOcilVQFq9mZmpuHEQpzlgGDelKlV7ZiGcmMsc8WxQ==", "dev": true }, + "node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/es-define-property": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", @@ -1911,6 +2042,11 @@ "node": ">=6" } }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -2100,6 +2236,76 @@ "node": ">=0.10.0" } }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "4.18.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", + "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "1.20.1", + "content-disposition": "0.5.4", + "content-type": "~1.0.4", + "cookie": "0.5.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "1.2.0", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.7", + "qs": "6.11.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "0.18.0", + "serve-static": "1.15.0", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/express/node_modules/cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/express/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -2160,6 +2366,36 @@ "node": ">= 12" } }, + "node_modules/finalhandler": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", + "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/finalhandler/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/finalhandler/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2228,6 +2464,14 @@ "node": ">= 6" } }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/framer-motion": { "version": "12.15.0", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.15.0.tgz", @@ -2254,6 +2498,14 @@ } } }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/fs": { "version": "0.0.1-security", "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", @@ -2452,6 +2704,32 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/http-errors": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "dependencies": { + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -2486,11 +2764,24 @@ "node": ">=0.8.19" } }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, "node_modules/inline-style-parser": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz", "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==" }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/is-alphabetical": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", @@ -2955,6 +3246,27 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/micromark": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz", @@ -3376,6 +3688,17 @@ } ] }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -3474,6 +3797,14 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/node-releases": { "version": "2.0.19", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", @@ -3488,6 +3819,28 @@ "node": ">=0.10.0" } }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -3570,6 +3923,14 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==" }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3588,6 +3949,11 @@ "node": ">=8" } }, + "node_modules/path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + }, "node_modules/pg": { "version": "8.16.0", "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.0.tgz", @@ -3778,6 +4144,18 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -3792,6 +4170,42 @@ "node": ">=6" } }, + "node_modules/qs": { + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "dependencies": { + "side-channel": "^1.0.4" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", + "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", + "dependencies": { + "bytes": "3.1.2", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/react": { "version": "19.1.0", "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", @@ -4009,6 +4423,11 @@ } ] }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, "node_modules/scheduler": { "version": "0.26.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", @@ -4023,11 +4442,66 @@ "semver": "bin/semver.js" } }, + "node_modules/send": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", + "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "2.4.1", + "range-parser": "~1.2.1", + "statuses": "2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/send/node_modules/debug/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/serve-static": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", + "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "dependencies": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.18.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/set-cookie-parser": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4049,6 +4523,74 @@ "node": ">=8" } }, + "node_modules/side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -4075,6 +4617,14 @@ "node": ">= 10.x" } }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/stringify-entities": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", @@ -4144,6 +4694,14 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/trim-lines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", @@ -4179,6 +4737,18 @@ "node": ">= 0.8.0" } }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/unified": { "version": "11.0.5", "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", @@ -4260,6 +4830,14 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", @@ -4299,6 +4877,22 @@ "punycode": "^2.1.0" } }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/vfile": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", diff --git a/package.json b/package.json index 297ea64..7cedb5b 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,15 @@ "dev": "vite --port 5176", "build": "vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "start": "node server.js" }, "dependencies": { "@azure/msal-browser": "^4.12.0", "@azure/msal-react": "^3.0.12", "axios": "^1.8.3", "dotenv": "^16.0.3", + "express": "^4.18.2", "framer-motion": "^12.7.3", "fs": "^0.0.1-security", "js-cookie": "^3.0.5", diff --git a/src/assets/Frame 43.png b/public/logos/Frame 43.png similarity index 100% rename from src/assets/Frame 43.png rename to public/logos/Frame 43.png diff --git a/public/logos/PowerOn Details.PNG b/public/logos/PowerOn Details.PNG new file mode 100644 index 0000000..d35eb4f Binary files /dev/null and b/public/logos/PowerOn Details.PNG differ diff --git a/public/logos/PowerOn.png b/public/logos/PowerOn.png new file mode 100644 index 0000000..ec1658a Binary files /dev/null and b/public/logos/PowerOn.png differ diff --git a/public/logos/PowerOn_transparent.png b/public/logos/PowerOn_transparent.png new file mode 100644 index 0000000..e8d4904 Binary files /dev/null and b/public/logos/PowerOn_transparent.png differ diff --git a/server.js b/server.js new file mode 100644 index 0000000..4943d52 --- /dev/null +++ b/server.js @@ -0,0 +1,24 @@ +import express from 'express'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const app = express(); + +// Serve static files from the dist directory +app.use(express.static(path.join(__dirname, 'dist'))); + +// Handle React Router - send all requests to index.html +app.get('/*', function(req, res) { + res.sendFile(path.join(__dirname, 'dist', 'index.html')); +}); + +// Use Azure's PORT environment variable or fallback to 3000 +const port = process.env.PORT || 3000; + +// Listen on all interfaces (important for Azure) +app.listen(port, '0.0.0.0', () => { + console.log(`Server running on port ${port}`); +}); \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 399b49f..80f2e51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +// Import global CSS reset first +import './index.css'; + import Login from './pages/Login'; import Register from './pages/Register'; @@ -9,6 +12,9 @@ import Home from './pages/Home'; import Dateien from './pages/Dateien/Dateien'; import Mitglieder from './pages/Mitglieder/Mitglieder'; import Dashboard from './pages/Dashboard'; +import Einstellungen from './pages/Einstellungen/Einstellungen'; +// Import the global light theme CSS variables as default +import './assets/styles/light.css'; function App() { return ( @@ -26,6 +32,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/api.ts b/src/api.ts index 4699eed..79eb618 100644 --- a/src/api.ts +++ b/src/api.ts @@ -2,8 +2,7 @@ import axios from 'axios'; const api = axios.create({ - baseURL: 'https://gateway.poweron-center.net', - //baseURL: 'http://localhost:8000', + baseURL: import.meta.env.VITE_API_BASE_URL, withCredentials: true }); diff --git a/src/assets/LogoPowerOn.png b/src/assets/LogoPowerOn.png deleted file mode 100644 index b881f67..0000000 Binary files a/src/assets/LogoPowerOn.png and /dev/null differ diff --git a/src/assets/background.png b/src/assets/background.png deleted file mode 100644 index d2521b9..0000000 Binary files a/src/assets/background.png and /dev/null differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/styles/dark.css b/src/assets/styles/dark.css new file mode 100644 index 0000000..93df05f --- /dev/null +++ b/src/assets/styles/dark.css @@ -0,0 +1,28 @@ +:root { + --color-bg: #121212; + --color-surface: #1E1E1E; + --color-text: #E5E7EB; + + --color-primary: #B266FF; + --color-primary-hover: #C68AFF; + --color-primary-disabled: #5C2B80; + + --color-secondary: #6F7BE5; + --color-secondary-hover: #8592FF; + --color-secondary-disabled: #3B4370; + + --color-red: #FF6F7A; + --color-red-hover: #FF8B94; + --color-red-disabled: #80383E; + + --color-secondary-red: #D65D6A; + --color-secondary-red-hover: #E17683; + --color-secondary-red-disabled: #70363C; + + --color-gray: #A0A4AA; + --color-gray-hover: #C4C8CD; + --color-gray-disabled: #505357; + + --font-family: "Trebuchet MS", sans-serif; + } + \ No newline at end of file diff --git a/src/assets/styles/light.css b/src/assets/styles/light.css new file mode 100644 index 0000000..14a6616 --- /dev/null +++ b/src/assets/styles/light.css @@ -0,0 +1,55 @@ +:root { + --color-bg: #FFFFFF; + --color-surface: #F8F9FA; + --color-text: #24262B; + + --color-primary: #8F00FF; + --color-primary-hover: #A020FF; + --color-primary-disabled: #D1A6F9; + + --color-secondary: #3F51B5; + --color-secondary-hover: #5A6CE0; + --color-secondary-disabled: #BEC5EB; + + --color-red: #D85B65; + --color-red-hover: #E77A81; + --color-red-disabled: #F3C0C4; + + --color-secondary-red: #B94A55; + --color-secondary-red-hover: #D46872; + --color-secondary-red-disabled: #E8B7BA; + + --color-gray: #6C757D; + --color-gray-hover: #8A9299; + --color-gray-disabled: #D6D8DB; + + --font-family: "Trebuchet MS", sans-serif; +} + +/* Dark theme overrides */ +.dark-theme { + --color-bg: #121212; + --color-surface: #1E1E1E; + --color-text: #E5E7EB; + + --color-primary: #B266FF; + --color-primary-hover: #C68AFF; + --color-primary-disabled: #5C2B80; + + --color-secondary: #6F7BE5; + --color-secondary-hover: #8592FF; + --color-secondary-disabled: #3B4370; + + --color-red: #FF6F7A; + --color-red-hover: #FF8B94; + --color-red-disabled: #80383E; + + --color-secondary-red: #D65D6A; + --color-secondary-red-hover: #E17683; + --color-secondary-red-disabled: #70363C; + + --color-gray: #A0A4AA; + --color-gray-hover: #C4C8CD; + --color-gray-disabled: #505357; +} + \ No newline at end of file diff --git a/src/components/Dashboard/DashboardChat/DashboardChat.module.css b/src/components/Dashboard/DashboardChat/DashboardChat.module.css index 3eda629..8fc3ff8 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChat.module.css +++ b/src/components/Dashboard/DashboardChat/DashboardChat.module.css @@ -4,14 +4,13 @@ flex-direction: column; align-self: stretch; border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + background: var(--color-bg); position: relative; box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); height: 100%; min-height: 0; overflow: hidden; - + font-family: var(--font-family); } .dashboard_chat.expanded { @@ -49,19 +48,20 @@ cursor: pointer; padding: 0; transition: all 0.2s ease; + font-family: var(--font-family); } .chat_button_active { - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); } .chat_button_inactive { - color: #A0A0A0; + color: var(--color-gray); } .chat_button_collapsed { opacity: 50%; - color: #A0A0A0; + color: var(--color-gray); } .iconContainer { @@ -74,23 +74,23 @@ cursor: pointer; display: flex; align-items: center; - color: var(--Brand-Green-Green, #3A8088); + color: var(--color-secondary); } .expandIcon:hover, .collapseIcon:hover { - color: #333; + color: var(--color-secondary-hover); } .horizontalLine { width: 100%; - background-color: var(--Grayscale-Black, #24262B); + background-color: var(--color-text); height: 1px; margin-top: 20px; } .horizontalLineLight { width: calc(100%); - background-color: #F1F1F1; + background-color: var(--color-gray-disabled); height: 2px; margin-top: 39px; margin-left: -20px; @@ -128,20 +128,22 @@ .message_input { flex: 1; padding: 12px 16px; - border: 1px solid #E0E0E0; border-radius: 12px; outline: none; font-size: 14px; + font-family: var(--font-family); + background-color: var(--color-bg); + color: var(--color-text); } .message_input:focus { - border-color: #666; + border-color: var(--color-primary); } .send_button { padding: 12px 12px; - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; border-radius: 12px; cursor: pointer; @@ -150,6 +152,7 @@ display: flex; align-items: center; justify-content: center; + font-family: var(--font-family); } .send_button_icon { @@ -160,43 +163,45 @@ } .send_button:disabled { - background-color: #ccc; + background-color: var(--color-gray-disabled); cursor: not-allowed; opacity: 0.6; } .message_input:disabled { - background-color: #f5f5f5; + background-color: var(--color-surface); cursor: not-allowed; opacity: 0.6; } .loading_message { padding: 10px; - background-color: #e3f2fd; - border-left: 4px solid #2196f3; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; margin-bottom: 10px; } .loading_message p { margin: 0; - color: #1976d2; + color: var(--color-secondary); font-size: 14px; + font-family: var(--font-family); } .error_message { padding: 10px; - background-color: #ffebee; - border-left: 4px solid #f44336; + background-color: var(--color-red-disabled); + border-left: 4px solid var(--color-red); border-radius: 4px; margin-bottom: 10px; } .error_message p { margin: 0; - color: #c62828; + color: var(--color-red); font-size: 14px; + font-family: var(--font-family); } .message { @@ -204,25 +209,26 @@ padding: 12px; border-radius: 12px; max-width: 80%; + font-family: var(--font-family); } .message_user { - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); margin-left: auto; margin-right: 0; } .message_assistant { - background-color: #f5f5f5; - color: #333; + background-color: var(--color-surface); + color: var(--color-text); margin-left: 0; margin-right: auto; } .message_system { - background-color: #fff3cd; - color: #856404; + background-color: var(--color-primary-disabled); + color: var(--color-primary); margin-left: auto; margin-right: auto; text-align: center; @@ -233,6 +239,7 @@ font-weight: 600; margin-bottom: 4px; opacity: 0.8; + font-family: var(--font-family); } .message_content { @@ -240,40 +247,44 @@ line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; + font-family: var(--font-family); } .message_timestamp { font-size: 11px; margin-top: 4px; opacity: 0.6; + font-family: var(--font-family); } .placeholder_text { text-align: center; - color: #999; + color: var(--color-gray); font-style: italic; margin: 20px 0; + font-family: var(--font-family); } .workflow_status { padding: 8px 12px; - background-color: #e8f5e8; - border-left: 4px solid #4caf50; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; margin-bottom: 10px; } .workflow_status p { margin: 0; - color: #2e7d32; + color: var(--color-secondary); font-size: 13px; font-style: italic; + font-family: var(--font-family); } .completion_message { padding: 10px 12px; - background-color: #e8f5e8; - border-left: 4px solid #4caf50; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; margin-bottom: 10px; text-align: center; @@ -281,14 +292,15 @@ .completion_message p { margin: 0 0 10px 0; - color: #2e7d32; + color: var(--color-secondary); font-size: 14px; font-weight: 600; + font-family: var(--font-family); } .new_workflow_button { - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; border-radius: 8px; padding: 8px 16px; @@ -296,9 +308,10 @@ font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; + font-family: var(--font-family); } .new_workflow_button:hover { - background-color: #2d6b73; + background-color: var(--color-secondary-hover); } diff --git a/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatArea.module.css b/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatArea.module.css index cb23fb4..2b81981 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatArea.module.css +++ b/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatArea.module.css @@ -4,6 +4,7 @@ flex: 1; min-height: 0; overflow: hidden; + font-family: var(--font-family); } .chat_messages { @@ -26,12 +27,12 @@ } .chat_messages::-webkit-scrollbar-thumb { - background: #ccc; + background: var(--color-gray-disabled); border-radius: 3px; } .chat_messages::-webkit-scrollbar-thumb:hover { - background: #999; + background: var(--color-gray); } .messages_container { @@ -65,26 +66,29 @@ .message_input { flex: 1; padding: 12px 16px; - border: 1px solid #E0E0E0; + border: 1px solid var(--color-gray-disabled); border-radius: 12px; outline: none; font-size: 14px; + font-family: var(--font-family); + background-color: var(--color-bg); + color: var(--color-text); } .message_input:focus { - border-color: #666; + border-color: var(--color-secondary); } .message_input:disabled { - background-color: #f5f5f5; + background-color: var(--color-surface); cursor: not-allowed; opacity: 0.6; } .attachment_button { padding: 11px 11px; - background-color: #e6f2f2; - color: var(--Brand-Green-Green, #3A8088); + background-color: var(--color-secondary-disabled); + color: var(--color-secondary); border: none; border-radius: 12px; cursor: pointer; @@ -94,15 +98,16 @@ align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease; + font-family: var(--font-family); } .attachment_button:hover { - background-color: #cce3e4; - color: var(--Brand-Green-Green, #3A8088); + background-color: var(--color-secondary-hover); + color: var(--color-bg); } .attachment_button:disabled { - background-color: #f5f5f5; + background-color: var(--color-surface); cursor: not-allowed; opacity: 0.6; } @@ -120,11 +125,12 @@ align-items: center; gap: 6px; padding: 6px 8px; - background-color: #f0f8f8; - border: 1px solid #cce7e8; + background-color: var(--color-secondary-disabled); + border: 1px solid var(--color-secondary); border-radius: 8px; font-size: 12px; - color: #3a8088; + color: var(--color-secondary); + font-family: var(--font-family); } .attached_file_icon { @@ -141,7 +147,7 @@ .attached_file_remove { background: none; border: none; - color: #999; + color: var(--color-gray); cursor: pointer; padding: 0; margin-left: 4px; @@ -155,15 +161,15 @@ } .attached_file_remove:hover { - background-color: #ddd; - color: #666; + background-color: var(--color-gray-disabled); + color: var(--color-text); } .send_button { padding: 12px 12px; - background-color: var(--Brand-Green-Green, #3A8088); - color: white; - border: 1px solid var(--Brand-Green-Green, #3A8088); + background-color: var(--color-secondary); + color: var(--color-bg); + border: 1px solid var(--color-secondary); border-radius: 12px; cursor: pointer; font-size: 14px; @@ -171,10 +177,11 @@ display: flex; align-items: center; justify-content: center; + font-family: var(--font-family); } .send_button:hover { - background-color: #34737b; + background-color: var(--color-secondary-hover); } .send_button_icon { @@ -185,16 +192,16 @@ } .send_button:disabled { - background-color: #ccc; + background-color: var(--color-gray-disabled); cursor: not-allowed; opacity: 0.6; - border: 1px solid #ccc; + border: 1px solid var(--color-gray-disabled); } .stop_button { padding: 12px 12px; - background-color: #D85B65; - color: white; + background-color: var(--color-red); + color: var(--color-bg); border: none; border-radius: 12px; cursor: pointer; @@ -203,45 +210,47 @@ display: flex; align-items: center; justify-content: center; - transition: background-color 0.2s ease; + font-family: var(--font-family); } .stop_button:hover { - background-color: #c3525b; + background-color: var(--color-red-hover); } .stop_button:disabled { - background-color: #ccc; + background-color: var(--color-gray-disabled); cursor: not-allowed; opacity: 0.6; } .loading_message { padding: 10px; - background-color: #e3f2fd; - border-left: 4px solid #2196f3; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; margin-bottom: 10px; } .loading_message p { margin: 0; - color: #1976d2; + color: var(--color-secondary); font-size: 14px; + font-family: var(--font-family); } .error_message { padding: 10px; - background-color: #fceff0; - border-left: 4px solid #d85d67; + background-color: var(--color-red-disabled); + border-left: 4px solid var(--color-red); border-radius: 4px; margin-bottom: 10px; } .error_message p { margin: 0; - color: #d85d67; + color: var(--color-red); font-size: 14px; + font-family: var(--font-family); } .message { @@ -249,25 +258,26 @@ padding: 12px; border-radius: 12px; max-width: 80%; + font-family: var(--font-family); } .message_user { - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); margin-left: auto; margin-right: 0; } .message_assistant { - background-color: #f5f5f5; - color: #333; + background-color: var(--color-surface); + color: var(--color-text); margin-left: 0; margin-right: auto; } .message_system { - background-color: #fff3cd; - color: #856404; + background-color: var(--color-primary-disabled); + color: var(--color-primary); margin-left: auto; margin-right: auto; text-align: center; @@ -278,6 +288,7 @@ font-weight: 600; margin-bottom: 4px; opacity: 0.8; + font-family: var(--font-family); } .message_content { @@ -285,66 +296,72 @@ line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; + font-family: var(--font-family); } .message_timestamp { font-size: 11px; margin-top: 4px; opacity: 0.6; + font-family: var(--font-family); } .placeholder_text { text-align: center; - color: #999; + color: var(--color-gray); font-style: italic; margin: 20px 0; + font-family: var(--font-family); } .workflow_status { padding: 8px 12px; - background-color: #e6f2f2; - border-left: 4px solid #3a8088; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; - margin: 10px 0; + margin-bottom: 10px; } .workflow_status p { margin: 0; - color: #3a8088; + color: var(--color-secondary); font-size: 13px; font-style: italic; + font-family: var(--font-family); } .completion_message { padding: 10px 12px; - background-color: #e6f2f2; - border-left: 4px solid #3a8088; + background-color: var(--color-secondary-disabled); + border-left: 4px solid var(--color-secondary); border-radius: 4px; - margin: 10px 0; + margin-bottom: 10px; text-align: center; } .completion_message p { margin: 0 0 10px 0; - color: #3a8088; + color: var(--color-secondary); font-size: 14px; font-weight: 600; + font-family: var(--font-family); } .new_workflow_button { - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; - border-radius: 15px; + border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; + font-family: var(--font-family); } .new_workflow_button:hover { - background-color: #2d6b73; + background-color: var(--color-secondary-hover); } .message_documents { @@ -359,95 +376,105 @@ align-items: center; gap: 8px; padding: 8px 10px; - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - font-size: 13px; - transition: background-color 0.2s ease; + background-color: var(--color-bg); + border: 1px solid var(--color-gray-disabled); + border-radius: 6px; cursor: pointer; - text-decoration: none; - color: inherit; + transition: all 0.2s ease; + font-size: 13px; } .document_item:hover { - background-color: rgba(255, 255, 255, 0.2); + border-color: var(--color-primary); + background-color: var(--color-surface); } .message_assistant .document_item { - background-color: rgba(0, 0, 0, 0.05); - border-color: rgba(0, 0, 0, 0.1); + background-color: var(--color-bg); + border-color: var(--color-gray-disabled); } .message_assistant .document_item:hover { - background-color: rgba(0, 0, 0, 0.1); + border-color: var(--color-primary); + background-color: var(--color-surface); } .document_icon { - width: 16px; - height: 16px; + font-size: 16px; + color: var(--color-secondary); flex-shrink: 0; - opacity: 0.8; } .document_info { + flex: 1; + min-width: 0; display: flex; flex-direction: column; gap: 2px; - min-width: 0; } .document_name { font-weight: 500; - white-space: nowrap; + color: var(--color-text); overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--font-family); } .document_meta { - font-size: 11px; - opacity: 0.7; display: flex; gap: 8px; + font-size: 11px; + color: var(--color-gray); + font-family: var(--font-family); } .document_size { - white-space: nowrap; + font-size: 11px; + color: var(--color-gray); } .document_type { - white-space: nowrap; + font-size: 11px; + color: var(--color-gray); } .document_actions { display: flex; gap: 4px; - margin-left: auto; - flex-shrink: 0; + opacity: 1; + transition: opacity 0.2s ease; +} + +.document_item:hover .document_actions { + opacity: 1; } .document_action_button { + background: none; + border: none; + color: var(--color-gray); + cursor: pointer; + padding: 4px; + border-radius: 4px; + font-size: 14px; display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; - border: none; - border-radius: 6px; - background-color: rgba(255, 255, 255, 0.15); - color: inherit; - cursor: pointer; - transition: background-color 0.2s ease; - font-size: 14px; + transition: all 0.2s ease; } .document_action_button:hover { - background-color: rgba(255, 255, 255, 0.25); + background-color: var(--color-surface); + color: var(--color-text); } .message_assistant .document_action_button { - background-color: rgba(0, 0, 0, 0.08); + color: var(--color-gray); } .message_assistant .document_action_button:hover { - background-color: rgba(0, 0, 0, 0.15); + background-color: var(--color-surface); + color: var(--color-text); } \ No newline at end of file diff --git a/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatAreaMessageItem.tsx b/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatAreaMessageItem.tsx index fb65f13..2a67813 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatAreaMessageItem.tsx +++ b/src/components/Dashboard/DashboardChat/DashboardChatArea/DashboardChatAreaMessageItem.tsx @@ -64,6 +64,15 @@ const MessageItem: React.FC = ({ message, index }) => { const [previewDocument, setPreviewDocument] = useState(null); const [isPreviewOpen, setIsPreviewOpen] = useState(false); + // Debug logging to see if documents are present + console.log('MessageItem rendering:', { + messageId: message.id, + role: message.role, + hasDocuments: !!message.documents, + documentsLength: message.documents?.length || 0, + documents: message.documents + }); + const handleDocumentClick = (document: Document) => { // If there's a downloadUrl, use it; otherwise try the url const downloadLink = document.downloadUrl || document.url; diff --git a/src/components/Dashboard/DashboardChat/DashboardChatArea/FilePreviewPopup.module.css b/src/components/Dashboard/DashboardChat/DashboardChatArea/FilePreviewPopup.module.css index f13d6ca..6a9decb 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatArea/FilePreviewPopup.module.css +++ b/src/components/Dashboard/DashboardChat/DashboardChatArea/FilePreviewPopup.module.css @@ -13,7 +13,7 @@ } .popup { - background: white; + background: var(--color-bg); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); max-width: 90vw; @@ -22,6 +22,7 @@ display: flex; flex-direction: column; overflow: hidden; + font-family: var(--font-family); } .header { @@ -29,8 +30,8 @@ align-items: center; justify-content: space-between; padding: 16px 20px; - border-bottom: 1px solid #e5e7eb; - background-color: #f9fafb; + border-bottom: 1px solid var(--color-gray-disabled); + background-color: var(--color-surface); flex-shrink: 0; } @@ -38,12 +39,13 @@ margin: 0; font-size: 18px; font-weight: 600; - color: #111827; + color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 16px; + font-family: var(--font-family); } .close_button { @@ -55,7 +57,7 @@ border: none; border-radius: 8px; background-color: transparent; - color: #6b7280; + color: var(--color-gray); cursor: pointer; transition: all 0.2s ease; font-size: 18px; @@ -63,8 +65,8 @@ } .close_button:hover { - background-color: #e5e7eb; - color: #374151; + background-color: var(--color-gray-disabled); + color: var(--color-text); } .content { @@ -81,10 +83,11 @@ display: flex; align-items: center; justify-content: center; - color: #6b7280; + color: var(--color-gray); font-size: 16px; width: 100%; height: 100%; + font-family: var(--font-family); } .error { @@ -92,11 +95,12 @@ flex-direction: column; align-items: center; justify-content: center; - color: #dc2626; + color: var(--color-red); font-size: 16px; text-align: center; width: 100%; height: 100%; + font-family: var(--font-family); } .no_preview { @@ -104,11 +108,12 @@ flex-direction: column; align-items: center; justify-content: center; - color: #6b7280; + color: var(--color-gray); font-size: 16px; font-style: italic; width: 100%; height: 100%; + font-family: var(--font-family); } .image_preview { @@ -129,14 +134,14 @@ .text_preview { width: 100%; height: 100%; - background-color: #f8fafc; - border: 1px solid #e2e8f0; + background-color: var(--color-surface); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; padding: 16px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; - color: #334155; + color: var(--color-text); overflow: auto; white-space: pre-wrap; word-wrap: break-word; @@ -146,15 +151,15 @@ .enhanced_text_preview { width: 100%; height: 100%; - background-color: #ffffff; - border: 1px solid #e2e8f0; + background-color: var(--color-bg); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; padding: 32px; overflow: auto; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + font-family: var(--font-family); box-sizing: border-box; line-height: 1.7; - color: #374151; + color: var(--color-text); } .text_line { @@ -170,68 +175,70 @@ .text_header { font-weight: 600; font-size: 1.1em; - color: #1f2937; + color: var(--color-text); margin: 16px 0 8px 0; padding-bottom: 4px; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid var(--color-gray-disabled); + font-family: var(--font-family); } .text_numbered { margin: 8px 0; padding-left: 8px; - color: #4b5563; + color: var(--color-gray); + font-family: var(--font-family); } .text_bullet { margin: 4px 0; padding-left: 8px; - color: #4b5563; + color: var(--color-gray); + font-family: var(--font-family); } .text_indented { - background-color: #f8fafc; + background-color: var(--color-surface); padding: 8px 12px; margin: 4px 0; - border-left: 3px solid #d1d5db; + border-left: 3px solid var(--color-gray-disabled); border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9em; - color: #6b7280; + color: var(--color-gray); } .code_preview { width: 100%; height: 100%; - background-color: #1f2937; - border: 1px solid #374151; + background-color: var(--color-surface); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; - padding: 16px; + overflow: auto; font-family: 'Courier New', monospace; font-size: 14px; - line-height: 1.5; - color: #f9fafb; - overflow: auto; - white-space: pre-wrap; - word-wrap: break-word; + line-height: 1.4; + color: var(--color-text); box-sizing: border-box; + display: flex; + flex-direction: column; } .python_code_preview { width: 100%; height: 100%; - background-color: #0d1117; - border: 1px solid #30363d; + background-color: var(--color-surface); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; - overflow: hidden; + overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; } .code_header { - background-color: #161b22; - padding: 12px 16px; - border-bottom: 1px solid #30363d; + background-color: var(--color-gray-disabled); + padding: 8px 16px; + border-bottom: 1px solid var(--color-gray-disabled); display: flex; justify-content: space-between; align-items: center; @@ -239,41 +246,38 @@ } .code_language { - background-color: #1f6feb; - color: #ffffff; - padding: 4px 8px; - border-radius: 12px; font-size: 12px; - font-weight: 500; + font-weight: 600; + color: var(--color-text); text-transform: uppercase; letter-spacing: 0.5px; + font-family: var(--font-family); } .code_filename { - color: #7d8590; - font-size: 14px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; - font-weight: 500; + font-size: 12px; + color: var(--color-gray); + font-family: var(--font-family); } .python_code_content { - flex: 1; - margin: 0; padding: 16px; - background-color: #0d1117; - color: #e6edf3; - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; - font-size: 14px; - line-height: 1.6; overflow: auto; + flex: 1; + background-color: var(--color-bg); + font-family: 'Courier New', monospace; + font-size: 14px; + line-height: 1.4; + color: var(--color-text); white-space: pre; - tab-size: 4; + word-wrap: break-word; } .python_code_content code { - font-family: inherit; - font-size: inherit; - color: inherit; + font-family: 'Courier New', monospace; + font-size: 14px; + line-height: 1.4; + color: var(--color-text); background: none; padding: 0; } @@ -281,157 +285,156 @@ .markdown_preview { width: 100%; height: 100%; - background-color: #ffffff; - border: 1px solid #e2e8f0; + background-color: var(--color-bg); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; - padding: 24px; + padding: 32px; overflow: auto; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + font-family: var(--font-family); box-sizing: border-box; + line-height: 1.6; + color: var(--color-text); } .markdown_preview h1 { font-size: 2em; - font-weight: 600; + font-weight: 700; margin: 0 0 16px 0; + color: var(--color-text); + border-bottom: 2px solid var(--color-gray-disabled); padding-bottom: 8px; - border-bottom: 1px solid #e2e8f0; - color: #1f2937; } .markdown_preview h2 { font-size: 1.5em; font-weight: 600; margin: 24px 0 12px 0; - color: #374151; + color: var(--color-text); } .markdown_preview h3 { font-size: 1.25em; font-weight: 600; - margin: 20px 0 8px 0; - color: #4b5563; + margin: 20px 0 10px 0; + color: var(--color-text); } .markdown_preview h4, .markdown_preview h5, .markdown_preview h6 { - font-size: 1em; + font-size: 1.1em; font-weight: 600; margin: 16px 0 8px 0; - color: #6b7280; + color: var(--color-text); } .markdown_preview p { margin: 0 0 16px 0; line-height: 1.7; - color: #374151; } .markdown_preview ul, .markdown_preview ol { margin: 0 0 16px 20px; - padding-left: 20px; + line-height: 1.7; } .markdown_preview li { margin: 4px 0; line-height: 1.6; - color: #374151; } .markdown_preview blockquote { margin: 16px 0; padding: 12px 16px; - background-color: #f8fafc; - border-left: 4px solid #3b82f6; - color: #4b5563; + border-left: 4px solid var(--color-primary); + background-color: var(--color-surface); font-style: italic; + color: var(--color-gray); } .markdown_preview code { - background-color: #f1f5f9; - padding: 2px 4px; + background-color: var(--color-surface); + padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; - font-size: 0.875em; - color: #dc2626; + font-size: 0.9em; + color: var(--color-secondary); } .markdown_preview pre { - background-color: #1f2937; - color: #f9fafb; - padding: 16px; + background-color: var(--color-surface); + border: 1px solid var(--color-gray-disabled); border-radius: 8px; - overflow-x: auto; + padding: 16px; margin: 16px 0; + overflow-x: auto; font-family: 'Courier New', monospace; - font-size: 0.875em; - line-height: 1.5; + font-size: 14px; + line-height: 1.4; } .markdown_preview pre code { background: none; padding: 0; - color: inherit; border-radius: 0; + color: var(--color-text); } .markdown_preview table { - width: 100%; border-collapse: collapse; + width: 100%; margin: 16px 0; - border: 1px solid #e2e8f0; + border: 1px solid var(--color-gray-disabled); } .markdown_preview th, .markdown_preview td { + border: 1px solid var(--color-gray-disabled); padding: 8px 12px; text-align: left; - border: 1px solid #e2e8f0; } .markdown_preview th { - background-color: #f8fafc; + background-color: var(--color-surface); font-weight: 600; - color: #374151; } .markdown_preview td { - color: #4b5563; + background-color: var(--color-bg); } .markdown_preview a { - color: #3b82f6; + color: var(--color-secondary); text-decoration: underline; } .markdown_preview a:hover { - color: #1d4ed8; + color: var(--color-secondary-hover); } .markdown_preview hr { border: none; height: 1px; - background-color: #e2e8f0; + background-color: var(--color-gray-disabled); margin: 24px 0; } .markdown_preview strong { - font-weight: 600; - color: #1f2937; + font-weight: 700; + color: var(--color-text); } .markdown_preview em { font-style: italic; - color: #4b5563; + color: var(--color-gray); } /* Responsive design */ @media (max-width: 768px) { .popup { width: 95vw; - max-height: 95vh; + height: 85vh; } .header { @@ -447,6 +450,6 @@ } .pdf_preview { - height: 400px; + height: calc(100% - 60px); } } \ No newline at end of file diff --git a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistory.module.css b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistory.module.css index e3fd1d3..d98e673 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistory.module.css +++ b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistory.module.css @@ -3,6 +3,7 @@ display: flex; flex-direction: column; overflow: hidden; + font-family: var(--font-family); } .container { @@ -24,16 +25,18 @@ .history_title { font-size: 18px; font-weight: 600; - color: #333; + color: var(--color-text); margin: 0; + font-family: var(--font-family); } .workflowCount { font-size: 14px; - color: #666; - background-color: #f5f5f5; + color: var(--color-gray); + background-color: var(--color-surface); padding: 4px 12px; border-radius: 12px; + font-family: var(--font-family); } .scrollableContent { @@ -53,9 +56,10 @@ align-items: center; justify-content: center; height: 200px; - color: #999; + color: var(--color-gray); font-size: 16px; text-align: center; + font-family: var(--font-family); } .loadingContainer { @@ -66,8 +70,9 @@ } .loadingText { - color: #666; + color: var(--color-gray); font-size: 16px; + font-family: var(--font-family); } .errorContainer { @@ -80,24 +85,26 @@ } .errorText { - color: #f44336; + color: var(--color-red); font-size: 16px; text-align: center; + font-family: var(--font-family); } .retryButton { - background-color: #2196F3; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background-color 0.2s ease; + font-family: var(--font-family); } .retryButton:hover { - background-color: #1976D2; + background-color: var(--color-secondary-hover); } /* Scrollbar styling */ @@ -106,15 +113,15 @@ } .scrollableContent::-webkit-scrollbar-track { - background: #f1f1f1; + background: var(--color-surface); border-radius: 3px; } .scrollableContent::-webkit-scrollbar-thumb { - background: #c1c1c1; + background: var(--color-gray-disabled); border-radius: 3px; } .scrollableContent::-webkit-scrollbar-thumb:hover { - background: #a8a8a8; + background: var(--color-gray); } \ No newline at end of file diff --git a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.module.css b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.module.css index 6368ded..6ee1e96 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.module.css +++ b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.module.css @@ -1,14 +1,15 @@ .workflowItem { - background: white; + background: var(--color-bg); border-radius: 12px; - border: 1px solid #e0e0e0; + border: 1px solid var(--color-gray-disabled); margin-bottom: 12px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + font-family: var(--font-family); } .workflowItem:hover { - border-color: #d0d0d0; + border-color: var(--color-gray); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } @@ -31,9 +32,10 @@ .workflowId { font-size: 16px; font-weight: 600; - color: #333; + color: var(--color-text); margin: 0 0 8px 0; line-height: 1.2; + font-family: var(--font-family); } .workflowMeta { @@ -48,15 +50,18 @@ font-weight: 600; padding: 4px 8px; border-radius: 12px; - background-color: #f4f3f5; + background-color: var(--color-secondary-disabled); + color: var(--color-secondary); + font-family: var(--font-family); } .workflowRound { font-size: 12px; - color: #888098; - background-color: #f4f3f5; + color: var(--color-gray); + background-color: var(--color-surface); padding: 2px 6px; border-radius: 8px; + font-family: var(--font-family); } .workflowDates { @@ -67,9 +72,10 @@ .workflowDate { font-size: 12px; - color: #666; + color: var(--color-gray); margin: 0; line-height: 1.3; + font-family: var(--font-family); } .workflowDescription { @@ -79,27 +85,28 @@ .messagePreview { margin-bottom: 8px; padding: 8px; - background-color: #f4f3f5; + background-color: var(--color-surface); border-radius: 6px; - border-left: 3px solid #888098; + border-left: 3px solid var(--color-gray); } - .previewText { font-size: 13px; - color: #888098; + color: var(--color-gray); margin: 0; line-height: 1.4; word-break: break-word; font-style: italic; + font-family: var(--font-family); } .workflowName { font-size: 14px; - color: #555; + color: var(--color-gray); margin: 0; line-height: 1.4; word-break: break-word; + font-family: var(--font-family); } .actionButtons { @@ -128,32 +135,33 @@ } .resumeButton { - background-color: #3a8088; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); } .resumeButton:hover:not(:disabled) { - background-color: #34737b; + background-color: var(--color-secondary-hover); transform: translateY(-1px); } .deleteButton { - background-color: #d85b65; - color: white; + background-color: var(--color-red); + color: var(--color-bg); } .deleteButton:hover:not(:disabled) { - background-color: #c3525b; + background-color: var(--color-red-hover); transform: translateY(-1px); } .deletingMessage { padding: 8px 16px; - background-color: #fff3cd; - border-top: 1px solid #e0e0e0; - color: #856404; + background-color: var(--color-primary-disabled); + border-top: 1px solid var(--color-gray-disabled); + color: var(--color-primary); font-size: 12px; text-align: center; + font-family: var(--font-family); } @media (max-width: 768px) { diff --git a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.tsx b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.tsx index 37c7f22..a13d917 100644 --- a/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.tsx +++ b/src/components/Dashboard/DashboardChat/DashboardChatHistory/DashboardChatHistoryItem.tsx @@ -53,18 +53,18 @@ function DashboardChatHistoryItem({ workflow, onDelete, onResume }: DashboardCha case 'completed': case 'finished': case 'done': - return '#3a8088'; + return 'var(--color-secondary)'; case 'running': case 'processing': - return '#888098'; + return 'var(--color-gray)'; case 'error': case 'failed': - return '#d85d67'; + return 'var(--color-red)'; case 'stopped': case 'cancelled': - return '#d85d67'; + return 'var(--color-red)'; default: - return '#888098'; + return 'var(--color-gray)'; } }; @@ -73,17 +73,17 @@ function DashboardChatHistoryItem({ workflow, onDelete, onResume }: DashboardCha case 'completed': case 'finished': case 'done': - return '#e6f2f2'; + return 'var(--color-secondary-disabled)'; case 'running': case 'processing': - return '#f0f0f5'; + return 'var(--color-gray-disabled)'; case 'error': case 'failed': case 'stopped': case 'cancelled': - return '#fceff0'; + return 'var(--color-red-disabled)'; default: - return '#f0f0f5'; + return 'var(--color-gray-disabled)'; } }; diff --git a/src/components/Dashboard/DashboardLog/DashboardLog.module.css b/src/components/Dashboard/DashboardLog/DashboardLog.module.css index 51f2e0f..577ec53 100644 --- a/src/components/Dashboard/DashboardLog/DashboardLog.module.css +++ b/src/components/Dashboard/DashboardLog/DashboardLog.module.css @@ -4,8 +4,7 @@ flex-direction: column; align-self: stretch; border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + background: var(--color-bg); position: relative; box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); height: 100%; @@ -40,36 +39,36 @@ border: none; background: none; outline: none; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); cursor: default; } .log_title_collapsed { opacity: 50%; - color: #A0A0A0; + color: var(--color-gray); } .collapseIcon { cursor: pointer; display: flex; align-items: center; - color: #666; + color: var(--color-gray); } .collapseIcon:hover { - color: #333; + color: var(--color-gray); } .horizontalLine { width: 100%; - background-color: black; + background-color: var(--color-gray); height: 2px; margin-top: 19px; } .horizontalLineLight { width: calc(100%); - background-color: #F1F1F1; + background-color: var(--color-gray); height: 2px; margin-top: 39px; margin-left: -20px; diff --git a/src/components/Dashboard/DashboardPrompt/DashboardPrompt.module.css b/src/components/Dashboard/DashboardPrompt/DashboardPrompt.module.css index b182aa9..cbe517c 100644 --- a/src/components/Dashboard/DashboardPrompt/DashboardPrompt.module.css +++ b/src/components/Dashboard/DashboardPrompt/DashboardPrompt.module.css @@ -4,12 +4,12 @@ flex-direction: column; align-self: stretch; border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + background: var(--color-bg); position: relative; box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); width: 100%; transition: height 0.3s ease; + font-family: var(--font-family); } .dashboard_prompt:not(.collapsed) { @@ -46,8 +46,9 @@ border: none; background: none; outline: none; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); transition: opacity 0.3s ease, color 0.3s ease; + font-family: var(--font-family); } .prompt_button_inactive { @@ -56,7 +57,7 @@ .prompt_button_collapsed { opacity: 50%; - color: #A0A0A0; + color: var(--color-gray); } .buttonWrapper { @@ -68,17 +69,17 @@ cursor: pointer; display: flex; align-items: center; - color: #666; + color: var(--color-gray); transition: color 0.3s ease; } .expandIcon:hover { - color: #333; + color: var(--color-text); } .horizontalLine { width: 100%; - background-color: black; + background-color: var(--color-text); height: 2px; margin-top: 19px; transition: opacity 0.3s ease; @@ -86,7 +87,7 @@ .horizontalLineLight { width: calc(100%); - background-color: #F1F1F1; + background-color: var(--color-gray-disabled); height: 2px; margin-top: 39px; margin-left: -20px; @@ -111,6 +112,7 @@ opacity: 1; position: relative; } + .content_collapsed { opacity: 0; max-height: 0; @@ -142,10 +144,12 @@ will-change: transform, opacity; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1); } + .collapseContent.collapsed { transform: translateY(-100%); opacity: 0; } + .collapseContent.expanded { transform: translateY(0); opacity: 1; diff --git a/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSet.module.css b/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSet.module.css index 5d9f36c..402abcb 100644 --- a/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSet.module.css +++ b/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSet.module.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; overflow: hidden; + font-family: var(--font-family); } .header { @@ -16,8 +17,8 @@ .addButton { border-radius: 30px; - background: var(--Brand-Green-Green, #3A8088); - color: white; + background: var(--color-secondary); + color: var(--color-bg); border: none; outline: none; text-align: left; @@ -28,15 +29,19 @@ display: flex; gap: 10px; align-items: center; + font-family: var(--font-family); + transition: background-color 0.2s ease; } .addButton:hover { cursor: pointer; + background: var(--color-secondary-hover); } .promptCount { font-size: 0.875rem; - color: #6b7280; + color: var(--color-gray); + font-family: var(--font-family); } .scrollableContent { @@ -57,12 +62,12 @@ } .scrollableContent::-webkit-scrollbar-thumb { - background: #ccc; + background: var(--color-gray-disabled); border-radius: 3px; } .scrollableContent::-webkit-scrollbar-thumb:hover { - background: #999; + background: var(--color-gray); } .promptsList { @@ -80,39 +85,43 @@ } .loadingText { - color: #6b7280; + color: var(--color-gray); + font-family: var(--font-family); } .errorContainer { padding: 1rem; - background-color: #fef2f2; - border: 1px solid #fecaca; + background-color: var(--color-red-disabled); + border: 1px solid var(--color-red); border-radius: 0.5rem; } .errorText { - color: #b91c1c; + color: var(--color-red); + font-family: var(--font-family); } .retryButton { margin-top: 0.5rem; padding: 0.5rem 1rem; - background-color: #dc2626; - color: white; + background-color: var(--color-red); + color: var(--color-bg); border-radius: 0.375rem; border: none; cursor: pointer; transition: background-color 0.2s; + font-family: var(--font-family); } .retryButton:hover { - background-color: #b91c1c; + background-color: var(--color-red-hover); } .emptyState { text-align: center; padding: 2rem; - color: #6b7280; + color: var(--color-gray); + font-family: var(--font-family); } diff --git a/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSetItem.module.css b/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSetItem.module.css index aafb6c9..9477ad9 100644 --- a/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSetItem.module.css +++ b/src/components/Dashboard/DashboardPrompt/DashboardPromptSet/DashboardPromptSetItem.module.css @@ -1,5 +1,5 @@ .promptItem { - background: var(--Grayscale-Light-Gray, #F9F9F9); + background: var(--color-surface); border-radius: 30px; display: flex; padding: 20px; @@ -7,7 +7,7 @@ align-items: flex-start; align-self: stretch; justify-content: top; - font-family: 'Avenir', sans-serif; + font-family: var(--font-family); gap: 11px; font-size: 14px; } @@ -28,13 +28,15 @@ .promptName { font-weight: 400; - color: #000; + color: var(--color-text); margin:0; + font-family: var(--font-family); } .promptDate { font: 14px; - color: #6b7280; + color: var(--color-gray); + font-family: var(--font-family); } .promptText { @@ -44,6 +46,8 @@ min-height: 0; opacity: 0.5; margin:0; + color: var(--color-text); + font-family: var(--font-family); } .promptText.p { @@ -60,10 +64,12 @@ .actionButton { padding: 0.5rem; border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-secondary); + color: var(--color-bg); cursor: pointer; border: none; + font-family: var(--font-family); + transition: background-color 0.2s ease; } .actionButton:disabled { @@ -73,39 +79,39 @@ .runButton { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-secondary); + color: var(--color-bg); } .runButton:hover:not(:disabled) { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-secondary-hover); + color: var(--color-bg); cursor: pointer; } .shareButton { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-secondary); + color: var(--color-bg); } .shareButton:hover:not(:disabled) { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-secondary-hover); + color: var(--color-bg); } .deleteButton { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-red); + color: var(--color-bg); } .deleteButton:hover:not(:disabled) { border-radius: 12px; - background: var(--Brand-Green-Green, #3A8088); - color: #fff; + background: var(--color-red-hover); + color: var(--color-bg); } .promptContent { @@ -120,15 +126,17 @@ .errorMessage { margin-top: 0.75rem; padding: 0.5rem; - background-color: #fef2f2; - border: 1px solid #fecaca; + background-color: var(--color-red-disabled); + border: 1px solid var(--color-red); border-radius: 0.25rem; font-size: 0.875rem; - color: #b91c1c; + color: var(--color-red); + font-family: var(--font-family); } .deletingMessage { margin-top: 0.75rem; font-size: 0.875rem; - color: #6b7280; + color: var(--color-gray); + font-family: var(--font-family); } diff --git a/src/components/Dashboard/DashboardPrompt/DashboardPromptSettings/DashboardPromptSettings.module.css b/src/components/Dashboard/DashboardPrompt/DashboardPromptSettings/DashboardPromptSettings.module.css index edd64e3..071b746 100644 --- a/src/components/Dashboard/DashboardPrompt/DashboardPromptSettings/DashboardPromptSettings.module.css +++ b/src/components/Dashboard/DashboardPrompt/DashboardPromptSettings/DashboardPromptSettings.module.css @@ -3,6 +3,7 @@ flex-direction: column; height: 100%; position: relative; + font-family: var(--font-family); } .cancelContainer { @@ -17,19 +18,20 @@ align-items: center; gap: 4px; padding: 8px 16px; - background: white; - border: 1px solid #ddd; + background: var(--color-bg); + border: 1px solid var(--color-gray-disabled); border-radius: 20px; - color: #666; + color: var(--color-gray); font-size: 14px; cursor: pointer; transition: all 0.2s; - font-family: Arial, Helvetica, sans-serif; + font-family: var(--font-family); } .cancelButton:hover { - background-color: #f5f5f5; - border-color: #ccc; + background-color: var(--color-surface); + border-color: var(--color-gray); + color: var(--color-text); } .cancelIcon { diff --git a/src/components/Dateien/DateienHinzufügen/DateienSelector.module.css b/src/components/Dateien/DateienHinzufügen/DateienSelector.module.css index fa99e69..24273b7 100644 --- a/src/components/Dateien/DateienHinzufügen/DateienSelector.module.css +++ b/src/components/Dateien/DateienHinzufügen/DateienSelector.module.css @@ -13,7 +13,7 @@ } .modal { - background: white; + background: var(--color-bg); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); max-width: 90vw; @@ -23,6 +23,7 @@ display: flex; flex-direction: column; overflow: hidden; + font-family: var(--font-family); } .header { @@ -30,8 +31,8 @@ align-items: center; justify-content: space-between; padding: 20px; - border-bottom: 1px solid #e5e7eb; - background-color: #f9fafb; + border-bottom: 1px solid var(--color-gray-disabled); + background-color: var(--color-surface); flex-shrink: 0; } @@ -39,7 +40,8 @@ margin: 0; font-size: 20px; font-weight: 600; - color: #111827; + color: var(--color-text); + font-family: var(--font-family); } .closeButton { @@ -51,15 +53,15 @@ border: none; border-radius: 8px; background-color: transparent; - color: #6b7280; + color: var(--color-gray); cursor: pointer; transition: all 0.2s ease; font-size: 18px; } .closeButton:hover { - background-color: #e5e7eb; - color: #374151; + background-color: var(--color-gray-disabled); + color: var(--color-text); } .content { @@ -71,8 +73,8 @@ .tabNavigation { display: flex; - border-bottom: 1px solid #e5e7eb; - background-color: #f9fafb; + border-bottom: 1px solid var(--color-gray-disabled); + background-color: var(--color-surface); padding: 0 20px; } @@ -80,22 +82,23 @@ padding: 12px 16px; border: none; background: none; - color: #6b7280; + color: var(--color-gray); font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap; + font-family: var(--font-family); } .tabButton:hover { - color: #374151; + color: var(--color-text); } .tabButton.active { - color: var(--Brand-Green-Green, #3A8088); - border-bottom-color: var(--Brand-Green-Green, #3A8088); + color: var(--color-secondary); + border-bottom-color: var(--color-secondary); } .actionBar { @@ -103,8 +106,8 @@ align-items: center; justify-content: space-between; padding: 16px 20px; - border-bottom: 1px solid #e5e7eb; - background-color: #ffffff; + border-bottom: 1px solid var(--color-gray-disabled); + background-color: var(--color-bg); } .selectionControls { @@ -118,24 +121,26 @@ align-items: center; gap: 8px; padding: 8px 12px; - border: 1px solid #d1d5db; + border: 1px solid var(--color-gray-disabled); border-radius: 6px; - background-color: #ffffff; - color: #374151; + background-color: var(--color-bg); + color: var(--color-text); font-size: 14px; cursor: pointer; transition: all 0.2s ease; + font-family: var(--font-family); } .selectAllButton:hover { - background-color: #f9fafb; - border-color: #9ca3af; + background-color: var(--color-surface); + border-color: var(--color-gray); } .selectionCount { font-size: 14px; - color: #6b7280; + color: var(--color-gray); font-weight: 500; + font-family: var(--font-family); } .uploadButton { @@ -145,16 +150,17 @@ padding: 10px 16px; border: none; border-radius: 8px; - background-color: var(--Brand-Green-Green, #3A8088); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; + font-family: var(--font-family); } .uploadButton:hover { - background-color: #2d6b73; + background-color: var(--color-secondary-hover); } .fileListContainer { @@ -170,13 +176,14 @@ align-items: center; justify-content: center; height: 200px; - color: #6b7280; + color: var(--color-gray); font-size: 16px; text-align: center; + font-family: var(--font-family); } .error { - color: #dc2626; + color: var(--color-red); } .selectableFileList { @@ -190,21 +197,21 @@ align-items: center; gap: 12px; padding: 12px; - border: 1px solid #e5e7eb; + border: 1px solid var(--color-gray-disabled); border-radius: 8px; - background-color: #ffffff; + background-color: var(--color-bg); cursor: pointer; transition: all 0.2s ease; } .selectableFileItem:hover { - background-color: #f9fafb; - border-color: #d1d5db; + background-color: var(--color-surface); + border-color: var(--color-primary); } .selectableFileItem.selected { - background-color: #f0f8f8; - border-color: var(--Brand-Green-Green, #3A8088); + background-color: var(--color-primary-disabled); + border-color: var(--color-primary); } .fileCheckbox { diff --git a/src/components/Dateien/DateienHinzufügen/DateienUploadTool.module.css b/src/components/Dateien/DateienHinzufügen/DateienUploadTool.module.css index b762b8e..540573e 100644 --- a/src/components/Dateien/DateienHinzufügen/DateienUploadTool.module.css +++ b/src/components/Dateien/DateienHinzufügen/DateienUploadTool.module.css @@ -14,18 +14,19 @@ .h2 { font-size: 24px; font-weight: 600; - font-family: 'Arial', sans-serif; - + font-family: var(--font-family); + color: var(--color-text); } .modal { - background: white; + background: var(--color-bg); padding: 35px 40px 30px 40px; border-radius: 30px; width: 90%; max-width: 500px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + font-family: var(--font-family); } .modalHeader { @@ -38,7 +39,8 @@ .modalHeader h2 { margin: 0; font-size: 1.5rem; - color: #333; + color: var(--color-text); + font-family: var(--font-family); } .closeButton { @@ -46,7 +48,7 @@ border: none; font-size: 1.5rem; cursor: pointer; - color: #666; + color: var(--color-gray); padding: 0.25rem; display: flex; align-items: center; @@ -54,7 +56,7 @@ } .closeButton:hover { - color: #333; + color: var(--color-text); } .closeButton:disabled { @@ -68,49 +70,52 @@ margin-bottom: 1rem; text-align: center; font-weight: 500; + font-family: var(--font-family); } .uploadStatus.success { - background-color: #e6f2f2; - color: #3a8088; - border: 1px solid #3a8088; + background-color: var(--color-secondary-disabled); + color: var(--color-secondary); + border: 1px solid var(--color-secondary); } .uploadStatus.error { - background-color: #fceff0; - color: #d85d67; - border: 1px solid #d85d67; + background-color: var(--color-red-disabled); + color: var(--color-red); + border: 1px solid var(--color-red); } .dropzone { - border: 2px dashed #ccc; + border: 2px dashed var(--color-gray-disabled); border-radius: 15px; padding: 2rem; text-align: center; cursor: pointer; margin: 1rem 0; transition: all 0.3s ease; + background-color: var(--color-bg); } .dropzone.active { - border-color: #3a8088; - background-color: #e6f2f2; + border-color: var(--color-secondary); + background-color: var(--color-secondary-disabled); } .dropzone.uploading { - border-color: #3a8088; - background-color: #e6f2f2; + border-color: var(--color-secondary); + background-color: var(--color-secondary-disabled); cursor: wait; } .uploadIcon { font-size: 3rem; - color: #666; + color: var(--color-gray); margin-bottom: 1rem; } .dropzoneText { - color: #666; + color: var(--color-gray); + font-family: var(--font-family); } .dropzoneText p { @@ -118,43 +123,41 @@ } .browseButton { - background-color: #3a8088; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; padding: 0.5rem 1rem; border-radius: 15px; cursor: pointer; - + font-family: var(--font-family); } .browseButton:hover { - background-color: #34737b; + background-color: var(--color-secondary-hover); } .browseButton:disabled { - background-color: #f4f3f5; - color: #888098; + background-color: var(--color-gray-disabled); + color: var(--color-gray); cursor: not-allowed; } - - .uploadButton { - background-color: #3a8088; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; padding: 0.5rem 1rem; border-radius: 15px; cursor: pointer; - + font-family: var(--font-family); } .uploadButton:hover { - background-color: #34737b; + background-color: var(--color-secondary-hover); } .uploadButton:disabled { - background-color: #f4f3f5; - color: #888098; + background-color: var(--color-gray-disabled); + color: var(--color-gray); cursor: not-allowed; } \ No newline at end of file diff --git a/src/components/Dateien/DateienItem.module.css b/src/components/Dateien/DateienItem.module.css index d423336..607ed9e 100644 --- a/src/components/Dateien/DateienItem.module.css +++ b/src/components/Dateien/DateienItem.module.css @@ -4,12 +4,13 @@ height: 60px; padding: 0px 16px; justify-content: space-between; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); transition: background-color 0.2s ease; + font-family: var(--font-family); } .fileItem:hover { - background-color: #f9f9f9; + background-color: var(--color-surface); } /* Column layout matching the header structure */ @@ -18,8 +19,9 @@ align-items: center; overflow: hidden; font-weight: 500; - color: #333; + color: var(--color-text); padding-left: 14px; /* Align with table header */ + font-family: var(--font-family); } .fileName span { @@ -31,28 +33,31 @@ .fileType { font-size: 14px; - color: #666; + color: var(--color-gray); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; flex-direction: column; gap: 2px; + font-family: var(--font-family); } .fileSource { font-size: 12px; - color: #888; + color: var(--color-gray-hover); font-weight: 400; opacity: 0.8; + font-family: var(--font-family); } .fileSize { font-size: 14px; - color: #666; + color: var(--color-gray); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + font-family: var(--font-family); } .fileDateWithActions { @@ -64,16 +69,17 @@ .fileDate { font-size: 14px; - color: #666; + color: var(--color-gray); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 8px; + font-family: var(--font-family); } .icon { font-size: 18px; - color: #757575; + color: var(--color-gray); flex-shrink: 0; } @@ -95,34 +101,35 @@ border: none; border-radius: 4px; background-color: transparent; - color: var(--text-color-secondary, #666); + color: var(--color-gray); cursor: pointer; transition: all 0.2s ease; min-width: 32px; + font-family: var(--font-family); } .downloadButton:hover:not(:disabled), .deleteButton:hover:not(:disabled), .previewButton:hover:not(:disabled) { - background-color: var(--background-color-hover, #e8e8e8); - color: var(--text-color-primary, #333); + background-color: var(--color-surface); + color: var(--color-text); } .deleteButton:hover:not(:disabled) { - color: #dc2626; + color: var(--color-red); } .previewButton:hover:not(:disabled) { - color: #3b82f6; + color: var(--color-secondary); } .deleteButton.confirm { - background-color: #fee2e2; - color: #dc2626; + background-color: var(--color-red-disabled); + color: var(--color-red); } .deleteButton.confirm:hover:not(:disabled) { - background-color: #fecaca; + background-color: var(--color-red-hover); } .downloadButton:disabled, @@ -139,18 +146,19 @@ .downloadButton.downloading, .deleteButton.deleting { - background-color: var(--background-color-light, #f5f5f5); + background-color: var(--color-surface); } .actionText { font-size: 12px; - color: var(--text-color-secondary, #666); + color: var(--color-gray); animation: pulse 1.5s infinite; white-space: nowrap; + font-family: var(--font-family); } .deleteButton.confirm .actionText { - color: #dc2626; + color: var(--color-red); animation: none; } diff --git a/src/components/Dateien/DateienLists.module.css b/src/components/Dateien/DateienLists.module.css index 279015a..b1cd95e 100644 --- a/src/components/Dateien/DateienLists.module.css +++ b/src/components/Dateien/DateienLists.module.css @@ -4,8 +4,9 @@ justify-content: center; align-items: center; padding: 60px 20px; - color: var(--text-color-secondary, #666); + color: var(--color-gray); font-style: italic; + font-family: var(--font-family); } /* Files table container */ @@ -30,8 +31,8 @@ position: sticky; top: 0; z-index: 10; - background-color: #fff; - border-bottom: 1px solid #f1f1f1; + background-color: var(--color-bg); + border-bottom: 1px solid var(--color-gray-disabled); margin-bottom: 10px; flex-shrink: 0; } @@ -42,15 +43,16 @@ align-items: center; font-weight: 500; font-size: 14px; - color: #333; + color: var(--color-text); cursor: pointer; white-space: nowrap; padding-left: 0; transition: color 0.2s ease; + font-family: var(--font-family); } .headerCell:hover { - color: var(--Grayscale-Black, #24262B); + color: var(--color-primary); } /* Adjust first column for icon space */ @@ -62,12 +64,12 @@ .sortIcon { margin-left: 6px; font-size: 14px; - color: #666; + color: var(--color-gray); transition: color 0.2s ease; } .headerCell:hover .sortIcon { - color: var(--Grayscale-Black, #24262B); + color: var(--color-primary); } /* File list styling */ @@ -85,7 +87,7 @@ .filesList li { display: grid !important; grid-template-columns: 45% 15% 15% 25%; - border-bottom: 1px solid #f1f1f1; + border-bottom: 1px solid var(--color-gray-disabled); height: 60px; padding: 0 16px; align-items: center; @@ -94,7 +96,7 @@ } .filesList li:hover { - background-color: #f9f9f9; + background-color: var(--color-surface); } diff --git a/src/components/Mitglieder/MitgliederItem.module.css b/src/components/Mitglieder/MitgliederItem.module.css index ecc7396..3b6cf50 100644 --- a/src/components/Mitglieder/MitgliederItem.module.css +++ b/src/components/Mitglieder/MitgliederItem.module.css @@ -4,7 +4,8 @@ height: 70px; padding: 0px 16px; justify-content: space-between; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); + font-family: var(--font-family); } .userProfile { @@ -13,7 +14,7 @@ .profileIcon { font-size: 36px; - color: var(--Grayscale-Gray, #E9E9E9); + color: var(--color-gray-disabled); } .userInfo { @@ -27,6 +28,8 @@ .userName { margin: 0; font-size: 14px; + color: var(--color-text); + font-family: var(--font-family); } .userEmail, @@ -34,20 +37,21 @@ margin: 0; font-size: 12px; font-weight: light; + color: var(--color-gray); + font-family: var(--font-family); } .actions { display: flex; - align-items: center; justify-content: center; } .editBtn:hover { - color: var(--Brand-Green-Green, #3A8088); + color: var(--color-secondary); } .deleteBtn:hover { - color: var(--Brand-Green-Green, #3A8088); + color: var(--color-red); } \ No newline at end of file diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index 91b8f51..7f7e6cf 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/src/components/Sidebar/Sidebar.module.css @@ -1,37 +1,43 @@ /* Allgemeine Stile */ .sidebarContainer { border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + border: none; + background: var(--color-bg); box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); width: 240px; - flex-shrink: 0; margin-top: 51px; margin-left: 49px; + padding-bottom: 1px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .sidebar { display: flex; - width: 200px; + width: 240px; flex-direction: column; align-items: flex-start; flex-shrink: 0; margin: 0 0 30px 0; + font-family: var(--font-family); } .logoContainer { display: flex; - width: 200px; - height: 60px; - padding: 13px 20px; + width: 100%; + height: auto; + padding: 30px 20px 7px 20px; justify-content: center; - align-items: flex-start; + align-items: center; flex-shrink: 0; } .logo { - max-width: 100%; + max-width: 80%; height: auto; + color: var(--color-primary); } diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index dce007f..7ea3f1e 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -22,7 +22,7 @@ const Sidebar: React.FC = ({ data }) => { return (
- Logo + Logo
diff --git a/src/components/Sidebar/SidebarData.tsx b/src/components/Sidebar/SidebarData.tsx index 5136b3b..72f3748 100644 --- a/src/components/Sidebar/SidebarData.tsx +++ b/src/components/Sidebar/SidebarData.tsx @@ -49,8 +49,8 @@ const useSidebarData = () => { }, { id: '7', - name: 'Settings', - link: '', + name: 'Einstellungen', + link: '/einstellungen', icon: GoGear, }, { diff --git a/src/components/Sidebar/SidebarItem.module.css b/src/components/Sidebar/SidebarItem.module.css index 4641ad2..cdb2a7e 100644 --- a/src/components/Sidebar/SidebarItem.module.css +++ b/src/components/Sidebar/SidebarItem.module.css @@ -12,24 +12,24 @@ padding: 0 3px 0 15px; align-items: center; gap: 9px; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); } .menu li:hover, .menu li.active { - background: var(--Brand-Purple-Purple, #5F59D4); - color: white; + background: var(--color-secondary); + color: var(--color-bg); border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .menu li:hover a, .menu li.active a { - color: white; + color: var(--color-bg); text-decoration: none; } .menu li a { text-decoration: none; - font-family: Avenir, Helvetica, Arial, sans-serif; + font-family: var(--font-family); font-size: 14px; font-style: normal; font-weight: 500; diff --git a/src/components/Sidebar/SidebarSubmenu.module.css b/src/components/Sidebar/SidebarSubmenu.module.css index 2d128a4..480ce38 100644 --- a/src/components/Sidebar/SidebarSubmenu.module.css +++ b/src/components/Sidebar/SidebarSubmenu.module.css @@ -1,6 +1,6 @@ .submenu { position: relative; - background-color: white; + background-color: var(--color-bg); overflow: hidden; } @@ -19,7 +19,7 @@ .verticalLine { width: 1px; - background-color: #F1F1F1; + background-color: var(--color-gray-disabled); margin-left: 46px; margin-right: -40px; } @@ -32,7 +32,7 @@ .submenuList li { width: 153px; height: 20px; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); margin: 4px 0; position: relative; overflow: hidden; @@ -44,10 +44,11 @@ font-style: normal; font-weight: 500; line-height: normal; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); text-decoration: none; display: block; overflow: hidden; + font-family: var(--font-family); } .textContainer { diff --git a/src/components/Sidebar/SidebarUser.module.css b/src/components/Sidebar/SidebarUser.module.css index e5b67c6..e6e9e41 100644 --- a/src/components/Sidebar/SidebarUser.module.css +++ b/src/components/Sidebar/SidebarUser.module.css @@ -1,12 +1,13 @@ .user_section { display: flex; - width: 200px; + width: 240px; height: auto; min-height: 100px; padding: 20px; flex-direction: column; align-items: flex-start; gap: 8px; + font-family: var(--font-family); } .user_info { @@ -18,7 +19,7 @@ .user_icon { font-size: 40px; - color: #666; + color: var(--color-gray); flex-shrink: 0; } @@ -32,32 +33,37 @@ margin: 0; font-size: 16pt; line-height: 1.2; + color: var(--color-text); + font-family: var(--font-family); } .user_section p { margin: 0; font-size: 0.9rem; - color: #666; + color: var(--color-gray); + font-family: var(--font-family); } .logout_button { margin-top: 4px; padding: 8px 16px; - background-color: var(--Brand-Purple-Purple, #5F59D4); - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); border: none; - border-radius: 4px; + border-radius: 15px; cursor: pointer; font-size: 14px; + font-family: var(--font-family); transition: background-color 0.2s; width: 100%; } .logout_button:hover { + background-color: var(--color-secondary-hover); cursor: pointer; } .logout_button:active { - background-color: #b71c1c; + background-color: var(--color-red); } diff --git a/src/hooks/useAuthentication.ts b/src/hooks/useAuthentication.ts index b0094a6..7882250 100644 --- a/src/hooks/useAuthentication.ts +++ b/src/hooks/useAuthentication.ts @@ -32,7 +32,7 @@ export function useAuth() { // Create a custom axios instance for this request const instance = axios.create({ - baseURL: 'https://gateway.poweron-center.net', + baseURL: import.meta.env.VITE_API_BASE_URL, withCredentials: true, headers: { 'Content-Type': 'application/x-www-form-urlencoded' diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..34d6aee --- /dev/null +++ b/src/index.css @@ -0,0 +1,18 @@ +/* Global CSS Reset */ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; +} + +#root { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/pages/Dashboard.module.css b/src/pages/Dashboard.module.css index e560362..2b3199e 100644 --- a/src/pages/Dashboard.module.css +++ b/src/pages/Dashboard.module.css @@ -3,12 +3,17 @@ display: flex; flex-direction: column; gap: 20px; + font-family: var(--font-family); + width: 98%; + max-height: calc(100vh - 100px); + } .chatLogContainer { display: flex; gap: 20px; transition: all 0.3s ease; + } .chatLogContainer.expanded { @@ -26,15 +31,15 @@ } .chatArea45vh { - height: 45vh; -} - -.chatArea60vh { height: 60vh; } +.chatArea60vh { + height: 85vh; +} + .logArea15vh { - height: 15vh; + height: 10vh; } .logArea25vh { @@ -46,7 +51,7 @@ } .logArea60vh { - height: 60vh; + height: 85vh; } .promptArea30vh { diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 8d1c68f..3ed4cad 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -63,13 +63,13 @@ function Dashboard () { // Memoize style objects to prevent infinite re-renders const promptStyle = useMemo(() => ({ - marginBottom: !isPromptAreaCollapsed ? "40px" : "0" + marginBottom: !isPromptAreaCollapsed ? "0px" : "0" }), [isPromptAreaCollapsed]); const chatStyle = useMemo(() => ({ width: isChatExpanded ? "100%" : "calc(50% - 10px)", flex: isChatExpanded ? "none" : "1", - marginBottom: isChatExpanded ? "40px" : "0" + marginBottom: isChatExpanded ? "0px" : "0" }), [isChatExpanded]); const logStyle = useMemo(() => ({ diff --git a/src/pages/Dateien/Dateien.module.css b/src/pages/Dateien/Dateien.module.css index 3faa985..4e798eb 100644 --- a/src/pages/Dateien/Dateien.module.css +++ b/src/pages/Dateien/Dateien.module.css @@ -5,17 +5,18 @@ flex-direction: column; align-self: stretch; border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + border: 1px solid var(--color-gray-disabled); + background: var(--color-bg); position: relative; box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); max-height: calc(100vh - 100px); overflow: hidden; + font-family: var(--font-family); } .horizontalLineLight { width: calc(100% + 60px); - background-color: #F1F1F1; + background-color: var(--color-gray-disabled); height: 1px; margin-left: -30px; margin-bottom: 0; @@ -34,8 +35,8 @@ .datei_hinzufügen_button { border-radius: 30px; - background: #3a8080; - color: #fff; + background: var(--color-secondary); + color: var(--color-bg); border: none; outline: none; text-align: left; @@ -48,11 +49,12 @@ align-items: center; flex-shrink: 0; transition: background-color 0.2s ease; + font-family: var(--font-family); } .datei_hinzufügen_button:hover { cursor: pointer; - background-color: #34737b; + background-color: var(--color-secondary-hover); } .add_icon { @@ -87,19 +89,19 @@ transition: all 0.2s ease; white-space: nowrap; position: relative; + font-family: var(--font-family); } .tabButtonActive { - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); } .tabButtonInactive { - color: #A0A0A0; + color: var(--color-gray); } .tabButtonInactive:hover { - background-color: var(--background-color-hover, #f5f5f5); - color: var(--text-color-primary, #333); + color: var(--color-text); } .tabUnderline { @@ -107,7 +109,7 @@ bottom: -2px; left: 0; height: 1px; - background-color: var(--Grayscale-Black, #24262B); + background-color: var(--color-text); border-radius: 1px; } diff --git a/src/pages/Einstellungen/Einstellungen.module.css b/src/pages/Einstellungen/Einstellungen.module.css new file mode 100644 index 0000000..776edfa --- /dev/null +++ b/src/pages/Einstellungen/Einstellungen.module.css @@ -0,0 +1,170 @@ +.einstellungenContainer { + margin: 51px 49px 0 36px; + display: flex; + flex-direction: column; + align-self: stretch; + justify-content: top; + max-height: calc(100vh - 100px); + overflow: hidden; + font-family: var(--font-family); + width: 98%; +} + +.contentWrapper { + flex: 1; + overflow-y: auto; + padding: 0px 0; +} + +.settingsCard { + display: flex; + padding: 30px; + flex-direction: column; + align-self: stretch; + border-radius: 30px; + background: var(--color-bg); + position: relative; + box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); + width: 100%; + margin: 0 auto; + gap: 30px; +} + +.title { + font-size: 2rem; + font-weight: 600; + color: var(--color-text); + margin: 0 0 20px 0; + font-family: var(--font-family); +} + +.settingsSection { + display: flex; + flex-direction: column; + gap: 20px; +} + +.sectionTitle { + font-size: 1.25rem; + font-weight: 500; + color: var(--color-text); + margin: 0; + padding-bottom: 10px; + border-bottom: 1px solid var(--color-gray-disabled); + font-family: var(--font-family); +} + +.settingItem { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background: var(--color-surface); + border-radius: 20px; + gap: 20px; +} + +.settingInfo { + display: flex; + flex-direction: column; + gap: 5px; + flex: 1; +} + +.settingLabel { + font-size: 1rem; + font-weight: 500; + color: var(--color-text); + font-family: var(--font-family); +} + +.settingDescription { + font-size: 0.875rem; + color: var(--color-gray); + font-family: var(--font-family); +} + +.themeToggle { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 20px; + border-radius: 25px; + border: 2px solid var(--color-gray-disabled); + background: var(--color-bg); + color: var(--color-text); + cursor: pointer; + transition: all 0.3s ease; + font-family: var(--font-family); + font-size: 0.875rem; + font-weight: 500; + min-width: 120px; +} + +.themeToggle:hover { + border-color: var(--color-secondary); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15); +} + +.themeToggle.light { + background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%); +} + +.themeToggle.dark { + background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%); + border-color: var(--color-primary); +} + +.themeToggle.dark:hover { + border-color: var(--color-primary-hover); + box-shadow: 0 4px 12px rgba(178, 102, 255, 0.15); +} + +.toggleSlider { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--color-secondary); + transition: all 0.3s ease; +} + +.dark .toggleSlider { + background: var(--color-primary); +} + +.toggleIcon { + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; +} + +.toggleLabel { + color: var(--color-text); + font-weight: 500; +} + +/* Responsive design */ +@media (max-width: 768px) { + .einstellungenContainer { + margin: 20px; + } + + .settingsCard { + padding: 20px; + } + + .settingItem { + flex-direction: column; + align-items: flex-start; + gap: 15px; + } + + .themeToggle { + align-self: flex-end; + } +} \ No newline at end of file diff --git a/src/pages/Einstellungen/Einstellungen.tsx b/src/pages/Einstellungen/Einstellungen.tsx new file mode 100644 index 0000000..36c0313 --- /dev/null +++ b/src/pages/Einstellungen/Einstellungen.tsx @@ -0,0 +1,82 @@ +import React, { useState, useEffect } from 'react'; +import styles from './Einstellungen.module.css'; + +function Einstellungen() { + const [isDarkMode, setIsDarkMode] = useState(false); + + // Load saved theme preference on component mount + useEffect(() => { + const savedTheme = localStorage.getItem('theme'); + const prefersDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches); + setIsDarkMode(prefersDark); + applyTheme(prefersDark); + }, []); + + const applyTheme = (isDark: boolean) => { + if (isDark) { + document.documentElement.classList.add('dark-theme'); + document.documentElement.classList.remove('light-theme'); + } else { + document.documentElement.classList.add('light-theme'); + document.documentElement.classList.remove('dark-theme'); + } + document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); + }; + + const toggleTheme = () => { + const newIsDarkMode = !isDarkMode; + setIsDarkMode(newIsDarkMode); + applyTheme(newIsDarkMode); + localStorage.setItem('theme', newIsDarkMode ? 'dark' : 'light'); + }; + + return ( +
+
+
+

Einstellungen

+ +
+

Darstellung

+ +
+
+ Theme + + Wechseln Sie zwischen hellem und dunklem Modus + +
+ + +
+
+ +
+

Über

+
+
+ Version + 1.0.0 +
+
+
+
+
+
+ ); +} + +export default Einstellungen; \ No newline at end of file diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css index 9aa5cd2..10d4319 100644 --- a/src/pages/Home.module.css +++ b/src/pages/Home.module.css @@ -1,14 +1,13 @@ .homeContainer { position: relative; - background-color: #F7F7F7; - min-height: calc(100vh - 15px); - max-height: calc(100vh - 15px); - width: 100%; - font-family: Arial, Helvetica, sans-serif; + background-color: var(--color-surface); + min-height: 100vh; + max-height: 100vh; + width: 100vw; + font-family: var(--font-family); z-index: 0; overflow: hidden; - padding: 0 49px 0 36px; - width: calc(100% - 49px - 36px); + padding: 0 49px 0 0; } .homeContainer::before { @@ -16,10 +15,9 @@ position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background-image: url('../../assets/background.png'); - background-repeat: repeat; - background-size: 50px; - opacity: 0.2; /* Adjust this to your liking */ + background-image: radial-gradient(circle, var(--color-gray-disabled) 1px, transparent 1px); + background-size: 8px 8px; + opacity: 0.4; z-index: -1; pointer-events: none; } @@ -35,4 +33,5 @@ .body { display: flex; max-width: 100vw; + height: 100vh; } \ No newline at end of file diff --git a/src/pages/Login.module.css b/src/pages/Login.module.css index 9cf55d6..854b927 100644 --- a/src/pages/Login.module.css +++ b/src/pages/Login.module.css @@ -1,7 +1,7 @@ .container { display: flex; min-height: 100vh; - background-color: #ffffff; + background-color: var(--color-bg); } .leftPanel { @@ -9,12 +9,12 @@ display: flex; flex-direction: column; padding: 3rem; - background-color: #ffffff; + background-color: var(--color-bg); } .rightPanel { flex: 1; - background-color: #ffffff; + background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; @@ -38,7 +38,8 @@ font-size: 2rem; font-weight: 600; margin-bottom: 2rem; - color: #1a1a1a; + color: var(--color-text); + font-family: var(--font-family); } .loginForm { @@ -50,21 +51,23 @@ .input { width: 100%; padding: 12px 16px; - border: 1px solid #e0e0e0; + border: 1px solid var(--color-gray-disabled); border-radius: 8px; font-size: 1rem; transition: all 0.2s ease; - background-color: #ffffff; + background-color: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); } .input:focus { outline: none; - border-color: #0078d4; - box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1); + border-color: var(--color-secondary); + box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.1); } .input::placeholder { - color: #757575; + color: var(--color-gray); } .button { @@ -77,24 +80,25 @@ transition: all 0.2s ease; border: none; text-align: center; + font-family: var(--font-family); } .primaryButton { - background-color: #0078d4; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); } .primaryButton:hover { - background-color: #006cbd; + background-color: var(--color-secondary-hover); } .microsoftButton { - background-color: #2f2f2f; - color: white; + background-color: var(--color-text); + color: var(--color-bg); } .microsoftButton:hover { - background-color: #1f1f1f; + background-color: var(--color-gray); } .divider { @@ -108,13 +112,14 @@ .divider::after { content: ''; flex: 1; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid var(--color-gray-disabled); } .divider span { padding: 0 1rem; - color: #757575; + color: var(--color-gray); font-size: 0.9rem; + font-family: var(--font-family); } .registerLink { @@ -126,18 +131,20 @@ } .registerLink span { - color: #757575; + color: var(--color-gray); font-size: 0.9rem; + font-family: var(--font-family); } .textButton { background: none; border: none; - color: #0078d4; + color: var(--color-secondary); font-weight: 500; cursor: pointer; padding: 0; font-size: 0.9rem; + font-family: var(--font-family); } .textButton:hover { @@ -161,12 +168,13 @@ button:disabled { } .error { - color: #dc3545; - background-color: #f8d7da; - border: 1px solid #f5c6cb; + color: var(--color-red); + background-color: var(--color-red-disabled); + border: 1px solid var(--color-red); border-radius: 8px; padding: 12px; margin-bottom: 1rem; font-size: 0.9rem; text-align: center; + font-family: var(--font-family); } diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index a6c1ed1..aa176a3 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -3,8 +3,8 @@ import { loginRequest } from '../auth/authConfig'; import { useNavigate, useLocation } from 'react-router-dom'; import { useState, useEffect } from 'react'; import styles from './Login.module.css'; -import agentDiagram from '../assets/Frame 43.png'; -import logo from '../assets/LogoPowerOn.png'; +import agentDiagram from '/logos/Frame 43.png'; +import logo from '/logos/PowerOn.png'; import { useAuth, useMsalAuth } from '../hooks/useAuthentication'; function Login() { diff --git a/src/pages/Mitglieder/Mitglieder.module.css b/src/pages/Mitglieder/Mitglieder.module.css index b22b137..848edca 100644 --- a/src/pages/Mitglieder/Mitglieder.module.css +++ b/src/pages/Mitglieder/Mitglieder.module.css @@ -5,17 +5,18 @@ flex-direction: column; align-self: stretch; border-radius: 30px; - border: 1px solid var(--f-1-f-1-f-1, #F1F1F1); - background: var(--Grayscale-True-White, #FFF); + border: 1px solid var(--color-gray-disabled); + background: var(--color-bg); position: relative; box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10); max-height: calc(100vh - 100px); overflow: hidden; + font-family: var(--font-family); } .horizontalLineLight { width: 100%; - background-color: #F1F1F1; + background-color: var(--color-gray-disabled); height: 1px; margin-top: 90px; margin-left: -30px; @@ -27,16 +28,17 @@ gap: 30px; align-items: flex-start; height: 62px; - color: var(--Grayscale-Black, #24262B); + color: var(--color-text); padding-top: 30px; padding-bottom: 30px; + font-family: var(--font-family); } .mitglieder_hinzufügen_button { border-radius: 30px; - background: var(--Grayscale-Gray, #E9E9E9); - + background: var(--color-gray-disabled); + color: var(--color-text); border: none; outline: none; text-align: left; @@ -48,10 +50,13 @@ display: flex; gap: 10px; align-items: center; + font-family: var(--font-family); + transition: background-color 0.2s ease; } .mitglieder_hinzufügen_button:hover { cursor: pointer; + background-color: var(--color-gray); } .add_icon { @@ -72,9 +77,11 @@ align-items: center; height: 60px; /* Specific height for each item */ padding: 0 16px; - border-bottom: 1px solid #F1F1F1; + border-bottom: 1px solid var(--color-gray-disabled); font-size: 16px; transition: background-color 0.2s ease; + color: var(--color-text); + font-family: var(--font-family); } .actions { diff --git a/src/pages/Register.module.css b/src/pages/Register.module.css index af82fcd..ecb11c2 100644 --- a/src/pages/Register.module.css +++ b/src/pages/Register.module.css @@ -1,7 +1,7 @@ .container { display: flex; min-height: 100vh; - background-color: #ffffff; + background-color: var(--color-bg); } .leftPanel { @@ -9,12 +9,12 @@ display: flex; flex-direction: column; padding: 3rem; - background-color: #ffffff; + background-color: var(--color-bg); } .rightPanel { flex: 1; - background-color: #ffffff; + background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; @@ -38,7 +38,8 @@ font-size: 2rem; font-weight: 600; margin-bottom: 2rem; - color: #1a1a1a; + color: var(--color-text); + font-family: var(--font-family); } .registerForm { @@ -56,27 +57,30 @@ .inputGroup label { font-size: 0.9rem; font-weight: 500; - color: #1a1a1a; + color: var(--color-text); + font-family: var(--font-family); } .input { width: 100%; padding: 12px 16px; - border: 1px solid #e0e0e0; + border: 1px solid var(--color-gray-disabled); border-radius: 8px; font-size: 1rem; transition: all 0.2s ease; - background-color: #ffffff; + background-color: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); } .input:focus { outline: none; - border-color: #0078d4; - box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1); + border-color: var(--color-secondary); + box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.1); } .input::placeholder { - color: #757575; + color: var(--color-gray); } .button { @@ -90,30 +94,32 @@ border: none; text-align: center; margin-top: 1rem; + font-family: var(--font-family); } .primaryButton { - background-color: #0078d4; - color: white; + background-color: var(--color-secondary); + color: var(--color-bg); } .primaryButton:hover { - background-color: #006cbd; + background-color: var(--color-secondary-hover); } .primaryButton:disabled { - background-color: #cccccc; + background-color: var(--color-gray-disabled); cursor: not-allowed; } .error { - color: #dc3545; - background-color: #f8d7da; - border: 1px solid #f5c6cb; + color: var(--color-red); + background-color: var(--color-red-disabled); + border: 1px solid var(--color-red); border-radius: 8px; padding: 12px; font-size: 0.9rem; text-align: center; + font-family: var(--font-family); } .loginLink { @@ -123,22 +129,24 @@ gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.5rem; - border-top: 1px solid #e0e0e0; + border-top: 1px solid var(--color-gray-disabled); } .loginLink span { - color: #757575; + color: var(--color-gray); font-size: 0.9rem; + font-family: var(--font-family); } .textButton { background: none; border: none; - color: #0078d4; + color: var(--color-secondary); font-weight: 500; cursor: pointer; padding: 0; font-size: 0.9rem; + font-family: var(--font-family); } .textButton:hover { @@ -159,7 +167,7 @@ /* Required field indicator */ label[htmlFor]::after { content: ' *'; - color: #dc3545; + color: var(--color-red); } .msalButton { @@ -169,21 +177,23 @@ label[htmlFor]::after { gap: 10px; width: 100%; padding: 10px; - background-color: #fff; - border: 1px solid #ccc; + background-color: var(--color-bg); + border: 1px solid var(--color-gray-disabled); border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; margin-bottom: 20px; + color: var(--color-text); + font-family: var(--font-family); } .msalButton:hover { - background-color: #f5f5f5; + background-color: var(--color-surface); } .msalButton:disabled { - background-color: #f5f5f5; + background-color: var(--color-surface); cursor: not-allowed; } @@ -203,11 +213,12 @@ label[htmlFor]::after { .divider::after { content: ''; flex: 1; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--color-gray-disabled); } .divider span { - padding: 0 10px; - color: #666; - font-size: 14px; + padding: 0 1rem; + color: var(--color-gray); + font-size: 0.9rem; + font-family: var(--font-family); } diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 9de5715..c77d10b 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styles from './Register.module.css'; -import logo from '../assets/LogoPowerOn.png'; -import agentDiagram from '../assets/Frame 43.png'; +import logo from '/logos/PowerOn.png'; +import agentDiagram from '/logos/Frame 43.png'; import { useRegister, useMsalRegister } from '../hooks/useAuthentication'; interface RegisterFormData {