Merge pull request #168 from sledilnik/override-styling

Design tweaks of the doctor page with label for override date/info
sledilnik · Dec 26, 2021 · 9d96a5a · 9d96a5a
2 parents d6fc8a4 + 76a3cb0
commit 9d96a5a
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 68 deletions.
diff --git a/src/assets/icon-booking.svg b/src/assets/icon-booking.svg
diff --git a/src/assets/icon-edit.svg b/src/assets/icon-edit.svg
diff --git a/src/assets/icon-email.svg b/src/assets/icon-email.svg
diff --git a/src/assets/icon-link--big.svg b/src/assets/icon-link--big.svg
diff --git a/src/components/DoctorCard/PageInfo/index.js b/src/components/DoctorCard/PageInfo/index.js
@@ -95,37 +95,6 @@ const PageInfo = function PageInfo({ doctor, isReportError }) {
         <Typography component="address" variant="body2" sx={{ mb: { xs: 1, sm: 1.5, md: 2 } }}>
           {doctor.fullAddress}
         </Typography>
-        {websiteText && (
-          <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
-            <Typography component="div" variant="body1">
-              <Icons.Icon name="Link" />
-            </Typography>
-            <Shared.ConditionalLink to={doctor.website} variant="body1">
-              {websiteText}
-            </Shared.ConditionalLink>
-          </Styled.PageInfo.LinkWrapper>
-        )}
-        {doctor.phone && <Shared.PageInfoPhones phones={phones} />}
-        {emailText && (
-          <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
-            <Typography component="div" variant="body1">
-              <Icons.Icon name="Link" />
-            </Typography>
-            <Shared.ConditionalLink to={`mailto:${emailText}`} variant="body1">
-              {emailText}
-            </Shared.ConditionalLink>
-          </Styled.PageInfo.LinkWrapper>
-        )}
-        {orderformText && (
-          <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
-            <Typography component="div" variant="body1">
-              <Icons.Icon name="Link" />
-            </Typography>
-            <Shared.ConditionalLink to={doctor.orderform} variant="body1">
-              {orderformText}
-            </Shared.ConditionalLink>
-          </Styled.PageInfo.LinkWrapper>
-        )}
 
         <Stack sx={{ mt: { md: 2 } }}>
           <Stack direction="row" alignItems="center" spacing={1}>
@@ -161,18 +130,54 @@ const PageInfo = function PageInfo({ doctor, isReportError }) {
           </Stack>
         </Stack>
 
-        <Styled.PageInfo.Changed>
-          {doctor.updatedAt && `${t('changedOn')}${doctor.formatUpdatedAt(lng)}`}
-          {doctor.note && <p>{doctor.note}</p>}
-        </Styled.PageInfo.Changed>
-
         {message && (
           <Alert sx={{ marginTop: '1rem' }} severity="success">
             {message}
           </Alert>
         )}
+        <Styled.PageInfo.LinksMenuWrapper>
+          {websiteText && (
+            <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
+              <Typography component="div" variant="body1">
+                <Icons.Icon name="LinkBig" />
+              </Typography>
+              <Shared.ConditionalLink to={doctor.website} variant="body1">
+                {websiteText}
+              </Shared.ConditionalLink>
+            </Styled.PageInfo.LinkWrapper>
+          )}
+          {doctor.phone && <Shared.PageInfoPhones phones={phones} />}
+          {emailText && (
+            <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
+              <Typography component="div" variant="body1">
+                <Icons.Icon name="Email" />
+              </Typography>
+              <Shared.ConditionalLink to={`mailto:${emailText}`} variant="body1">
+                {emailText}
+              </Shared.ConditionalLink>
+            </Styled.PageInfo.LinkWrapper>
+          )}
+          {orderformText && (
+            <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
+              <Typography component="div" variant="body1">
+                <Icons.Icon name="Booking" />
+              </Typography>
+              <Shared.ConditionalLink to={doctor.orderform} variant="body1">
+                {orderformText}
+              </Shared.ConditionalLink>
+            </Styled.PageInfo.LinkWrapper>
+          )}
+          <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
+            <Typography component="div" variant="body1">
+              <Icons.Icon name="ReportError" />
+            </Typography>
+            <button type="button" onClick={reportError}>
+              {t('reportError.tooltip')}
+            </button>
+          </Styled.PageInfo.LinkWrapper>
+        </Styled.PageInfo.LinksMenuWrapper>
       </div>
-      <div>
+      <Styled.PageInfo.ToolbarWrapper>
         <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
           <Styled.PageInfo.BackWrapper direction="row">
             <Stack direction="row" alignItems="center" onClick={handleBackButton}>
@@ -184,19 +189,23 @@ const PageInfo = function PageInfo({ doctor, isReportError }) {
               </Typography>
             </Stack>
           </Styled.PageInfo.BackWrapper>
-          <Tooltip title={t('reportError.tooltip')}>
-            <IconButton
-              disabled={message !== ''}
-              component="span"
-              variant="outlined"
-              onClick={reportError}
-              size="small"
+
+          {doctor.updatedAt && (
+            <Styled.PageInfo.Changed
+              className="updated-label"
+              title={
+                <Shared.Tooltip.Updated note={doctor.note} date={doctor.formatUpdatedAt(lng)} />
+              }
+              leaveTouchDelay={3000}
+              enterTouchDelay={50}
             >
-              <Icons.Icon name="ReportError" />
-            </IconButton>
-          </Tooltip>
+              <Styled.InfoWrapper direction="row" alignItems="center" spacing={1}>
+                <Icons.Icon name="Edit" /> {doctor.formatUpdatedAt(lng)}
+              </Styled.InfoWrapper>
+            </Styled.PageInfo.Changed>
+          )}
         </Stack>
-      </div>
+      </Styled.PageInfo.ToolbarWrapper>
     </CardContent>
   );
 };

diff --git a/src/components/DoctorCard/Shared/PageInfoPhones.js b/src/components/DoctorCard/Shared/PageInfoPhones.js
@@ -27,7 +27,7 @@ const PageInfoPhones = function PhoneInfoPhone({ phones }) {
   return (
     <Styled.PageInfo.LinkWrapper direction="row" alignItems="center" spacing={1}>
       <Typography component="div" variant="body1">
-        <Icons.Icon name="Phone" />
+        <Icons.Icon name="PhoneBig" />
       </Typography>
       {phoneLinks}
     </Styled.PageInfo.LinkWrapper>

diff --git a/src/components/DoctorCard/Shared/Tooltips.js b/src/components/DoctorCard/Shared/Tooltips.js
@@ -35,3 +35,15 @@ export const Availability = function Availability({ date }) {
     </Stack>
   );
 };
+
+export const Updated = function Updated({ date, note }) {
+  return (
+    <Stack sx={{ textAlign: 'center' }}>
+      <Typography variant="caption">
+        {t('changedOn')}
+        {date}
+      </Typography>
+      <Typography variant="body3">{note && <p>{note}</p>}</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/DoctorCard/styles/PageInfo.js b/src/components/DoctorCard/styles/PageInfo.js
@@ -1,6 +1,7 @@
 import { styled } from '@mui/material/styles';
 
 import Stack from '@mui/material/Stack';
+import { Tooltip } from '@mui/material';
 
 export const DCWrapper = styled(Stack)(({ theme }) => ({
   color: theme.customColors.doctor.colors.chip,
@@ -22,6 +23,7 @@ export const First = styled(Stack)(({ theme, single }) => ({
   padding: '6px 8px',
   borderRadius: single ? '5px' : '5px 0 0 5px',
 }));
+
 export const Second = styled(Stack)(({ theme }) => ({
   backgroundColor: theme.customColors.doctor.colors.chipBcg2,
   padding: '6px 8px',
@@ -35,28 +37,75 @@ export const LinkWrapper = styled(Stack)(({ theme }) => ({
     fontWeight: 700,
     lineHeight: 1.2,
   },
+  [theme.breakpoints.up('md')]: {
+    marginBlock: '10px',
+  },
+}));
 
-  '.MuiTypography-body1:first-of-type': {
-    opacity: 0.25,
+export const ToolbarWrapper = styled(Stack)(({ theme }) => ({
+  margin: '60px 0 2px 0',
+
+  [theme.breakpoints.down('md')]: {
+    marginTop: '4px',
   },
+}));
 
-  [theme.breakpoints.up('md')]: {
-    marginBlock: '14px',
+export const LinksMenuWrapper = styled(Stack)(({ theme }) => ({
+  borderTop: `1px solid ${theme.customColors.background}`,
+  borderBottom: `1px solid ${theme.customColors.background}`,
+  margin: '14px 0',
+  padding: '10px 0',
+  fontSize: '15px',
+  color: theme.customColors.dark,
+  textTransform: 'lowercase',
+  svg: {
+    width: '24px',
+    height: 'auto',
+    verticalAlign: 'middle',
+  },
+  button: {
+    color: theme.customColors.dark,
+    fontSize: '15px',
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    '&:hover': {
+      color: theme.customColors.links,
+    },
+  },
+  a: {
+    color: theme.customColors.dark,
+    fontWeight: 'normal',
+    fontSize: '15px',
+    '&:hover': {
+      color: theme.customColors.links,
+    },
   },
 }));
 
-export const BackWrapper = styled(Stack)(() => ({
+export const BackWrapper = styled(Stack)(({ theme }) => ({
   cursor: 'pointer',
+  '.MuiButtonBase-root': {
+    padding: '5px 8px',
+  },
   '.MuiTypography-body1': {
     fontSize: '0.875rem',
     fontWeight: 600,
   },
+  '&:hover': {
+    color: theme.customColors.links,
+  },
 }));
 
-export const Changed = styled(Stack)(() => ({
-  fontSize: '0.875rem',
-  fontWeight: 700,
-  letterSpacing: 0,
-  color: 'inherit',
+export const Changed = styled(Tooltip)(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.customColors.textLight,
   whiteSpace: 'nowrap',
+  border: `1px solid ${theme.customColors.borderLight}`,
+  borderRadius: '5px',
+  padding: '5px 8px',
+  svg: {
+    margin: '0 5px 0 0',
+    opacity: '0.25',
+  },
 }));
diff --git a/src/components/DoctorCard/styles/index.js b/src/components/DoctorCard/styles/index.js
@@ -21,7 +21,6 @@ export const PageInfoCard = styled(Card)(({ theme, accepts }) => {
   return {
     width: '100%',
     borderRadius: '5px',
-    marginTop: '1em',
     background: '#fff',
     boxShadow: '1px 1px 4px 0 rgba(0,0,0,0.08)',
     borderTop: `solid 4px ${acceptsColor}`,
@@ -80,20 +79,22 @@ export const PageInfoBox = styled(Stack)(({ theme }) => ({
 
   '.MuiCardContent-root': {
     width: '100%',
+    display: 'flex',
     '.MuiCardMedia-root': {
-      background: 'green',
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+
       '.leaflet-container': {
-        height: '250px',
         zIndex: 1,
+        width: '100%',
+        height: '100%',
+        borderRadius: '0 0 5px 0',
       },
-      [theme.breakpoints.up('sm')]: {
+      [theme.breakpoints.down('sm')]: {
         '.leaflet-container': {
           height: '350px',
-        },
-      },
-      [theme.breakpoints.up('md')]: {
-        '.leaflet-container': {
-          height: 'clamp(400px, 50vh, 100vh)', // ? not sure but it's working
+          borderRadius: '0 0 5px 5px',
         },
       },
     },