From 563b06925dc241049ef53885025f50b64df318ed Mon Sep 17 00:00:00 2001
From: Jill Yan <yan95599@gmail.com>
Date: Wed, 18 Sep 2019 16:25:09 +0800
Subject: [PATCH] Jill(feat)  use tertiary button for date and navigation
 button in date picker (#2397)

* use ghost buttons

* use variables

* replace icon chevron by arrow

* wrong tint usage

* update test snap

* chore(ci): prettier

* month pressed style

* chore(ci): prettier

* remove height

* use tertiary button for month-year button in date picker

* chore(ci): prettier

* chore(ci): update libs security audit

* chore(ci): update libs security audit
---
 .../DatePicker/DatePicker.component.js        |  2 +
 .../pickers/DatePicker/DatePicker.scss        |  4 +-
 .../__snapshots__/DatePicker.test.js.snap     | 60 +++++++++----------
 .../pickers/MonthPicker/MonthPicker.scss      |  5 +-
 .../DateTimePickers/shared/styles/mixins.scss |  4 +-
 .../DateTimeView/DateTimeView.component.js    |  9 +--
 .../__snapshots__/DateTimeView.test.js.snap   | 16 ++---
 .../HeaderTitle/HeaderTitle.component.js      | 15 ++---
 .../views/HeaderTitle/HeaderTitle.scss        |  2 +-
 .../views/HeaderTitle/HeaderTitle.test.js     |  4 +-
 .../__snapshots__/HeaderTitle.test.js.snap    | 10 ++--
 .../MonthYearView/MonthYearView.component.js  |  2 +-
 .../__snapshots__/MonthYearView.test.js.snap  |  2 +-
 .../views/ViewLayout/ViewLayout.scss          | 12 ++--
 14 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
index cde8874bdb0..de5139f1e1e 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
@@ -108,6 +108,8 @@ class DatePicker extends React.PureComponent {
 											[theme.today]: today,
 										},
 										'tc-date-picker-day',
+										'btn-tertiary',
+										'btn-default',
 									);
 
 									let ariaLabel = format(date, 'dddd DD MMMM YYYY', pickerLocale);
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss
index 1d65917ef3a..a1752df657a 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss
@@ -35,7 +35,9 @@
 
 	.calendar-day {
 		&.today {
-			background-color: $concrete;
+			background-color: tint($lochmara, 90%);
+			color: $lochmara;
+			border: solid 1px $lochmara;
 		}
 
 		@include picker-action;
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap b/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
index f9a643e77f1..1bed5c1e8c4 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
@@ -144,7 +144,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 01 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -160,7 +160,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 02 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -176,7 +176,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 03 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -197,7 +197,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 04 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -213,7 +213,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 05 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -229,7 +229,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 06 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -245,7 +245,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 07 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -261,7 +261,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 08 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -277,7 +277,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 09 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -293,7 +293,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 10 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -314,7 +314,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 11 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -331,7 +331,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 12 June 2018, selected"
-                className="theme-calendar-day theme-selected tc-date-picker-day"
+                className="theme-calendar-day theme-selected tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -347,7 +347,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 13 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -363,7 +363,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 14 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -379,7 +379,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 15 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -395,7 +395,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 16 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -411,7 +411,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 17 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -432,7 +432,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 18 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -448,7 +448,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 19 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -464,7 +464,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Today, Wednesday 20 June 2018"
-                className="theme-calendar-day theme-today tc-date-picker-day"
+                className="theme-calendar-day theme-today tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -480,7 +480,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 21 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -496,7 +496,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 22 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -512,7 +512,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 23 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -528,7 +528,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 24 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -549,7 +549,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 25 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -565,7 +565,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 26 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -581,7 +581,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 27 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -597,7 +597,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 28 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -613,7 +613,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 29 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -629,7 +629,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 30 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss
index 1cae36c9415..8d8f42475f3 100644
--- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss
+++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss
@@ -33,5 +33,8 @@
 	background: transparent;
 	border: none;
 	padding: 0;
-	text-transform: uppercase;
+
+	&:active {
+		background-color: shade($concrete, 10%);
+	}
 }
