QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: darkmode skeleton and universal search

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-21 00:14:31 +02:00
parent ce01b8645b
commit 0477133cda
9 changed files with 116 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/webapp/src/components/Forms/index.tsx
View File

@@ -5,4 +5,5 @@ export * from './BlueprintFormik';
export * from './InputPrependText';
export * from './InputPrependButton';
export * from './MoneyInputGroup';
export * from './FRichEditor';
export * from './FRichEditor';
export * from './Select';

27
packages/webapp/src/style/_variables.scss
View File

@@ -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:

14
packages/webapp/src/style/components/Skeleton.scss
View File

@@ -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;

5
packages/webapp/src/style/components/UniversalSearch.scss
View File

@@ -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%;

2
packages/webapp/src/style/pages/Dashboard/Dashboard.scss
View File

@@ -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;