styling project select form

packages/datatrak-web/src/api/queries/useProjects.ts

@@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebProjectsRequest } from '@tupaia/types';
 import { get } from '../api';
 
-export const useProjects = (sortByAccess = true) => {
+export const useProjects = (sortByAccess = false) => {
   const { data, ...query } = useQuery(
     ['projects'],
     (): Promise<DatatrakWebProjectsRequest.ResBody> => get('projects'),

packages/datatrak-web/src/components/ChangeProjectButton.tsx

@@ -30,7 +30,7 @@ const Container = styled.div`
     }
 
     :before {
-      color: ${({ theme }) => theme.palette.text.secondary};
+      color: ${({ theme }) => theme.palette.text.primary};
       content: '|';
       margin-inline: 0.25rem;
     }
@@ -56,12 +56,16 @@ const ProjectButton = styled(Button).attrs({
   .MuiButton-root,
   .MuiButton-label {
     font-size: inherit;
-    font-weight: inherit;
+    font-weight: 500;
     line-height: inherit;
     inline-size: fit-content;
     margin: 0;
     padding: 0;
   }
+
+  .MuiTypography-root & .MuiButton-label {
+    font-weight: 400;
+  }
 `;
 
 export const ChangeProjectButton = ({ className }: { className?: string }) => {

packages/datatrak-web/src/components/SlideTransition.tsx

@@ -0,0 +1,17 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { TransitionProps } from '@material-ui/core/transitions';
+import Slide from '@material-ui/core/Slide';
+
+/**
+ * Taken from [Material UI's example](https://v4.mui.com/components/dialogs/#full-screen-dialogs) to make the dialog slide up from the bottom
+ */
+export const SlideTransition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="left" ref={ref} {...props} />;
+});

packages/datatrak-web/src/components/index.ts

@@ -15,6 +15,7 @@ export { InputHelperText } from './InputHelperText';
 export { Modal } from './Modal';
 export { PageTitleBar } from './PageTitleBar';
 export { SmallModal } from './SmallModal';
+export { SlideTransition } from './SlideTransition';
 export { TextInput } from './TextInput';
 export { Tile, LoadingTile } from './Tile';
 export { Toast } from './Toast';

packages/datatrak-web/src/layout/UserMenu/ProjectSelectModal.tsx

@@ -4,14 +4,15 @@
  */
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { TransitionProps } from '@material-ui/core/transitions';
-import { Paper, Slide } from '@material-ui/core';
+import { Paper } from '@material-ui/core';
 import { ProjectSelectForm } from '@tupaia/ui-components';
 import { RequestProjectAccess } from '../../features';
 import { useCurrentUserContext, useEditUser, useProjects } from '../../api';
-import { Modal } from '../../components';
+import { Modal, SlideTransition } from '../../components';
 
 const StyledModal = styled(Modal)`
+  //  The mobile styles are specific to the project select modal in datatrak-web so they are included here
+  //  instead of in the ui-components select list component
   ${({ theme }) => theme.breakpoints.down('sm')} {
     .MuiPaper-root {
       height: 100%;
@@ -31,37 +32,54 @@ const StyledModal = styled(Modal)`
 
     .list-wrapper {
       border: none;
+      border-radius: 0.625rem;
     }
 
-    h2 {
+    h2.MuiFormLabel-root {
       color: ${({ theme }) => theme.palette.text.secondary};
     }
 
-    //  Hide the close button on mobile
+    // Hide the close button on mobile
     .MuiButtonBase-root.MuiIconButton-root {
       display: none;
     }
 
-    // Style select list
+    // Select list
     .MuiList-root {
-      border-radius: 10px;
+      border-radius: 0.625rem;
       background: ${({ theme }) => theme.palette.background.paper};
-      padding: 0.3rem 1rem;
-      overflow: auto;
+      padding-inline: 1rem;
+      padding-block: 0.3rem;
 
-      li {
+      > li {
         border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 
         .MuiButtonBase-root {
           font-size: 0.75rem;
-          padding: 0.6rem 0;
+          padding-inline: 0;
+          padding-block: 0.75rem;
+
+          &.Mui-selected {
+            border: none;
+          }
         }
       }
     }
+
+    // Modal Actions
+    .MuiDialogActions-root {
+      .MuiButton-root:first-child {
+        display: none;
+      }
+      .MuiButton-root {
+        flex: 1;
+        margin: 0;
+      }
+    }
   }
 `;
 
-const Wrapper = styled(Paper)`
+const PaperComponent = styled(Paper)`
   padding: 1rem 1.25rem;
   max-width: none;
   width: 48rem;
@@ -75,17 +93,6 @@ interface ModalProps {
   onBack: () => void;
 }
 
-/**
- * Taken from [Material UI's example](https://v4.mui.com/components/dialogs/#full-screen-dialogs) to make the dialog slide up from the bottom
- */
-// Todo: Make re-usable transition component
-const Transition = React.forwardRef(function Transition(
-  props: TransitionProps & { children?: React.ReactElement },
-  ref: React.Ref<unknown>,
-) {
-  return <Slide direction="left" ref={ref} {...props} />;
-});
-
 export const ProjectSelectModal = ({ onBack }: ModalProps) => {
   const { projectId } = useCurrentUserContext();
   const [requestAccessProjectCode, setRequestAccessProjectCode] = useState<string | null>(null);
@@ -97,10 +104,10 @@ export const ProjectSelectModal = ({ onBack }: ModalProps) => {
     <StyledModal
       open
       onClose={onBack}
-      PaperComponent={Wrapper}
+      PaperComponent={PaperComponent}
       disablePortal={false}
       fullScreen
-      TransitionComponent={Transition}
+      TransitionComponent={SlideTransition}
     >
       {requestAccessProjectCode ? (
         <RequestProjectAccess

packages/ui-components/src/components/SelectList/ListItem.tsx

@@ -77,6 +77,7 @@ const IconWrapper = styled.div<{ $hasIcon?: boolean }>`
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 1.3rem;
     display: ${({ $hasIcon }) => ($hasIcon ? 'flex' : 'none')};
   }
 `;

packages/ui-components/src/features/ProjectSelectForm.tsx

@@ -10,6 +10,12 @@ import { DialogActions, Typography, useTheme } from '@material-ui/core';
 import { Lock as LockIcon, WatchLater as ClockIcon } from '@material-ui/icons';
 import { SelectList, SpinningLoader, Button as UIButton } from '../components';
 
+const Title = styled(Typography).attrs({
+  variant: 'h1',
+})`
+  font-size: 1.125rem;
+`;
+
 const Button = styled(UIButton)`
   text-transform: none;
   font-size: 0.875rem;
@@ -133,7 +139,7 @@ export const ProjectSelectForm = ({
 
   return (
     <>
-      <Typography variant="h1">Select project</Typography>
+      <Title>Select project</Title>
       {isLoading ? (
         <LoadingContainer>
           <SpinningLoader />