feat(Calendar): use outlined buttons view in case of xl size (#216)

Author: MefistAldemisov

src/components/CalendarView/Calendar.scss

@@ -33,6 +33,7 @@ $block: '.#{variables.$ns}calendar';
 
     &__header {
         display: flex;
+        justify-content: space-between;
 
         padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;
     }
@@ -42,7 +43,10 @@ $block: '.#{variables.$ns}calendar';
     }
 
     &__controls {
-        margin-inline-start: auto;
+        display: flex;
+        flex-shrink: 1;
+        justify-content: flex-end;
+        gap: var(--g-spacing-2);
     }
 
     &__control-icon {
@@ -239,6 +243,7 @@ $block: '.#{variables.$ns}calendar';
 
         font-weight: var(--g-text-subheader-font-weight);
         cursor: pointer;
+        text-transform: capitalize;
 
         border-radius: 4px;
         outline: none;
@@ -306,4 +311,8 @@ $block: '.#{variables.$ns}calendar';
             background-color: var(--g-color-base-generic);
         }
     }
+
+    &__mode-label {
+        text-transform: capitalize;
+    }
 }

src/components/CalendarView/CalendarView.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type {DateTime} from '@gravity-ui/date-utils';
 import {ChevronLeft, ChevronRight} from '@gravity-ui/icons';
-import {ArrowToggle, Button, useLang} from '@gravity-ui/uikit';
+import {ArrowToggle, Button, useLang, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';
@@ -44,6 +44,9 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
         props,
         state,
     );
+    const isMobile = useMobile();
+
+    const buttonView = isMobile ? 'outlined' : 'flat';
 
     React.useImperativeHandle(ref, () => ({
         focus() {
@@ -58,7 +61,7 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
             style={props.style}
         >
             <div className={b('header')}>
-                <Button {...modeButtonProps} view="flat" size={props.size}>
+                <Button {...modeButtonProps} view={buttonView} size={props.size}>
                     {state.availableModes.indexOf(state.mode) + 1 ===
                     state.availableModes.length ? (
                         <span key="label" className={b('mode-label', b(`years-label`))}>
@@ -76,12 +79,12 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
                     )}
                 </Button>
                 <div className={b('controls')}>
-                    <Button {...previousButtonProps} view="flat" size={props.size}>
+                    <Button {...previousButtonProps} view={buttonView} size={props.size}>
                         <Button.Icon>
                             <ChevronLeft className={b('control-icon')} />
                         </Button.Icon>
                     </Button>
-                    <Button {...nextButtonProps} view="flat" size={props.size}>
+                    <Button {...nextButtonProps} view={buttonView} size={props.size}>
                         <Button.Icon>
                             <ChevronRight className={b('control-icon')} />
                         </Button.Icon>