diff --git a/packages/components/src/DateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
index a75688e7bda..6ad72e5a1c3 100644
--- a/packages/components/src/DateTimePickers/shared/styles/mixins.scss
+++ b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
@@ -8,12 +8,14 @@
 	font-size: 1.2rem;
 
 	&.selected {
-		background-color: $scooter;
+		background-color: $lochmara;
 		color: $white;
+		font-weight: $font-weight-semi-bold;
 	}
 
 	&:disabled {
 		color: $silver-chalice;
+		opacity: 0.54;
 	}
 }
 
diff --git a/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js b/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js
index 165b6617f28..0ff8ecef1bc 100644
--- a/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js
+++ b/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Action } from '../../../Actions';
 import DatePicker from '../../pickers/DatePicker';
 import TimePicker from '../../pickers/TimePicker';
@@ -87,11 +88,11 @@ class DateTimeView extends React.PureComponent {
 			leftElement: (
 				<Action
 					aria-label={t('DATEPICKER_MONTH_PREVIOUS', { defaultValue: 'Go to previous month' })}
-					icon="talend-chevron-left"
+					icon="talend-arrow-left"
 					label=""
 					onClick={() => this.goToPreviousMonth()}
 					tabIndex="-1"
-					link
+					className={classNames('btn-tertiary', 'btn-info')}
 				/>
 			),
 			middleElement: (
@@ -110,12 +111,12 @@ class DateTimeView extends React.PureComponent {
 			rightElement: (
 				<Action
 					aria-label={t('DATEPICKER_MONTH_NEXT', { defaultValue: 'Go to next month' })}
-					icon="talend-chevron-left"
+					icon="talend-arrow-left"
 					iconTransform="rotate-180"
 					label=""
 					onClick={() => this.goToNextMonth()}
 					tabIndex="-1"
-					link
+					className="btn-tertiary btn-info"
 				/>
 			),
 		};
diff --git a/packages/components/src/DateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap b/packages/components/src/DateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap
index 7f466d7ea99..922b9073d8d 100644
--- a/packages/components/src/DateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap
+++ b/packages/components/src/DateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap
@@ -42,9 +42,9 @@ exports[`DateTimeView should render 1`] = `
     Object {
       "leftElement": <Action
         aria-label="Go to previous month"
-        icon="talend-chevron-left"
+        className="btn-tertiary btn-info"
+        icon="talend-arrow-left"
         label=""
-        link={true}
         onClick={[Function]}
         tabIndex="-1"
       />,
@@ -61,10 +61,10 @@ exports[`DateTimeView should render 1`] = `
       />,
       "rightElement": <Action
         aria-label="Go to next month"
-        icon="talend-chevron-left"
+        className="btn-tertiary btn-info"
+        icon="talend-arrow-left"
         iconTransform="rotate-180"
         label=""
-        link={true}
         onClick={[Function]}
         tabIndex="-1"
       />,
@@ -101,9 +101,9 @@ exports[`DateTimeView should render without timePicker 1`] = `
     Object {
       "leftElement": <Action
         aria-label="Go to previous month"
-        icon="talend-chevron-left"
+        className="btn-tertiary btn-info"
+        icon="talend-arrow-left"
         label=""
-        link={true}
         onClick={[Function]}
         tabIndex="-1"
       />,
@@ -120,10 +120,10 @@ exports[`DateTimeView should render without timePicker 1`] = `
       />,
       "rightElement": <Action
         aria-label="Go to next month"
-        icon="talend-chevron-left"
+        className="btn-tertiary btn-info"
+        icon="talend-arrow-left"
         iconTransform="rotate-180"
         label=""
-        link={true}
         onClick={[Function]}
         tabIndex="-1"
       />,
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js
index dde51388fae..13dafadf3f3 100644
--- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js
+++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js
@@ -7,12 +7,17 @@ import format from 'date-fns/format';
 import theme from './HeaderTitle.scss';
 import { getPickerLocale } from '../../generator';
 import getDefaultT from '../../../translate';
-import { ActionDropdown } from '../../../Actions';
+import { ActionDropdown, Action } from '../../../Actions';
 import YearPicker from '../../pickers/YearPicker';
 
 function HeaderTitle(props) {
 	const isButton = !!props.button;
-	const className = classNames(theme.common, { [theme.button]: isButton }, props.className);
+	const className = classNames(
+		theme.common,
+		{ [theme.button]: isButton },
+		{ 'btn-tertiary btn-info': isButton },
+		props.className,
+	);
 	const propsToSpread = {
 		className,
 		...(isButton ? props.button : {}),
@@ -25,11 +30,7 @@ function HeaderTitle(props) {
 	const monthLabel = format(date, 'MMMM', pickerLocale);
 
 	if (isButton) {
-		return (
-			<button type="button" {...propsToSpread}>
-				{label}
-			</button>
-		);
+		return <Action {...propsToSpread} label={label} />;
 	}
 
 	return (
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.scss b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.scss
index 2ca866f6cd1..0fd370a721f 100644
--- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.scss
+++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.scss
@@ -5,7 +5,7 @@
 	justify-content: center;
 	align-items: center;
 	text-transform: uppercase;
-	font-weight: 600;
+	font-weight: $font-weight-semi-bold;
 
 	:global(.dropdown-menu) {
 		min-width: 63px;
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.test.js b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.test.js
index c866a4ef189..b41f1815781 100644
--- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.test.js
+++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.test.js
@@ -23,7 +23,7 @@ describe('HeaderTitle', () => {
 		);
 
 		// Then
-		expect(wrapper.name()).toEqual('button');
+		expect(wrapper.name()).toEqual('Action');
 		expect(wrapper.getElement()).toMatchSnapshot();
 	});
 
@@ -44,6 +44,6 @@ describe('HeaderTitle', () => {
 				.first()
 				.props().label,
 		).toEqual('2001');
-		expect(wrapperButton.text()).toBe('December 2002');
+		expect(wrapperButton.prop('label')).toBe('December 2002');
 	});
 });
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap b/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap
index 821e626c825..d0e57604916 100644
--- a/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap
+++ b/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap
@@ -1,13 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderTitle should render a button 1`] = `
-<button
-  className="theme-common theme-button"
-  type="button"
+<Action
+  className="theme-common theme-button btn-tertiary btn-info"
+  label="September 2012"
   whateverButtonProp="whateverValue"
->
-  September 2012
-</button>
+/>
 `;
 
 exports[`HeaderTitle should render a span and ActionDropdown 1`] = `
diff --git a/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.component.js b/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.component.js
index 56c51652581..3a70dfb4dd6 100644
--- a/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.component.js
+++ b/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.component.js
@@ -17,7 +17,7 @@ function MonthYearView(props) {
 				icon="talend-arrow-left"
 				onClick={props.onBackClick}
 				tabIndex={props.allowFocus ? 0 : -1}
-				link
+				className="btn-tertiary btn-info"
 			/>
 		),
 		middleElement: (
diff --git a/packages/components/src/DateTimePickers/views/MonthYearView/__snapshots__/MonthYearView.test.js.snap b/packages/components/src/DateTimePickers/views/MonthYearView/__snapshots__/MonthYearView.test.js.snap
index e59abcfd0ae..eb7994628ae 100644
--- a/packages/components/src/DateTimePickers/views/MonthYearView/__snapshots__/MonthYearView.test.js.snap
+++ b/packages/components/src/DateTimePickers/views/MonthYearView/__snapshots__/MonthYearView.test.js.snap
@@ -14,9 +14,9 @@ exports[`MonthYearView should render 1`] = `
     Object {
       "leftElement": <Action
         aria-label="Switch back to date and time pickers view"
+        className="btn-tertiary btn-info"
         icon="talend-arrow-left"
         label=""
-        link={true}
         onClick={[MockFunction]}
         tabIndex={0}
       />,
diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.scss b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.scss
index cfec43fb6a6..acd9a6c84f6 100644
--- a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.scss
+++ b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.scss
@@ -6,16 +6,14 @@
 
 	.header {
 		display: flex;
-		height: 5rem;
+		justify-content: space-between;
 		margin-bottom: $padding-small;
 
-		.left,
-		.right {
-			flex: 1;
+		.left {
+			padding-left: $padding-small;
 		}
-
-		.middle {
-			flex: 4;
+		.right {
+			padding-right: $padding-small;
 		}
 
 		:global(.btn-icon-only) {