From 333d8efb0456d85fa22a0a2b0376ce7b9d9b77e4 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 29 Aug 2024 23:44:52 +0300
Subject: [PATCH] Misc fixes

---
 .../calendar/header/calendar-header.component.tsx    |  1 +
 .../src/calendar/header/calendar-header.scss         | 12 ++++++++++++
 .../src/calendar/monthly/days-of-week.component.tsx  | 10 ++++++----
 .../src/calendar/monthly/days-of-week.scss           |  5 +++++
 .../monthly/monthly-calendar-view.component.tsx      |  4 ++--
 ...eader.module.tsx => monthly-header.component.tsx} |  6 +++---
 .../src/calendar/monthly/monthly-view-workload.scss  |  4 ----
 packages/esm-appointments-app/translations/en.json   |  2 ++
 8 files changed, 31 insertions(+), 13 deletions(-)
 rename packages/esm-appointments-app/src/calendar/monthly/{monthly-header.module.tsx => monthly-header.component.tsx} (90%)

diff --git a/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx b/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
index a4a51c0cc..591616d5d 100644
--- a/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx
@@ -19,6 +19,7 @@ const CalendarHeader: React.FC = () => {
     <div className={styles.calendarHeaderContainer}>
       <div className={styles.titleContainer}>
         <Button
+          className={styles.backButton}
           kind="ghost"
           onClick={backButtonOnClick}
           renderIcon={ArrowLeft}
diff --git a/packages/esm-appointments-app/src/calendar/header/calendar-header.scss b/packages/esm-appointments-app/src/calendar/header/calendar-header.scss
index f52dc02f4..929d4455c 100644
--- a/packages/esm-appointments-app/src/calendar/header/calendar-header.scss
+++ b/packages/esm-appointments-app/src/calendar/header/calendar-header.scss
@@ -24,6 +24,18 @@
   align-items: center;
 }
 
+.backButton {
+  svg {
+    order: 1;
+    margin-right: layout.$spacing-03;
+    margin-left: 0 !important;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {
diff --git a/packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx b/packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx
index 69fc72870..b33f67997 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx
@@ -1,15 +1,17 @@
-import dayjs from 'dayjs';
 import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 import styles from './days-of-week.scss';
 
-interface DaysOfWeekProp {
+interface DaysOfWeekProps {
   dayOfWeek: string;
 }
-const DaysOfWeekCard: React.FC<DaysOfWeekProp> = ({ dayOfWeek }) => {
+
+const DaysOfWeekCard: React.FC<DaysOfWeekProps> = ({ dayOfWeek }) => {
   const isToday = dayjs(new Date()).format('ddd').toUpperCase() === dayOfWeek;
   return (
     <div tabIndex={0} role="button" className={styles.tileContainer}>
-      <span className={isToday ? styles.bold : ''}>{dayOfWeek}</span>
+      <span className={classNames({ [styles.bold]: isToday })}>{dayOfWeek}</span>
     </div>
   );
 };
diff --git a/packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss b/packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss
index f993ed167..a789c4126 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss
+++ b/packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss
@@ -10,6 +10,11 @@
   width: 100%;
   align-items: center;
   border: 1px solid colors.$gray-20;
+  border-right: none;
+
+  &:last-child {
+    border-right: 1px solid colors.$gray-20;
+  }
 
   & > span {
     font-size: layout.$spacing-05;
diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx b/packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx
index fbb75bc2d..6155b14ce 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx
+++ b/packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx
@@ -4,9 +4,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import { type DailyAppointmentsCountByService } from '../../types';
 import { monthDays } from '../../helpers';
 import MonthlyViewWorkload from './monthly-workload-view.component';
-import MonthlyHeader from './monthly-header.module';
-import styles from '../appointments-calendar-view-view.scss';
+import MonthlyHeader from './monthly-header.component';
 import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from '../appointments-calendar-view-view.scss';
 
 dayjs.extend(isBetween);
 
diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-header.module.tsx b/packages/esm-appointments-app/src/calendar/monthly/monthly-header.component.tsx
similarity index 90%
rename from packages/esm-appointments-app/src/calendar/monthly/monthly-header.module.tsx
rename to packages/esm-appointments-app/src/calendar/monthly/monthly-header.component.tsx
index c2f98f531..d4e8e70e1 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/monthly-header.module.tsx
+++ b/packages/esm-appointments-app/src/calendar/monthly/monthly-header.component.tsx
@@ -27,13 +27,13 @@ const MonthlyHeader: React.FC = () => {
       <div className={styles.container}>
         <Button
           aria-label={t('previousMonth', 'Previous month')}
-          size="sm"
+          kind="tertiary"
           onClick={handleSelectPrevMonth}
-          kind="tertiary">
+          size="sm">
           {t('prev', 'Prev')}
         </Button>
         <span>{formatDate(new Date(selectedDate), { day: false, time: false, noToday: true })}</span>
-        <Button aria-label={t('nextMonth', 'Next month')} size="sm" onClick={handleSelectNextMonth} kind="tertiary">
+        <Button aria-label={t('nextMonth', 'Next month')} kind="tertiary" onClick={handleSelectNextMonth} size="sm">
           {t('next', 'Next')}
         </Button>
       </div>
diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss b/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss
index 7a3eaa37e..262dacaa4 100644
--- a/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss
+++ b/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss
@@ -13,10 +13,6 @@
   text-align: right;
   @include type.type-style('body-compact-02');
 
-  &:nth-child(-n + 7) {
-    border-top: 1px solid colors.$gray-20;
-  }
-
   &:nth-child(7n) {
     border-right: 1px solid colors.$gray-20;
   }
diff --git a/packages/esm-appointments-app/translations/en.json b/packages/esm-appointments-app/translations/en.json
index 2c32f8a4e..666410df3 100644
--- a/packages/esm-appointments-app/translations/en.json
+++ b/packages/esm-appointments-app/translations/en.json
@@ -101,6 +101,7 @@
   "medications": "Medications",
   "missed": "Missed",
   "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -122,6 +123,7 @@
   "patients": "Patients",
   "period": "Period",
   "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",