refactor: simple UI layout improvements

openmrs · Sep 11, 2024 · 859c602 · 859c602
1 parent 39f4229
commit 859c602
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/src/components/orders-table/orders-data-table.scss b/src/components/orders-table/orders-data-table.scss
@@ -114,5 +114,5 @@
 
 .tableToolBar {
   height: auto;
-  padding-top: layout.$spacing-05;
+  padding-top: layout.$spacing-04;
 }
diff --git a/src/components/orders-table/orders-date-range-picker.scss b/src/components/orders-table/orders-date-range-picker.scss
@@ -1,3 +1,11 @@
+@use '@carbon/layout';
+
+.datePickerWrapper {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
 .dateRangePicker {
   flex-grow: unset;
 

diff --git a/src/components/orders-table/orders-date-range-picker.tsx b/src/components/orders-table/orders-date-range-picker.tsx
@@ -12,26 +12,20 @@ export const OrdersDateRangePicker = ({
 }) => {
   const currentDate = new Date();
   const { t } = useTranslation();
+
   return (
-    <DatePicker
-      datePickerType="range"
-      className={styles.dateRangePicker}
-      onClose={onChange}
-      maxDate={currentDate.toISOString()}
-      value={currentValues}
-    >
-      <DatePickerInput
-        id="date-picker-input-id-start"
-        placeholder="mm/dd/yyyy"
-        labelText={t('startDate', 'Start date')}
-        size="md"
-      />
-      <DatePickerInput
-        id="date-picker-input-id-finish"
-        placeholder="mm/dd/yyyy"
-        labelText={t('endDate', 'End date')}
-        size="md"
-      />
-    </DatePicker>
+    <div className={styles.datePickerWrapper}>
+      <p>{t('dateRange', 'date range')}:</p>
+      <DatePicker
+        datePickerType="range"
+        className={styles.dateRangePicker}
+        onClose={onChange}
+        maxDate={currentDate.toISOString()}
+        value={currentValues}
+      >
+        <DatePickerInput id="date-picker-input-id-start" placeholder="mm/dd/yyyy" size="md" />
+        <DatePickerInput id="date-picker-input-id-finish" placeholder="mm/dd/yyyy" size="md" />
+      </DatePicker>
+    </div>
   );
 };