diff --git a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss index 41963b02bd..fb562180e8 100644 --- a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss +++ b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss @@ -3,44 +3,9 @@ .task { background-color: $pure-white; &--icon { - font-size: 24px; + font-size: 20px; padding-top: 4px; color: $blue-black; - - &__warning { - font-size: 20px; - position: relative; - top: -2px; - left: -5px; - } - - &__expense { - font-size: 20px; - position: relative; - top: -6px; - left: -8px; - } - - &__card { - font-size: 20px; - position: relative; - top: -6px; - left: -8px; - } - - &__advance { - position: relative; - top: -6px; - left: -8px; - font-size: 20px; - } - - &__mobile { - position: relative; - bottom: 4px; - right: 6px; - font-size: 20px; - } } &--row { @@ -104,7 +69,7 @@ line-height: 23px; font-weight: 500; color: $blue-black; - padding: 4px 0 0 0; + padding: 6px 0 0 0; } &--subheader { diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html index 60912db7d8..b413c874d9 100644 --- a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html +++ b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html @@ -8,7 +8,7 @@
- +
diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss index 0a0d34fa61..971b830cc4 100644 --- a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss +++ b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss @@ -35,7 +35,9 @@ $advance_rejected_color: #d50000; &--list-icon { width: 16px; + height: 16px; padding-top: 2px; + color: $black-light; } &--purpose { @@ -66,7 +68,7 @@ $advance_rejected_color: #d50000; &--currency { color: $black-light; font-weight: 500; - font-size: 16px; + font-size: 14px; } &--amount { diff --git a/src/app/fyle/my-create-report/my-create-report.page.html b/src/app/fyle/my-create-report/my-create-report.page.html index 20d0df9dd6..013f4ac16a 100644 --- a/src/app/fyle/my-create-report/my-create-report.page.html +++ b/src/app/fyle/my-create-report/my-create-report.page.html @@ -9,8 +9,10 @@
Create New Report
- {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} - {{ - selectedTotalAmount || 0 | humanizeCurrency: homeCurrency }} + {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} + + ({{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}) +
@@ -47,7 +49,7 @@
-
EXPENSES
+
Expenses
{ ]); TestBed.configureTestingModule({ - declarations: [MyCreateReportPage, HumanizeCurrencyPipe], + declarations: [MyCreateReportPage, HumanizeCurrencyPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot(), RouterTestingModule, FormsModule, MatCheckboxModule], providers: [ FyCurrencyPipe, diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html index 3c2512f8e2..fa6f338b13 100644 --- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html +++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html @@ -1,7 +1,7 @@
- + - +
{{ report.purpose }}
diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss index 24234fd847..076242a822 100644 --- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss +++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss @@ -8,16 +8,24 @@ $reports_sent_back_color: #da1e28; color: $black; font-weight: 500; border-bottom: 1px solid $grey; + display: flex; + flex-direction: column; + + &--top-nav-container { + width: 100%; + } &--row-icon-container { display: flex; align-items: center; justify-content: center; font-size: 20px; + width: 100%; } &--handle-bar-icon { - margin: 0 0 2px 0; + margin: 0 0 4px 0; + align-self: center; } } @@ -28,6 +36,7 @@ $reports_sent_back_color: #da1e28; &--list-icon { width: 16px; height: 16px; + color: $black-light; } &--currency-amount-container { @@ -37,9 +46,8 @@ $reports_sent_back_color: #da1e28; &--currency { color: $black-light; font-weight: 500; - font-size: 16px; + font-size: 14px; line-height: 1.3; - margin-right: 2px; } &--amount { diff --git a/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss b/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss index 78a1e43e68..b89b4b97a1 100644 --- a/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss +++ b/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss @@ -118,7 +118,7 @@ } &--currency { - font-size: 16px; + font-size: 14px; font-weight: 500; color: $grey-light-2; width: 40%; diff --git a/src/app/fyle/my-view-advance/my-view-advance.page.scss b/src/app/fyle/my-view-advance/my-view-advance.page.scss index ced933e7d3..91eea7106d 100644 --- a/src/app/fyle/my-view-advance/my-view-advance.page.scss +++ b/src/app/fyle/my-view-advance/my-view-advance.page.scss @@ -16,7 +16,7 @@ } &--currency { - font-size: 16px; + font-size: 14px; font-weight: 500; color: $grey-light-2; width: 80px; diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html index aceca01f89..7064cc32d9 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html @@ -6,9 +6,9 @@
{{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} -
-
- {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }} + + ({{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}) +
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss index f5d7ea983a..903ce30cf6 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss @@ -14,6 +14,11 @@ &--title { font-size: 14px; margin-bottom: 4px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 4px; } &--total-amount { diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts index 48ab48325e..cdb96cc820 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts @@ -199,14 +199,14 @@ describe('AddExpensesToReportComponent', () => { component.selectedElements = [expense1, expense2]; fixture.detectChanges(); - expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses'); + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toContain('2 Expenses'); }); it('should show total amount', () => { component.selectedElements = [expense1, expense2]; fixture.detectChanges(); - expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00'); + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('($500.00)'); }); it('should zero state message if no unreported expense exist', () => { diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html index a61b6d084f..f0764bf64c 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.html +++ b/src/app/fyle/my-view-report/my-view-report.page.html @@ -85,7 +85,10 @@
- + View Info
diff --git a/src/app/fyle/my-view-report/my-view-report.page.scss b/src/app/fyle/my-view-report/my-view-report.page.scss index 97dd17f96a..b599db2ca8 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.scss +++ b/src/app/fyle/my-view-report/my-view-report.page.scss @@ -101,6 +101,10 @@ &--amount { color: $white; font-size: 18px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1px; } &--purpose-state { @@ -125,6 +129,11 @@ font-size: 18px; font-weight: 500; } + + &__currency { + font-size: 14px; + line-height: 1.5; + } } &--date-info-block { diff --git a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss index a261cc407c..b20d77246e 100644 --- a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss +++ b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss @@ -113,6 +113,7 @@ line-height: 1.25; margin-right: -2px; vertical-align: text-bottom; + font-size: 14px; } &--amount { diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html index 1cba58ab1f..cb4613d869 100644 --- a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html +++ b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html @@ -8,7 +8,7 @@
- +
diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss index 589371a453..a9b451b99e 100644 --- a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss +++ b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss @@ -37,6 +37,7 @@ $advance_rejected_color: #d50000; width: 16px; height: 16px; padding-top: 2px; + color: $black-light; } &--purpose { @@ -66,7 +67,7 @@ $advance_rejected_color: #d50000; &--currency { color: $black-light; font-weight: 500; - font-size: 16px; + font-size: 14px; } &--amount { diff --git a/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss b/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss index 4245cbf493..ea51b07992 100644 --- a/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss +++ b/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss @@ -140,7 +140,7 @@ } &--currency { - font-size: 16px; + font-size: 14px; font-weight: 500; color: #4a4a4a; width: 40%; diff --git a/src/app/fyle/view-team-report/view-team-report.page.html b/src/app/fyle/view-team-report/view-team-report.page.html index 592cf221e9..ea7524459a 100644 --- a/src/app/fyle/view-team-report/view-team-report.page.html +++ b/src/app/fyle/view-team-report/view-team-report.page.html @@ -90,7 +90,10 @@
- + View Info
diff --git a/src/app/fyle/view-team-report/view-team-report.page.scss b/src/app/fyle/view-team-report/view-team-report.page.scss index 158445dfd8..959dc3206e 100644 --- a/src/app/fyle/view-team-report/view-team-report.page.scss +++ b/src/app/fyle/view-team-report/view-team-report.page.scss @@ -243,6 +243,10 @@ $sent-back-color: #da1e28; &--amount { color: $white; font-size: 18px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1px; } &--purpose-state { @@ -267,6 +271,10 @@ $sent-back-color: #da1e28; font-size: 18px; font-weight: 500; } + + &__currency { + font-size: 14px; + } } &--submitted-date-container { diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.html b/src/app/shared/components/create-new-report-v2/create-new-report.component.html index b5b3b0cea0..8f3dddf31b 100644 --- a/src/app/shared/components/create-new-report-v2/create-new-report.component.html +++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.html @@ -6,9 +6,9 @@
Create new report
{{ selectedElements.length }} {{ selectedElements.length > 1 ? 'expenses' : 'expense' }} -
-
- {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }} + + ({{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}) +
diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.scss b/src/app/shared/components/create-new-report-v2/create-new-report.component.scss index 073ed9dded..40658fb29b 100644 --- a/src/app/shared/components/create-new-report-v2/create-new-report.component.scss +++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.scss @@ -18,6 +18,11 @@ margin-top: 4px; font-weight: 500; color: $blue-black; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 4px; } &--amount { diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss index bf07cf84ad..dbc4f5280a 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss @@ -10,6 +10,7 @@ min-height: 92px; padding: 12px; background: $pure-white; + position: relative; } &--deatils-block { @@ -70,14 +71,21 @@ &--vertical-dotted-border { border-left: 2px dashed $border-tertiary; - height: auto; + height: 90%; margin: 0 8px; + position: absolute; + top: 50%; + bottom: 0; + left: 68px; + transform: translate(-50%, -50%); } &--category-vendor-project-container { width: 100%; overflow: hidden; text-overflow: ellipsis; + margin-left: 16px; + &__align-vertical-center { display: flex; flex-direction: column; @@ -128,7 +136,7 @@ &--currency { color: $black; font-weight: 400; - font-size: 16px; + font-size: 14px; line-height: 1.25; margin-right: -2px; vertical-align: initial; diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.html b/src/app/shared/components/expenses-card-v2/expenses-card.component.html index d61b3dfbf4..c60a3a794f 100644 --- a/src/app/shared/components/expenses-card-v2/expenses-card.component.html +++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.html @@ -258,10 +258,10 @@ - {{ expense.amount | humanizeCurrency : expense.currency : true }} + {{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }} - {{ expense.amount | humanizeCurrency : homeCurrency : true }} + {{ { value: expense.amount, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency }} diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss index 2daf7ce055..0ae93ab8e0 100644 --- a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss +++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss @@ -9,7 +9,7 @@ font-weight: 500; &__from-reports { - background-color: $pure-white; + background-color: $white; } } @@ -18,19 +18,24 @@ min-height: 106px; padding: 12px; margin-bottom: 6px; + position: relative; } &--deatils-block { width: 100%; overflow: hidden; text-overflow: ellipsis; - padding: 4px 0; } &--vertical-dotted-border { border-left: 2px dashed $border-tertiary; - height: auto; + height: 90%; margin: 0 8px; + position: absolute; + top: 50%; + bottom: 0; + left: 68px; + transform: translate(-50%, -50%); } &--checkbox-container { @@ -159,6 +164,7 @@ text-overflow: ellipsis; display: flex; flex-direction: column; + margin-left: 16px; &__align-vertical-center { display: flex; @@ -266,14 +272,13 @@ &--currency-amount-container { display: flex; - gap: 2px; } &--currency { color: $black; font-weight: 500; - font-size: 16px; - line-height: 1.25; + font-size: 14px; + line-height: 1.5; margin-right: 1px; } diff --git a/src/app/shared/components/expenses-card/expenses-card.component.scss b/src/app/shared/components/expenses-card/expenses-card.component.scss index 7dcac9aed0..a5df17bc8a 100644 --- a/src/app/shared/components/expenses-card/expenses-card.component.scss +++ b/src/app/shared/components/expenses-card/expenses-card.component.scss @@ -9,7 +9,7 @@ font-weight: 500; &__from-reports { - background-color: $pure-white; + background-color: $white; } } @@ -253,7 +253,7 @@ &--currency { color: $black-light; font-weight: 500; - font-size: 16px; + font-size: 14px; line-height: 1.25; margin-right: 1px; } diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html index b8eda3cd6b..cae89ac62f 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html @@ -14,7 +14,7 @@
- +
diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss index ccb17d3de5..4f93d78093 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss @@ -50,6 +50,7 @@ width: 16px; height: 16px; padding-top: 2px; + color: $black-light; } &--vendor-amount-container { @@ -60,7 +61,7 @@ color: $black; font-size: 14px; font-weight: 400; - line-height: 1.3; + line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -71,6 +72,7 @@ font-size: 14px; line-height: 18px; font-weight: 500; + line-height: normal; &__not-filled { color: $black-light; @@ -80,13 +82,13 @@ &--currency-amount-container { white-space: nowrap; flex-grow: 1; - margin: 10px 0; + margin: 6px 0; } &--currency { color: $black; font-weight: 500; - font-size: 16px; + font-size: 14px; line-height: 20px; margin-right: 0; } diff --git a/src/app/shared/components/reports-card/reports-card.component.html b/src/app/shared/components/reports-card/reports-card.component.html index c197cf080f..6b40f0007b 100644 --- a/src/app/shared/components/reports-card/reports-card.component.html +++ b/src/app/shared/components/reports-card/reports-card.component.html @@ -14,7 +14,7 @@
- +
diff --git a/src/app/shared/components/reports-card/reports-card.component.scss b/src/app/shared/components/reports-card/reports-card.component.scss index 722fb24654..cb6aa4d756 100644 --- a/src/app/shared/components/reports-card/reports-card.component.scss +++ b/src/app/shared/components/reports-card/reports-card.component.scss @@ -44,6 +44,7 @@ width: 16px; height: 16px; padding-top: 2px; + color: $black-light; } &--icon-policy-violation { @@ -67,8 +68,8 @@ &--currency { color: $black-light; font-weight: 500; - font-size: 16px; - line-height: 1.25; + font-size: 14px; + line-height: 1.5; margin-right: -2px; } diff --git a/src/app/shared/icon/icon.module.ts b/src/app/shared/icon/icon.module.ts index 6fe2ae4268..02a211ae16 100644 --- a/src/app/shared/icon/icon.module.ts +++ b/src/app/shared/icon/icon.module.ts @@ -69,8 +69,10 @@ export class IconModule { 'info-circle-fill.svg', 'info-circle-fill.svg', 'info-gradient.svg', + 'info-circle-gradient.svg', 'list-plus.svg', 'list.svg', + 'list-new.svg', 'location.svg', 'logo-google.svg', 'loader.svg', diff --git a/src/assets/svg/info-circle-gradient.svg b/src/assets/svg/info-circle-gradient.svg new file mode 100644 index 0000000000..95f7e7dedf --- /dev/null +++ b/src/assets/svg/info-circle-gradient.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/list-new.svg b/src/assets/svg/list-new.svg new file mode 100644 index 0000000000..f6336c9e78 --- /dev/null +++ b/src/assets/svg/list-new.svg @@ -0,0 +1,18 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 1d756ac10e..8a66bd6664 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1395,7 +1395,7 @@ ion-toggle.toggle-checked::before { line-height: 18px; padding: 2px 10px; text-align: center; - text-transform: uppercase; + text-transform: capitalize; white-space: nowrap; height: max-content;