Update styles to match new design

beyondessential · Jun 29, 2023 · ddf4757 · ddf4757
1 parent f73c4e4
commit ddf4757
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 49 deletions.
diff --git a/packages/tupaia-web/src/theme/GlobalStyle.tsx b/packages/tupaia-web/src/theme/GlobalStyle.tsx
@@ -13,6 +13,9 @@ export const GlobalStyle = createGlobalStyle<{
   theme: Theme;
 }>` 
   #date-picker-dialog {
+    h3 {
+      font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+    }
     .MuiSelect-root {
       color: ${({ theme }) => theme.palette.text.primary};
       &:focus {
@@ -22,5 +25,8 @@ export const GlobalStyle = createGlobalStyle<{
     .MuiInputBase-root {
       background-color: transparent;
     }
+    button {
+      text-transform: none;
+    }
   }
 `;
diff --git a/packages/ui-components/src/components/DateRangePicker/DatePickerDialog.tsx b/packages/ui-components/src/components/DateRangePicker/DatePickerDialog.tsx
@@ -7,6 +7,7 @@
 import React, { useState } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
+import { Typography } from '@material-ui/core';
 import {
   DEFAULT_MIN_DATE,
   GRANULARITIES,
@@ -35,18 +36,34 @@ const {
   SINGLE_YEAR,
 } = GRANULARITIES;
 
-const Container = styled.div`
+const Container = styled.fieldset`
   display: flex;
   margin-top: 1rem;
+  padding: 0;
+  border: none;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  padding-block-end: 0;
+  justify-content: space-between;
 
   .MuiFormControl-root {
-    margin-right: 1rem;
+    margin-right: 0.4rem;
+    flex: 1;
     &:last-child {
       margin-right: 0;
     }
   }
+  .MuiFormLabel-root {
+    font-size: 0.875rem;
+    font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+    margin-bottom: 0.4rem;
+  }
   .MuiSelect-root {
     color: ${props => props.theme.palette.text.primary};
+    font-size: 0.875rem;
     &:focus {
       background-color: transparent;
     }
@@ -56,64 +73,88 @@ const Container = styled.div`
   }
 `;
 
+const RowLegendWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+  width: 15%;
+`;
+const RowLegend = styled(Typography).attrs({
+  component: 'legend',
+})`
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+  font-size: 0.875rem;
+`;
+
 type DateRowProps = (BaseDatePickerProps | YearPickerProps | WeekPickerProps) & {
   granularity: typeof GRANULARITY_SHAPE;
+  title?: string;
 };
-const DateRow = ({ granularity, ...props }: DateRowProps) => {
-  switch (granularity) {
-    default:
-    case DAY:
-      return (
-        <Container>
-          <DayPicker {...props} />
-          <MonthPicker {...props} />
-          <YearPicker {...(props as YearPickerProps)} />
-        </Container>
-      );
-    case SINGLE_WEEK:
-    case WEEK:
-      return (
-        <Container>
-          <WeekPicker {...props} />
-          <YearPicker {...(props as YearPickerProps)} isIsoYear />
-        </Container>
-      );
-    case MONTH:
-    case SINGLE_MONTH:
-      return (
-        <Container>
-          <MonthPicker {...props} />
-          <YearPicker {...(props as YearPickerProps)} />
-        </Container>
-      );
-    case QUARTER:
-    case SINGLE_QUARTER:
-      return (
-        <Container>
-          <QuarterPicker {...props} />
-          <YearPicker {...(props as YearPickerProps)} />
-        </Container>
-      );
-    case YEAR:
-    case SINGLE_YEAR:
-      return (
-        <Container>
-          <YearPicker {...(props as YearPickerProps)} />
-        </Container>
-      );
-  }
+
+const DateRow = ({ title, granularity, ...props }: DateRowProps) => {
+  const getDatePickerComponent = () => {
+    switch (granularity) {
+      default:
+      case DAY:
+        return (
+          <>
+            <DayPicker {...props} />
+            <MonthPicker {...props} />
+            <YearPicker {...(props as YearPickerProps)} />
+          </>
+        );
+      case SINGLE_WEEK:
+      case WEEK:
+        return (
+          <>
+            <WeekPicker {...props} />
+            <YearPicker {...(props as YearPickerProps)} isIsoYear />
+          </>
+        );
+      case MONTH:
+      case SINGLE_MONTH:
+        return (
+          <>
+            <MonthPicker {...props} />
+            <YearPicker {...(props as YearPickerProps)} />
+          </>
+        );
+      case QUARTER:
+      case SINGLE_QUARTER:
+        return (
+          <>
+            <QuarterPicker {...props} />
+            <YearPicker {...(props as YearPickerProps)} />
+          </>
+        );
+      case YEAR:
+      case SINGLE_YEAR:
+        return <YearPicker {...(props as YearPickerProps)} />;
+    }
+  };
+  return (
+    <Container>
+      {title && (
+        <RowLegendWrapper>
+          <RowLegend>{title}</RowLegend>
+        </RowLegendWrapper>
+      )}
+      {getDatePickerComponent()}
+    </Container>
+  );
 };
 
 const getLabelText = (granularity: string) => {
   switch (granularity) {
     default:
-      return 'Select Dates';
+      return 'Select dates';
     case SINGLE_WEEK:
-      return 'Select Week';
+      return 'Select week';
     case SINGLE_MONTH:
-      return 'Select Month';
+      return 'Select month';
     case SINGLE_YEAR:
-      return 'Select Year';
+      return 'Select year';
   }
 };
 
@@ -204,6 +245,7 @@ export const DatePickerDialog = ({
             maxMomentDate={maxMomentDate}
             onChange={setSelectedStartDate}
             weekDisplayFormat={weekDisplayFormat}
+            title="Start date"
           />
         )}
         <DateRow
@@ -213,6 +255,7 @@ export const DatePickerDialog = ({
           maxMomentDate={maxMomentDate}
           onChange={setSelectedEndDate}
           weekDisplayFormat={weekDisplayFormat}
+          title={isSingleDate ? '' : 'End date'}
         />
         {errorMessage ? <Error>{errorMessage}</Error> : null}
       </StyledDialogContent>