Merge pull request #110 from sledilnik/fix/ui-2

UI improvements and fixes - attempt 2
sledilnik · Dec 19, 2021 · 79453d2 · 79453d2
2 parents 3765936 + c271e28
commit 79453d2
Show file tree

Hide file tree

Showing 17 changed files with 270 additions and 206 deletions.
diff --git a/src/components/DoctorCard/Info.js b/src/components/DoctorCard/Info.js
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { CardContent, Typography, Tooltip, IconButton, Stack } from '@mui/material';
+import { CardContent, Typography, Tooltip, IconButton, Stack, Box } from '@mui/material';
 import slugify from 'slugify';
 
 import { useLeafletContext } from 'context/leafletContext';
@@ -63,11 +63,14 @@ const Info = function Info({ doctor, handleZoom = () => {} }) {
         <Stack direction="row" alignItems="center" spacing={1}>
           {doctor.phone && (
             <Tooltip title={doctor.phone}>
-              <Shared.Link href={`tel:${doctor.phone}`} self>
-                <IconButton>
-                  <Icons.Icon name="Phone" />
-                </IconButton>
-              </Shared.Link>
+              {/* Shared.Link must be wrapped in Mui component or see:  https://mui.com/guides/composition/#caveat-with-refs */}
+              <Box>
+                <Shared.Link href={`tel:${doctor.phone}`} self>
+                  <IconButton>
+                    <Icons.Icon name="Phone" />
+                  </IconButton>
+                </Shared.Link>
+              </Box>
             </Tooltip>
           )}
           <IconButton onClick={handleZoom}>

diff --git a/src/components/DoctorCard/styles/index.js b/src/components/DoctorCard/styles/index.js
@@ -7,7 +7,7 @@ import MuiLink from '@mui/material/Link';
 export * as PageInfo from './PageInfo';
 
 const Card = styled(MuiCard)(() => ({
-  marginInline: '0.5em',
+  // marginInline: '0.5em',
   borderRadius: '0',
   boxShadow: 'none',
 

diff --git a/src/components/Doctors/index.js b/src/components/Doctors/index.js
@@ -68,6 +68,8 @@ const Doctors = function Doctors({ itemsPerPage = 10, useShow }) {
   const zoom = state?.zoom ?? MAP.ZOOM;
   const center = state?.center ?? MAP.GEO_LOCATION.SL_CENTER;
 
+  const areDoctors = Array.isArray(doctors) && doctors.length !== 0;
+
   return (
     <Styled.Wrapper>
       {showMap && <MainMap whenCreated={setMap} doctors={doctors} center={center} zoom={zoom} />}
@@ -88,7 +90,7 @@ const Doctors = function Doctors({ itemsPerPage = 10, useShow }) {
               />
             ))}
           </Styled.InfiniteScroll>
-          <FooterInfoCard />
+          {areDoctors && <FooterInfoCard />}
           <MainScrollTop />
         </Styled.WrapperInfinite>
       )}

diff --git a/src/components/Doctors/styles/index.js b/src/components/Doctors/styles/index.js
@@ -30,6 +30,9 @@ export const WrapperInfinite = styled('div')(({ theme }) => ({
     width: '100%',
   },
 
+  [theme.breakpoints.up('sm')]: {
+    height: `${SIZES.MAP_HEIGHT.upSmall}`,
+  },
   [theme.breakpoints.up('md')]: {
     height: `${SIZES.MAP_HEIGHT.upMedium}`,
   },

diff --git a/src/components/Filters/Search.js b/src/components/Filters/Search.js
@@ -1,4 +1,3 @@
-import Paper from '@mui/material/Paper';
 import { useLocation } from 'react-router-dom';
 
 import * as Icons from 'components/Shared/Icons';
@@ -21,31 +20,22 @@ const Search = function Search() {
 
   useDebounce(() => setSearchValue(value), 500, [value]);
   return (
-    <Styled.Search.SearchBox>
-      <Paper
-        elevation={0}
-        sx={{
-          color: theme => theme.customColors.dark,
-          background: 'transparent',
-          borderRadius: '24px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <Styled.Search.Search>
-          <Styled.Search.SearchIconWrapper>
-            <Icons.Icon name="Search" />
-          </Styled.Search.SearchIconWrapper>
-          <Styled.Search.InputBase
-            placeholder={t('search')}
-            value={value}
-            onChange={handleSearchChange}
-            aria-label="search"
-            type="search"
-          />
-        </Styled.Search.Search>
-      </Paper>
-    </Styled.Search.SearchBox>
+    // <Styled.Search.SearchBox>
+    <Styled.Search.SearchPaper elevation={0}>
+      <Styled.Search.Search>
+        <Styled.Search.SearchIconWrapper>
+          <Icons.Icon name="Search" />
+        </Styled.Search.SearchIconWrapper>
+        <Styled.Search.InputBase
+          placeholder={t('search')}
+          value={value}
+          onChange={handleSearchChange}
+          aria-label="search"
+          type="search"
+        />
+      </Styled.Search.Search>
+    </Styled.Search.SearchPaper>
+    // </Styled.Search.SearchBox>
   );
 };
 

diff --git a/src/components/Filters/styles/Search.js b/src/components/Filters/styles/Search.js
@@ -2,12 +2,13 @@ import { styled } from '@mui/material/styles';
 import MuiInputBase from '@mui/material/InputBase';
 import MuiTextField from '@mui/material/TextField';
 import MuiBox from '@mui/material/Box';
+import MuiPaper from '@mui/material/Paper';
 
 export const Search = styled('div')(({ theme }) => ({
   position: 'relative',
-  borderRadius: '24px',
-  backgroundColor: 'transparent',
-  width: '100%',
+  borderRadius: '25px',
+  border: `1px solid ${theme.customColors.borderLight}`,
+  height: '48px',
 
   '&:focus-within': {
     color: theme.customColors.dark,
@@ -25,29 +26,55 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
   justifyContent: 'center',
 }));
 
-export const InputBase = styled(MuiInputBase)(({ theme }) => ({
-  color: 'inherit',
-  width: '100%',
-  '& .MuiInputBase-input': {
-    fontWeight: 600,
-    letterSpacing: 0,
-    fontSize: '14px',
-    height: '48px',
-    padding: theme.spacing(0, 1, 0, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    width: '100%',
-    borderRadius: '24px',
-  },
-}));
+export const InputBase = styled(MuiInputBase)(() => {
+  // ios 16/14 = 1.14285714286, 14/16 = 0.875
+  const scaleUpRatio = 1.14285714286;
+  const scaleDownRatio = 0.875;
+
+  const height = `${48 * scaleUpRatio}px`;
+  const paddingBlock = 0;
+  const paddingRight = `${8 * scaleUpRatio}px`;
+  const paddingLeft = `${(16 + 32) * scaleUpRatio}px`; // before `calc(1em + ${theme.spacing(4)})`,
+  // const borderRadius = `${25 * scaleUpRatio}px`;
+  // const border = `${scaleUpRatio}px solid ${theme.customColors.borderLight}`;
+  const width = `${100 * scaleUpRatio}%`;
+  // const width = '100%';
+
+  const transform = `scale(${scaleDownRatio})`;
+
+  return {
+    color: 'inherit',
+    width,
+    /* scale down by 14/16 = 87,5% */
+
+    '& .MuiInputBase-input': {
+      // width,
+      fontWeight: 600,
+      letterSpacing: 0,
+      fontSize: '16px',
+      height,
+      paddingBlock,
+      paddingRight,
+      // vertical padding + font size from searchIcon
+      paddingLeft,
+      // borderRadius,
+      // border,
+
+      transform,
+      transformOrigin: 'left top',
+
+      '::placeholder': { fontSize: '16px' },
+    },
+  };
+});
 
 export const TextField = styled(MuiTextField)({
   '& .MuiOutlinedInput-root': {
     paddingBlock: '2px',
     fontSize: '13px',
     fontWeight: 600,
     letterSpacing: 0,
-    borderRadius: '24px',
+    borderRadius: '25px',
     '& fieldset': { border: 'none' },
     '&:hover fieldset': {
       backgroundColor: 'rgba(0, 0, 0, 0.04)',
@@ -61,30 +88,47 @@ export const TextField = styled(MuiTextField)({
 export const SearchBox = styled(MuiBox)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
+  flexGrow: 1,
+  gridArea: 'search',
+
+  width: '150px',
+  height: '48px',
+
+  margin: '0 12px 0 0',
+  border: 'none',
   borderRadius: '25px',
-  border: `1px solid ${theme.customColors.borderLight}`,
   background: '#fff',
-  gridArea: 'search',
 
-  '& .MuiPaper-root': {
-    width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    width: 'auto',
   },
 
   [theme.breakpoints.up('md')]: {
+    margin: 0,
     width: '400px',
   },
+}));
 
-  [theme.breakpoints.down('md')]: {
+export const SearchPaper = styled(MuiPaper)(({ theme }) => ({
+  color: theme.customColors.dark,
+  background: 'transparent',
+  borderRadius: '25px',
+  display: 'flex',
+  alignItems: 'center',
+  flexGrow: 1,
+
+  margin: '0 12px 0 0',
+  width: '150px',
+  [theme.breakpoints.up('sm')]: {
     width: 'auto',
-    flexGrow: 1,
-    margin: '0 12px 0 0',
-    border: 'none',
-    background: '#fff',
-    height: '48px',
-
-    '& input': {
-      border: `1px solid ${theme.customColors.borderLight}`,
-      maxWidth: '100%',
-    },
+    // marginRight: 'auto',
+    // maxWidth: '400px',
+  },
+
+  [theme.breakpoints.up('md')]: {
+    margin: 0,
+    marginRight: '12px',
+    width: 'auto',
+    justifyContent: 'end',
   },
 }));