c1: QA fixes - Calendar

src/app/shared/components/core/svg-icon/svg-icon.component.ts

@@ -10,11 +10,13 @@ const ICON_MAPPING = {
   'arrow-tail-down': 'grv-arrow-down',
   'arrow-tail-left-medium': 'grv-arrow-left-medium',
   'arrow-tail-right-medium': 'grv-arrow-right-medium',
+  'arrow-tail-right-small': 'grv-arrow-right-small',
   'arrow-tail-up-down': 'grv-sort',
   'arrow-tail-up-medium': 'grv-arrow-up-medium',
   'arrow-tail-up': 'grv-arrow-up',
   'bin': 'grv-trash',
   'calendar': 'grv-calendar',
+  'calendar-medium': 'grv-calendar-medium',
   'check-circle-outline-small': 'grv-checkmark-encircled-small',
   'check-circle-outline': 'grv-checkmark-encircled',
   'check-circle-outline-medium': 'grv-checkmark-encircled-medium',

src/app/shared/components/export-log/export-log-filter/export-log-filter.component.html

@@ -5,7 +5,50 @@
         <div>
             <app-svg-icon [svgSource]="'calendar'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-placeholder'"></app-svg-icon>
         </div>
-        <p-dropdown placeholder="Select date range" appendTo="body" [options]="dateOptions"
+        <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" selectionMode="range" [readonlyInput]="true" inputId="range">
+            <ng-template pTemplate="header">
+                <div class="tw-flex tw-items-center tw-justify-center">
+                    <div class="tw-pr-8-px">
+                        <button type="button" class="p-button outline-sm tw-font-nav-link-font-weight">
+                            This week
+                        </button>
+                    </div>
+                    <div>
+                        <button type="button" class="p-button outline-sm tw-font-nav-link-font-weight">
+                            Last week
+                        </button>
+                    </div>
+                </div>
+                <div class="tw-pt-10-px tw-flex tw-items-center tw-justify-center">
+                    <div class="tw-pr-8-px">
+                        <button type="button" class="p-button outline-sm tw-whitespace-nowrap tw-font-nav-link-font-weight">
+                            This month
+                        </button>
+                    </div>
+                    <div>
+                        <button type="button" class="p-button outline-sm tw-whitespace-nowrap tw-font-nav-link-font-weight">
+                            Last month
+                        </button>
+                    </div>
+                </div>
+
+                <div class="tw-pt-14-px tw-h-32-px tw-rounded-4-px">
+                    <span class="tw-text-calendar-day-text-color tw-text-12-px tw-font-nav-link-font-weight">
+                        Or, Select Date range
+                    </span>
+                </div>
+
+                <div class="tw-pt-16-px tw-pb-8-px">
+                    <div class="tw-flex tw-items-center tw-text-date-picker-placeholder-text tw-border-1-px tw-border-solid tw-border-date-picker-border tw-py-4-px tw-px-12-px">
+                        <p class="tw-pr-18-px">Start date</p>
+                        <app-svg-icon [svgSource]="'arrow-tail-right-small'" [width]="'12px'" [height]="'12px'" [styleClasses]="'tw-text-date-picker-placeholder-text tw-pr-10-px'" [isTextColorAllowed]="true"></app-svg-icon>
+                        <p>End date</p>
+                        <app-svg-icon [svgSource]="'calendar-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-date-picker-placeholder-text tw-pl-22-px'" [isTextColorAllowed]="true"></app-svg-icon>
+                    </div>
+                </div>
+            </ng-template>
+        </p-calendar>
+        <!-- <p-dropdown placeholder="Select date range" appendTo="body" [options]="dateOptions"
         formControlName="dateRange" (click)="dropDownWatcher()" (onFocus)="isDateFieldFocused = true" (onBlur)="isDateFieldFocused = false"
         [ngClass]="{'selectedItem': exportLogForm.controls.dateRange.value, 'filterDropdown': !exportLogForm.controls.dateRange.value}">
             <ng-template let-item pTemplate="selectedItem">
@@ -27,12 +70,15 @@
             </ng-template>
             <ng-template let-date pTemplate="item">
                 <div>
-                    <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range"></p-calendar>
+                    <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range">
+                        <ng-template pTemplate="header">Header</ng-template>
+                        <ng-template pTemplate="footer">Footer</ng-template>
+                    </p-calendar>
                     <p class="tw-text-sub-text-color tw-text-14-px" [ngClass]="{'!tw-text-mandatory-field-color' : exportLogForm.controls.dateRange.value === date }" *ngIf="date.dateRange !== presentDate">{{ date.dateRange | titlecase | snakeCaseToSpaceCase }}</p>
                     <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange !== presentDate && date.dateRange !== 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}} - {{date.endDate | date : 'MMM dd, yyyy'}}</p>
                     <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange === 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}}</p>
                 </div>
             </ng-template> 
-        </p-dropdown>
+        </p-dropdown> -->
     </span>
 </div>

src/app/shared/components/export-log/export-log-filter/export-log-filter.component.scss

@@ -14,26 +14,30 @@
     @apply tw-hidden #{!important};
 }
 
-:host ::ng-deep .p-datepicker table td > span.p-highlight {
-    @apply tw-text-white tw-bg-mandatory-field-color #{!important};
-}
+// :host ::ng-deep .p-datepicker table td > span.p-highlight {
+//     @apply tw-text-white tw-bg-mandatory-field-color #{!important};
+// }
 
