fix desktop

beyondessential · Nov 7, 2024 · eeb8d62 · eeb8d62
1 parent e84e2d0
commit eeb8d62
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 14 deletions.
diff --git a/packages/datatrak-web/src/features/EntitySelector/ResultsList.tsx b/packages/datatrak-web/src/features/EntitySelector/ResultsList.tsx
@@ -9,16 +9,23 @@ import { FormLabelProps, Typography } from '@material-ui/core';
 import RoomIcon from '@material-ui/icons/Room';
 import { DatatrakWebEntityDescendantsRequest } from '@tupaia/types';
 import { SelectList } from '@tupaia/ui-components';
+import { useIsMobile } from '../../utils';
 
 const DARK_BLUE = '#004975';
 
 const ListWrapper = styled.div`
+  padding-top: 1rem;
+  border-top: 1px solid ${({ theme }) => theme.palette.divider};
   display: flex;
   flex-direction: column;
   overflow: auto;
   margin-top: 0.9rem;
-  li .MuiSvgIcon-root {
+
+  li .MuiSvgIcon-root:not(.MuiSvgIcon-colorPrimary) {
     color: ${DARK_BLUE};
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      font-size: 1.8rem;
+    }
   }
 `;
 
@@ -28,14 +35,26 @@ const SubListWrapper = styled.div`
   }
 `;
 
-const Subtitle = styled(Typography).attrs({
-  variant: 'h3',
-})`
-  font-size: 0.9375rem;
-  margin-block-end: 0.2rem;
+const MobileResultItem = styled(Typography)`
+  font-size: 0.875rem;
+  line-height: 1.3;
+  margin-left: 0.5rem;
+
+  > div:last-child {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
 `;
 
 export const ResultItem = ({ name, parentName }) => {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return (
+      <MobileResultItem>
+        <div>{name}</div>
+        <div>{parentName}</div>
+      </MobileResultItem>
+    );
+  }
   return (
     <>
       {name} | <span className="text-secondary">{parentName}</span>
@@ -59,7 +78,8 @@ type ListItemType = Record<string, unknown> & {
 
 type SearchResults = DatatrakWebEntityDescendantsRequest.ResBody;
 interface ResultsListProps {
-  value: string;
+  value?: string;
+  searchValue?: string;
   searchResults?: SearchResults;
   onSelect: (value: ListItemType) => void;
   showRecentEntities?: boolean;
@@ -68,6 +88,7 @@ interface ResultsListProps {
 
 export const ResultsList = ({
   value,
+  searchValue,
   searchResults,
   onSelect,
   showRecentEntities,
@@ -95,17 +116,21 @@ export const ResultsList = ({
     <ListWrapper>
       {recentEntities?.length > 0 && (
         <SubListWrapper>
-          <Subtitle>Recent entities</Subtitle>
-          <SelectList items={recentEntities} onSelect={onSelect} variant="fullPage" />
+          <SelectList
+            items={recentEntities}
+            onSelect={onSelect}
+            subTitle="Recent entities"
+            variant="borderless"
+          />
         </SubListWrapper>
       )}
       <SubListWrapper>
-        {showRecentEntities && <Subtitle>All entities</Subtitle>}
         <SelectList
           items={displayResults}
           onSelect={onSelect}
-          variant="fullPage"
+          variant="borderless"
           noResultsMessage={noResultsMessage}
+          subTitle={!searchValue ? 'All entities' : undefined}
         />
       </SubListWrapper>
     </ListWrapper>

diff --git a/packages/datatrak-web/src/features/GroupedSurveyList.tsx b/packages/datatrak-web/src/features/GroupedSurveyList.tsx
@@ -52,6 +52,7 @@ export const GroupedSurveyList = ({
         onSelect={onSelectSurvey}
         label={label}
         labelProps={labelProps}
+        variant="fullPage"
       />
       {error && <FormHelperText error>{error}</FormHelperText>}
     </ListWrapper>

diff --git a/packages/ui-components/src/components/SelectList/ListItem.tsx b/packages/ui-components/src/components/SelectList/ListItem.tsx
@@ -77,6 +77,12 @@ const IconWrapper = styled.div`
   }
 `;
 
+const CheckIcon = styled(Check)`
+  &.MuiSvgIcon-root {
+    font-size: 1.5rem;
+  }
+`;
+
 interface ListItemProps {
   item: ListItemType;
   children?: ReactNode;
@@ -132,7 +138,7 @@ export const ListItem = ({ item, children, onSelect }: ListItemProps) => {
             {isNested && <Arrow $open={open} />}
           </ButtonContainer>
         </Wrapper>
-        {selected && <Check color="primary" fontSize="medium" />}
+        {selected && <CheckIcon color="primary" />}
       </BaseListItem>
       {isNested && <Collapse in={open}>{children}</Collapse>}
     </li>

diff --git a/packages/ui-components/src/components/SelectList/SelectList.tsx b/packages/ui-components/src/components/SelectList/SelectList.tsx
@@ -35,7 +35,11 @@ const ListWrapper = styled.div<{
 }>`
   overflow-y: auto;
   max-height: 100%;
-  ${({ $variant }) => ($variant === 'fullPage' ? TopBorder : FullBorder)};
+  ${({ $variant }) => {
+    if ($variant === 'fullPage') return FullBorder;
+    if ($variant === 'inline') return TopBorder;
+    return '';
+  }}
   flex: 1;
   height: 100%;
 `;
@@ -67,7 +71,7 @@ interface SelectListProps {
   onSelect: (item: ListItemType) => void;
   label?: string;
   ListItem?: React.ElementType;
-  variant?: 'fullPage' | 'inline';
+  variant?: 'fullPage' | 'inline' | 'borderless';
   labelProps?: FormLabelProps & {
     component?: React.ElementType;
   };