wip darkmode

This commit is contained in:
Ahmed Bouhuolia
2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions

View File

@@ -166,7 +166,7 @@ const DashboardConstrantTable = styled(DataTable)`
.table {
.thead {
.th {
background: #fff;
// background: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 13px;

View File

@@ -173,13 +173,14 @@ const DetailsBarSkeletonBase = styled.div`
const AccountBalanceItemWrap = styled.div`
margin-left: 18px;
color: #5f6d86;
// color: #5f6d86;
`;
const AccountTransactionDetailsWrap = styled.div`
display: flex;
background: #fff;
border-bottom: 1px solid #d2dce2;
background: var(--color-bank-transactions-details-bar-background);
color: var(--color-bank-transactions-details-bar-text);
border-bottom: 1px solid var(--color-bank-transactions-details-bar-divider);
padding: 0 22px;
height: 42px;
align-items: center;
@@ -192,7 +193,7 @@ const AccountSwitchText = styled.div`
const AccountBalanceAmount = styled.span`
font-weight: 600;
display: inline-block;
color: rgb(31, 50, 85);
// color: rgb(31, 50, 85);
margin-left: 10px;
`;

View File

@@ -11,10 +11,10 @@ const Box = styled.div`
`;
const CashflowTransactionsTableCard = styled.div`
border: 2px solid #f0f0f0;
background: var(--color-bank-transactions-content-background);
border: 2px solid var(--color-bank-transactions-content-border);
border-radius: 10px;
padding: 30px 18px;
background: #fff;
flex: 0 1;
`;

View File

@@ -2,9 +2,9 @@ import styled from 'styled-components';
export const AccountTransactionsCard = styled.div`
border: 2px solid #f0f0f0;
border: 2px solid var(--color-bank-transactions-content-border);
background: var(--color-bank-transactions-content-background);
border-radius: 10px;
padding: 30px 18px;
background: #fff;
flex: 0 1;
`;

View File

@@ -1,11 +1,24 @@
.root{
.root {
--color-background: #fff;
--color-background: #c5cbd3;
--color-border: #e1e2e8;
--color-border: rgba(255, 255, 255, 0.2);
--color-text: var(--color-dark-gray1);
min-height: 26px;
border-radius: 15px;
font-size: 13px;
padding: 0 10px;
&:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)) {
background: #fff;
border: 1px solid #e1e2e8;
&:global(.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal)) {
background: var(--color-background);
color: var(--color-text);
border: 1px solid var(--color-border);
& :global(.bp4-icon) {
color: var(--color-text);
}
}
}
}

View File

@@ -2,7 +2,7 @@
:global .table{
.thead {
.th {
background: #fff;
// background: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
@@ -22,7 +22,7 @@
.tbody-inner {
.tr .td{
border-bottom: 1px solid #ececec;
border-bottom-width: 1px;
}
}
}

View File

@@ -45,6 +45,6 @@ export const CategorizeTransactionFormFooter = R.compose(withBankingActions)(
);
const Root = styled.div`
border-top: 1px solid #c7d5db;
border-top: 1px solid var(--color-aside-divider);
padding: 14px 20px;
`;

View File

@@ -5,17 +5,13 @@
padding-bottom: 60px;
}
.transaction {
}
.matchBar{
padding: 12px 14px;
background: #fff;
border-bottom: 1px solid #E1E2E9;
background: var(--color-bank-transaction-matching-aside-header);
border-bottom: 1px solid var(--color-bank-transaction-matching-divider);
&:not(:first-of-type) {
border-top: 1px solid #E1E2E9;
border-top: 1px solid var(--color-bank-transaction-matching-divider);
}
}
@@ -25,16 +21,16 @@
}
.footer {
background-color: #fff;
background-color: var(--color-bank-transaction-matching-aside-footer);
}
.footerActions {
padding: 14px 16px;
border-top: 1px solid #d8d9d9;
border-top: 1px solid var(--color-bank-transaction-matching-divider);
}
.footerTotal {
padding: 8px 16px;
border-top: 1px solid #d8d9d9;
border-top: 1px solid var(--color-bank-transaction-matching-divider);
line-height: 24px;
}

View File

@@ -7,8 +7,8 @@
height: calc(100dvh - 144px);
}
.tabs :global .bp4-tab-list{
background: #fff;
border-bottom: 1px solid #c7d5db;
// background: #fff;
border-bottom: 1px solid var(--color-aside-divider);
padding: 0 22px;
}

View File

@@ -1,52 +1,68 @@
.root {
--item-background: #fff;
--item-background: var(--color-dark-gray4);
.root{
background: #fff;
--item-border: #d6dbe3;
--item-border: rgba(255, 255, 255, 0.2);
--item-active-border: #88abdb;
--item-label-text: #252a33;
--item-label-text: var(--color-light-gray4);
--item-date-text: #5c7080;
--item-date-text: var(--color-light-gray1);
background: var(--item-background);
border-radius: 5px;
border: 1px solid #D6DBE3;
border: 1px solid var(--item-border);
padding: 10px 16px;
cursor: pointer;
&.active{
border-color: #88ABDB;
&.active {
border-color: var(--item-active-border);
box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
.label,
.date {
color: rgb(21, 82, 200),
color: rgb(21, 82, 200);
}
}
&:hover:not(.active){
&:hover:not(.active) {
border-color: #c0c0c0;
}
}
.checkbox:global(.bp4-control.bp4-checkbox){
.checkbox:global(.bp4-control.bp4-checkbox) {
margin: 0;
}
.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
box-shadow: 0 0 0 1px #CBCBCB;
.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
box-shadow: 0 0 0 1px #cbcbcb;
}
.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
margin-right: 4px;
margin-left: 0;
height: 16px;
width: 16px;
}
.checkbox:global(.bp4-control.bp4-checkbox) :global input:checked ~ .bp4-control-indicator{
box-shadow: 0 0 0 1px #0069ff;
.checkbox:global(.bp4-control.bp4-checkbox)
:global
input:checked
~ .bp4-control-indicator {
box-shadow: 0 0 0 1px #0069ff;
}
.label {
color: #252A33;
font-size: 15px;
color: var(--item-label-text);
font-size: 15px;
}
.label :global strong {
font-weight: 500;
font-variant-numeric:tabular-nums;
font-variant-numeric: tabular-nums;
}
.date {
font-size: 12px;
color: #5C7080;
}
color: var(--item-date-text);
}

View File

@@ -11,7 +11,7 @@
.footer {
padding: 11px 20px;
border-top: 1px solid #ced4db;
border-top: 1px solid var(--color-aside-divider);
}
.form{