-:host ::ng-deep .p-datepicker table td > span:focus {
-    @apply tw-shadow-none #{!important};
-}
+// :host ::ng-deep .p-datepicker table td > span:focus {
+//     @apply tw-shadow-none #{!important};
+// }
 
-:host ::ng-deep .p-datepicker table th {
-    @apply tw-text-center ;
-}
+// :host ::ng-deep .p-datepicker table th {
+//     @apply tw-text-center ;
+// }
 
-:host ::ng-deep .p-datepicker-touch-ui, .p-calendar .p-datepicker-touch-ui {
-    @apply tw-min-w-fit tw-top-2/3 #{!important};
-}
+// :host ::ng-deep .p-datepicker-touch-ui, .p-calendar .p-datepicker-touch-ui {
+//     @apply tw-min-w-fit tw-top-2/3 #{!important};
+// }
 
 :host ::ng-deep .p-calendar ::placeholder {
     @apply tw-text-sub-text-color #{!important};
 }
 
 :host ::ng-deep .p-dialog {
     @apply tw-max-h-full tw-m-0 #{!important};
+}
+
+:host ::ng-deep .p-button.outline-sm {
+    @apply tw-w-100-px tw-justify-center #{!important};
 }

src/assets/themes/co/c1dl.scss

@@ -859,5 +859,7 @@
     --toggle-width: 38px;
 
     --toggle-height: 22px;
+
+    --border-date-picker-border: var(--border-primary);
   }
 }

src/assets/themes/fyle/fdl.scss

@@ -324,5 +324,15 @@
     --lv-table-header-border-color: var(--border-secondary);
 
     --lv-table-border-color: var(--border-tertiary);
+
+    --calendar-day-text-color: var(--text-label);
+
+    --border-date-picker-border: var(--border-secondary);
+
+    --date-picker-placeholder-text: var(--text-placeholder);
+
+    --calendar-header-text-color: var(--text-primary);
+
+    --calendar-date-default-text-color: var(--text-secondary);
   }
 }

src/styles.scss

@@ -112,6 +112,10 @@ p {
     @apply tw-px-12-px tw-py-8-px tw-text-12-px tw-text-btn-outline-secondary-text-color tw-bg-btn-outline-secondary-bg tw-border-solid tw-border-btn-outline-secondary-border-color #{!important};
 }
 
+.p-button:enabled:hover.outline-sm {
+    @apply tw-px-12-px tw-py-8-px tw-text-12-px tw-text-btn-outline-secondary-hover-text-color tw-bg-btn-outline-secondary-hover-bg tw-border-solid tw-border-btn-outline-secondary-hover-border-color tw-shadow-btn-cta-shadow #{!important};
+}
+
 .p-button.danger-outline {
     @apply tw-px-16-px tw-py-10-px tw-text-14-px tw-text-text-danger tw-bg-btn-outline-secondary-bg tw-border-solid tw-border-btn-outline-secondary-border-color #{!important};
 }
@@ -120,10 +124,6 @@ p {
     @apply tw-px-16-px tw-py-10-px tw-text-14-px tw-text-text-danger tw-bg-btn-outline-secondary-bg tw-border-solid tw-border-btn-outline-secondary-border-color #{!important};
 }
 
-.p-button:enabled:hover.outline-sm {
-    @apply tw-px-12-px tw-py-8-px tw-text-12-px tw-text-btn-outline-secondary-hover-text-color tw-bg-btn-outline-secondary-hover-bg tw-border-solid tw-border-btn-outline-secondary-hover-border-color tw-shadow-btn-cta-shadow #{!important};
-}
-
 .btn-text-primary {
     @apply tw-cursor-pointer tw-text-btn-tertiary-text-color tw-text-14-px;
 }
@@ -422,6 +422,34 @@ p {
     @apply tw-text-text-secondary tw-text-14-px tw-py-14-px tw-px-22-px tw-border-t tw-border-b-0 tw-border-t-lv-table-border-color #{!important};
 }
 
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    @apply tw-text-12-px tw-font-primary tw-text-calendar-header-text-color #{!important};
+}
+
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:hover {
+    @apply tw-text-calendar-header-text-color #{!important};
+}
+
+.p-datepicker .p-datepicker-header {
+    @apply tw-p-0 #{!important};
+}
+
+.p-datepicker table th {
+    @apply tw-text-14-px tw-text-calendar-day-text-color tw-p-0 tw-py-4-px #{!important};
+}
+
+.p-datepicker table td {
+    @apply tw-p-0 tw-pb-4-px #{!important};
+}
+
+.p-datepicker table td > span {
+    @apply tw-text-14-px tw-text-calendar-date-default-text-color tw-h-28-px tw-w-28-px #{!important};
+}
+
+.p-datepicker {
+    @apply tw-p-16-px #{!important};
+}
+
 .configuration {
     &--section {
       @apply tw-pb-100-px ;

tailwind.config.js

@@ -119,6 +119,7 @@ const borderColors = {
   'border-brand-pressed': 'var(--border-brand-pressed)',
   'border-disable': 'var(--border-disable)',
   'border-neutral': 'var(--border-neutral)',
+  'border-date-picker-border': 'var(--border-date-picker-border)',
 };
 
 const colors = {
@@ -1189,6 +1190,7 @@ module.exports = {
         '68-px': '68px',
         '70-px': '70px',
         '80-px': '80px',
+        '82-px': '82px',
         '92-px': '92px',
         '98-px': '98px',
         '100-px': '100px',