fix(date-picker): fix discrepencies in datepicker (#17282)

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: didimmova

projects/igniteui-angular/core/src/core/styles/components/date-picker/_date-picker-theme.scss

@@ -59,7 +59,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        padding: pad(rem(8px));
+        gap: rem(8px);
     }
 
     %date-picker__actions {

projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html

@@ -4,7 +4,7 @@
             @if (cancelButtonLabel) {
             <button
             #cancelButton type="button"
-            igxButton="flat" igxRipple
+            [igxButton]="cancelButtonType" igxRipple
             (click)="calendarCancel.emit({ owner: this})"
             >
                 {{ cancelButtonLabel }}
@@ -14,7 +14,7 @@
                 <button
                     #closeButton
                     type="button"
-                    igxButton="flat"
+                    [igxButton]="closeButtonType"
                     igxRipple
                     (click)="calendarClose.emit({ owner: this})"
                 >

projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts

@@ -6,7 +6,7 @@ import {
     HostListener,
     HostBinding
 } from '@angular/core';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxButtonType, IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxCalendarComponent } from 'igniteui-angular/calendar';
 import { IgxDividerDirective } from 'igniteui-angular/directives';
 import { IBaseEventArgs, DateRange, CustomDateRange, PickerInteractionMode, IDateRangePickerResourceStrings, IgxPickerActionsDirective } from 'igniteui-angular/core';
@@ -56,7 +56,9 @@ export class IgxCalendarContainerComponent {
     public resourceStrings!: IDateRangePickerResourceStrings;
     public vertical = false;
     public closeButtonLabel: string;
+    public closeButtonType: IgxButtonType = 'flat';
     public cancelButtonLabel: string;
+    public cancelButtonType: IgxButtonType = 'flat';
     public todayButtonLabel: string;
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
     public pickerActions: IgxPickerActionsDirective;

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -37,7 +37,9 @@ import {
     DateTimeUtil,
     IgxPickerActionsDirective,
     isDateInRanges,
-    PickerCalendarOrientation
+    PickerCalendarOrientation,
+    THEME_TOKEN,
+    ThemeToken
 } from 'igniteui-angular/core';
 import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-picker/picker-base.directive';
@@ -107,6 +109,7 @@ const SingleInputDatesConcatenationString = ' - ';
 export class IgxDateRangePickerComponent extends PickerBaseDirective
     implements OnChanges, OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
     protected platform = inject(PlatformUtil);
+    private themeToken = inject<ThemeToken>(THEME_TOKEN);
     private _injector = inject(Injector);
     private _cdr = inject(ChangeDetectorRef);
     private _overlayService = inject<IgxOverlayService>(IgxOverlayService);
@@ -1337,6 +1340,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
         componentInstance.cancelButtonLabel = !this.isDropdown ? this.cancelButtonText : null;
+        if (!this.isDropdown && this.themeToken.theme === 'indigo') {
+            componentInstance.closeButtonType = 'contained';
+            componentInstance.cancelButtonType = 'outlined';
+        }
         componentInstance.pickerActions = this.pickerActions;
         componentInstance.usePredefinedRanges = this.usePredefinedRanges;
         componentInstance.customRanges = this.customRanges;