From 0477133cdaac1417a7f71cc633dbec7595217cab Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 21 Oct 2025 00:14:31 +0200 Subject: [PATCH] feat: darkmode skeleton and universal search --- package.json | 2 +- packages/server/package.json | 4 +- packages/webapp/package.json | 7 +- .../webapp/src/components/Forms/index.tsx | 3 +- packages/webapp/src/style/_variables.scss | 27 +++++-- .../webapp/src/style/components/Skeleton.scss | 14 ++-- .../src/style/components/UniversalSearch.scss | 5 +- .../src/style/pages/Dashboard/Dashboard.scss | 2 +- pnpm-lock.yaml | 74 ++++++++++++++++++- 9 files changed, 116 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 228c83b2a..7596fc1f8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dev:server": "lerna run dev --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\" --scope \"@bigcapital/email-components\"", "build:server": "lerna run build --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\" --scope \"@bigcapital/email-components\"", "serve:server": "lerna run serve --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\"", - "server2:start": "lerna run start:dev --scope \"@bigcapital/server2\"", + "server:start": "lerna run start:dev --scope \"@bigcapital/server\"", "test:watch": "lerna run test:watch", "test:e2e": "lerna run test:e2e", "start:debug": "lerna run start:debug", diff --git a/packages/server/package.json b/packages/server/package.json index a3d138ac7..79a1fc39d 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -1,5 +1,5 @@ { - "name": "@bigcapital/server2", + "name": "@bigcapital/server", "version": "0.0.1", "description": "", "author": "", @@ -48,6 +48,7 @@ "@supercharge/promise-pool": "^3.2.0", "@types/multer": "^1.4.11", "@types/nodemailer": "^6.4.17", + "@types/passport-google-oauth20": "^2.0.16", "@types/passport-local": "^1.0.38", "@types/ramda": "^0.30.2", "accounting": "^0.4.1", @@ -90,6 +91,7 @@ "object-hash": "^2.0.3", "objection": "^3.1.5", "passport": "^0.7.0", + "passport-google-oauth20": "^2.0.0", "passport-headerapikey": "^1.2.2", "passport-jwt": "^4.0.1", "passport-local": "^1.0.0", diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 4af5297ec..200cca730 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -3,9 +3,9 @@ "version": "0.10.2", "private": true, "dependencies": { - "@bigcapital/utils": "*", - "@bigcapital/pdf-templates": "*", "@bigcapital/email-components": "*", + "@bigcapital/pdf-templates": "*", + "@bigcapital/utils": "*", "@blueprintjs-formik/core": "^0.3.7", "@blueprintjs-formik/datetime": "^0.3.7", "@blueprintjs-formik/select": "^0.3.5", @@ -21,6 +21,7 @@ "@craco/craco": "^5.9.0", "@emotion/css": "^11.13.4", "@emotion/react": "^11.13.3", + "@react-oauth/google": "^0.12.2", "@reduxjs/toolkit": "^1.2.5", "@stripe/connect-js": "^3.3.12", "@stripe/react-connect-js": "^3.3.13", @@ -38,8 +39,8 @@ "@types/node": "^14.14.9", "@types/ramda": "^0.28.14", "@types/react": "18.3.4", - "@types/react-dom": "18.3.0", "@types/react-body-classname": "^1.1.7", + "@types/react-dom": "18.3.0", "@types/react-helmet": "^6.1.11", "@types/react-redux": "^7.1.24", "@types/react-router-dom": "^5.3.3", diff --git a/packages/webapp/src/components/Forms/index.tsx b/packages/webapp/src/components/Forms/index.tsx index c638ac029..456f58a0d 100644 --- a/packages/webapp/src/components/Forms/index.tsx +++ b/packages/webapp/src/components/Forms/index.tsx @@ -5,4 +5,5 @@ export * from './BlueprintFormik'; export * from './InputPrependText'; export * from './InputPrependButton'; export * from './MoneyInputGroup'; -export * from './FRichEditor'; \ No newline at end of file +export * from './FRichEditor'; +export * from './Select'; \ No newline at end of file diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss index 17ffa9d3a..c26f54269 100644 --- a/packages/webapp/src/style/_variables.scss +++ b/packages/webapp/src/style/_variables.scss @@ -69,6 +69,7 @@ $ns: bp4; // Main Dashboard. --color-dashboard-insider-background: #fbfbfb; --color-dashboard-topbar-background: #fff; + --color-dashboard-fallback-loading-background: #fbfbfb; --color-dashboard-topbar-border-color: #c7d5db; --color-dashboard-datatable-background: #fff; --color-dashboard-datatable-border: #d2dce2; @@ -242,7 +243,9 @@ $ns: bp4; // Universal search --color-universal-search-background: #fff; --color-universal-search-footer-divider: #d3dce2; + --color-universal-search-icon: #5c707f; --color-universal-search-tag-background: #708392; + --color-universal-search-tag-text: #fff; --color-universal-search-menu-border: #d3dce2; // Content tabs @@ -255,9 +258,7 @@ $ns: bp4; // Aside --color-aside-background: #fff; - --color-aside-title-background: #fff; - --color-aside-divider: #E1E2E9; // App shell @@ -284,6 +285,13 @@ $ns: bp4; --color-drawer-header-text: #354152; --color-drawer-insider-background: #fbfbfb; --color-drawer-tabs-background: #fff; + + // Skeleton + --color-skeleton-background-start: rgba(206, 217, 224, 0.3); + --color-skeleton-background-end: rgba(92, 112, 128, 0.3); + --color-skeleton-border-start: rgba(206, 217, 224, 0.3); + --color-skeleton-border-end: rgba(92, 112, 128, 0.3); + --color-skeleton-border-radius: 2px; } $pt-popover-box-shadow: @@ -360,6 +368,7 @@ body.bp4-dark { // Main Dashboard. --color-dashboard-insider-background: var(--color-dark-gray1); --color-dashboard-topbar-background: var(--color-dark-gray1); + --color-dashboard-fallback-loading-background: var(--color-dark-gray1); --color-dashboard-topbar-border-color: transparent; --color-dashboard-datatable-background: var(--color-dark-gray1); --color-dashboard-datatable-border: var(--color-dark-gray3); @@ -436,6 +445,7 @@ body.bp4-dark { --color-financial-report-background: var(--color-dark-gray2); + // Datatable --color-datatable-text: var(--color-white); --color-datatable-constrant-text: var(--color-light-gray2); @@ -544,9 +554,9 @@ body.bp4-dark { // Universal search --color-universal-search-background: var(--color-dark-gray3); --color-universal-search-footer-divider: var(--color-dark-gray4); - --color-universal-search-tag-background: #708392; - --color-universal-search-tag-background: var(--color-dark-gray4); - --color-universal-search-menu-border: #d3dce2; + --color-universal-search-icon: rgba(255, 255, 255, 0.25); + --color-universal-search-tag-background: rgba(255, 255, 255, 0.15); + --color-universal-search-tag-text: var(--color-white); --color-universal-search-menu-border: rgba(255, 255, 255, 0.15); // Content tabs @@ -594,6 +604,13 @@ body.bp4-dark { --color-drawer-header-text: #fff; --color-drawer-insider-background: transparent; --color-drawer-tabs-background: transparent; + + // Skeleton + --color-skeleton-background-start: rgba(255, 255, 255, 0.1); + --color-skeleton-background-end: rgba(255, 255, 255, 0.2); + --color-skeleton-border-start: rgba(255, 255, 255, 0.1); + --color-skeleton-border-end: rgba(255, 255, 255, 0.2); + --color-skeleton-border-radius: 2px; } $pt-popover-box-shadow: diff --git a/packages/webapp/src/style/components/Skeleton.scss b/packages/webapp/src/style/components/Skeleton.scss index bc05ef965..0d988ddd7 100644 --- a/packages/webapp/src/style/components/Skeleton.scss +++ b/packages/webapp/src/style/components/Skeleton.scss @@ -2,21 +2,21 @@ @keyframes skeleton-glow { 0% { - background: rgba(206,217,224,.3); - border-color: rgba(206,217,224,.3); + background: var(--color-skeleton-background-start); + border-color: var(--color-skeleton-border-start); } to { - background: rgba(92,112,128,.3); - border-color: rgba(92,112,128,.3); + background: var(--color-skeleton-background-end); + border-color: var(--color-skeleton-border-end); } } .skeleton{ animation: skeleton-glow 1s linear infinite alternate; - background: rgba(206,217,224,.3); + background: var(--color-skeleton-background-start); background-clip: padding-box; - border-color: rgba(206,217,224,.3); - border-radius: 2px; + border-color: var(--color-skeleton-border-start); + border-radius: var(--color-skeleton-border-radius); box-shadow: none; color: transparent; diff --git a/packages/webapp/src/style/components/UniversalSearch.scss b/packages/webapp/src/style/components/UniversalSearch.scss index 3f07a8b49..a9562e096 100644 --- a/packages/webapp/src/style/components/UniversalSearch.scss +++ b/packages/webapp/src/style/components/UniversalSearch.scss @@ -69,7 +69,7 @@ .bp4-input-group { .bp4-icon { margin: 16px; - color: #5c707f; + color: var(--color-universal-search-icon); svg { stroke-width: 2; @@ -139,6 +139,7 @@ .bp4-tag { background: var(--color-universal-search-tag-background); + color: var(--color-universal-search-tag-text); } &--arrows { .bp4-tag { @@ -148,7 +149,7 @@ margin-left: 4px; svg { - fill: #fff; + fill: var(--color-universal-search-tag-text); height: 100%; display: block; width: 100%; diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss index 2673aa662..9b960ed84 100644 --- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss +++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss @@ -399,8 +399,8 @@ $dashboard-views-bar-height: 44px; &__fallback-loading { display: flex; flex-direction: column; + background-color: var(--color-dashboard-fallback-loading-background); height: 100%; - background-color: #fbfbfb; .bp4-spinner { margin: auto; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 992d7d645..20b03e37e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -120,6 +120,9 @@ importers: '@types/nodemailer': specifier: ^6.4.17 version: 6.4.17 + '@types/passport-google-oauth20': + specifier: ^2.0.16 + version: 2.0.16 '@types/passport-local': specifier: ^1.0.38 version: 1.0.38 @@ -246,6 +249,9 @@ importers: passport: specifier: ^0.7.0 version: 0.7.0 + passport-google-oauth20: + specifier: ^2.0.0 + version: 2.0.0 passport-headerapikey: specifier: ^1.2.2 version: 1.2.2 @@ -439,6 +445,9 @@ importers: '@emotion/react': specifier: ^11.13.3 version: 11.13.3(@types/react@18.3.4)(react@18.3.1) + '@react-oauth/google': + specifier: ^0.12.2 + version: 0.12.2(react-dom@18.3.1)(react@18.3.1) '@reduxjs/toolkit': specifier: ^1.2.5 version: 1.9.7(react-redux@7.2.9)(react@18.3.1) @@ -8606,6 +8615,16 @@ packages: react: 18.3.1 dev: false + /@react-oauth/google@0.12.2(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@redis/bloom@1.2.0(@redis/client@1.6.0): resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==} peerDependencies: @@ -11815,9 +11834,23 @@ packages: resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} dev: true + /@types/oauth@0.9.6: + resolution: {integrity: sha512-H9TRCVKBNOhZZmyHLqFt9drPM9l+ShWiqqJijU1B8P3DX3ub84NjxDuy+Hjrz+fEca5Kwip3qPMKNyiLgNJtIA==} + dependencies: + '@types/node': 20.5.1 + dev: false + /@types/parse-json@4.0.2: resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} + /@types/passport-google-oauth20@2.0.16: + resolution: {integrity: sha512-ayXK2CJ7uVieqhYOc6k/pIr5pcQxOLB6kBev+QUGS7oEZeTgIs1odDobXRqgfBPvXzl0wXCQHftV5220czZCPA==} + dependencies: + '@types/express': 5.0.0 + '@types/passport': 1.0.17 + '@types/passport-oauth2': 1.8.0 + dev: false + /@types/passport-local@1.0.38: resolution: {integrity: sha512-nsrW4A963lYE7lNTv9cr5WmiUD1ibYJvWrpE13oxApFsRt77b0RdtZvKbCdNIY4v/QZ6TRQWaDDEwV1kCTmcXg==} dependencies: @@ -11826,6 +11859,14 @@ packages: '@types/passport-strategy': 0.2.38 dev: false + /@types/passport-oauth2@1.8.0: + resolution: {integrity: sha512-6//z+4orIOy/g3zx17HyQ71GSRK4bs7Sb+zFasRoc2xzlv7ZCJ+vkDBYFci8U6HY+or6Zy7ajf4mz4rK7nsWJQ==} + dependencies: + '@types/express': 5.0.0 + '@types/oauth': 0.9.6 + '@types/passport': 1.0.17 + dev: false + /@types/passport-strategy@0.2.38: resolution: {integrity: sha512-GC6eMqqojOooq993Tmnmp7AUTbbQSgilyvpCYQjT+H6JfG/g6RGc7nXEniZlp0zyKJ0WUdOiZWLBZft9Yug1uA==} dependencies: @@ -13953,6 +13994,11 @@ packages: resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==} engines: {node: ^4.5.0 || >= 5.9} + /base64url@3.0.1: + resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==} + engines: {node: '>=6.0.0'} + dev: false + /base@0.11.2: resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==} engines: {node: '>=0.10.0'} @@ -21360,7 +21406,7 @@ packages: dependencies: copy-anything: 2.0.6 parse-node-version: 1.0.1 - tslib: 2.8.0 + tslib: 2.8.1 optionalDependencies: errno: 0.1.8 graceful-fs: 4.2.11 @@ -22959,6 +23005,10 @@ packages: ufo: 1.5.4 dev: true + /oauth@0.10.2: + resolution: {integrity: sha512-JtFnB+8nxDEXgNyniwz573xxbKSOu3R8D40xQKqcjwJ2CDkYqUDI53o6IuzDJBx60Z8VKCm271+t8iFjakrl8Q==} + dev: false + /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -23438,6 +23488,13 @@ packages: engines: {node: '>=0.10.0'} dev: false + /passport-google-oauth20@2.0.0: + resolution: {integrity: sha512-KSk6IJ15RoxuGq7D1UKK/8qKhNfzbLeLrG3gkLZ7p4A6DBCcv7xpyQwuXtWdpyR0+E0mwkpjY1VfPOhxQrKzdQ==} + engines: {node: '>= 0.4.0'} + dependencies: + passport-oauth2: 1.8.0 + dev: false + /passport-headerapikey@1.2.2: resolution: {integrity: sha512-4BvVJRrWsNJPrd3UoZfcnnl4zvUWYKEtfYkoDsaOKBsrWHYmzTApCjs7qUbncOLexE9ul0IRiYBFfBG0y9IVQA==} dependencies: @@ -23459,6 +23516,17 @@ packages: passport-strategy: 1.0.0 dev: false + /passport-oauth2@1.8.0: + resolution: {integrity: sha512-cjsQbOrXIDE4P8nNb3FQRCCmJJ/utnFKEz2NX209f7KOHPoX18gF7gBzBbLLsj2/je4KrgiwLLGjf0lm9rtTBA==} + engines: {node: '>= 0.4.0'} + dependencies: + base64url: 3.0.1 + oauth: 0.10.2 + passport-strategy: 1.0.0 + uid2: 0.0.4 + utils-merge: 1.0.1 + dev: false + /passport-strategy@1.0.0: resolution: {integrity: sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==} engines: {node: '>= 0.4.0'} @@ -29117,6 +29185,10 @@ packages: dev: true optional: true + /uid2@0.0.4: + resolution: {integrity: sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==} + dev: false + /uid@2.0.2: resolution: {integrity: sha512-u3xV3X7uzvi5b1MncmZo3i2Aw222Zk1keqLA1YkHldREkAhAqi65wuPfe7lHx8H/Wzy+8CE7S7uS3jekIM5s8g==} engines: {node: '>=8'}