Misc fixes

openmrs · Aug 29, 2024 · 333d8ef · 333d8ef
1 parent d2dfeec
commit 333d8ef
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 13 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...alendar/monthly/monthly-header.module.tsx → ...ndar/monthly/monthly-header.component.tsx b/...alendar/monthly/monthly-header.module.tsx → ...ndar/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
@@ -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
@@ -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",