From 76a3cb04d3d1991166521e7594240fd9d7dbbbc8 Mon Sep 17 00:00:00 2001 From: bananica Date: Sun, 26 Dec 2021 17:39:33 +0100 Subject: [PATCH] Design tweaks of the doctor page with label for override date/info, booking link ... --- src/assets/icon-booking.svg | 7 ++ src/assets/icon-edit.svg | 7 ++ src/assets/icon-email.svg | 7 ++ src/assets/icon-link--big.svg | 7 ++ src/components/DoctorCard/PageInfo/index.js | 105 ++++++++++-------- .../DoctorCard/Shared/PageInfoPhones.js | 2 +- src/components/DoctorCard/Shared/Tooltips.js | 12 ++ src/components/DoctorCard/styles/PageInfo.js | 69 ++++++++++-- src/components/DoctorCard/styles/index.js | 19 ++-- src/components/Shared/Icons.js | 8 ++ 10 files changed, 175 insertions(+), 68 deletions(-) create mode 100644 src/assets/icon-booking.svg create mode 100644 src/assets/icon-edit.svg create mode 100644 src/assets/icon-email.svg create mode 100644 src/assets/icon-link--big.svg diff --git a/src/assets/icon-booking.svg b/src/assets/icon-booking.svg new file mode 100644 index 00000000..de24da7e --- /dev/null +++ b/src/assets/icon-booking.svg @@ -0,0 +1,7 @@ + + + icon-booking + + + + \ No newline at end of file diff --git a/src/assets/icon-edit.svg b/src/assets/icon-edit.svg new file mode 100644 index 00000000..93c0791c --- /dev/null +++ b/src/assets/icon-edit.svg @@ -0,0 +1,7 @@ + + + icon-edit + + + + \ No newline at end of file diff --git a/src/assets/icon-email.svg b/src/assets/icon-email.svg new file mode 100644 index 00000000..f95976f9 --- /dev/null +++ b/src/assets/icon-email.svg @@ -0,0 +1,7 @@ + + + icon-email + + + + \ No newline at end of file diff --git a/src/assets/icon-link--big.svg b/src/assets/icon-link--big.svg new file mode 100644 index 00000000..41143e51 --- /dev/null +++ b/src/assets/icon-link--big.svg @@ -0,0 +1,7 @@ + + + icon-link-big + + + + \ No newline at end of file diff --git a/src/components/DoctorCard/PageInfo/index.js b/src/components/DoctorCard/PageInfo/index.js index 43dc538f..a2781fb2 100644 --- a/src/components/DoctorCard/PageInfo/index.js +++ b/src/components/DoctorCard/PageInfo/index.js @@ -93,37 +93,6 @@ const PageInfo = function PageInfo({ doctor, isReportError }) { {doctor.fullAddress} - {websiteText && ( - - - - - - {websiteText} - - - )} - {doctor.phone && } - {emailText && ( - - - - - - {emailText} - - - )} - {orderformText && ( - - - - - - {orderformText} - - - )} @@ -159,18 +128,54 @@ const PageInfo = function PageInfo({ doctor, isReportError }) { - - {doctor.updatedAt && `${t('changedOn')}${doctor.formatUpdatedAt(lng)}`} - {doctor.note &&

{doctor.note}

} - - {message && ( {message} )} + + {websiteText && ( + + + + + + {websiteText} + + + )} + {doctor.phone && } + {emailText && ( + + + + + + {emailText} + + + )} + {orderformText && ( + + + + + + {orderformText} + + + )} + + + + + + + -
+ @@ -182,19 +187,23 @@ const PageInfo = function PageInfo({ doctor, isReportError }) { - - + } + leaveTouchDelay={3000} + enterTouchDelay={50} > - - - + + {doctor.formatUpdatedAt(lng)} + + + )} -
+ ); }; diff --git a/src/components/DoctorCard/Shared/PageInfoPhones.js b/src/components/DoctorCard/Shared/PageInfoPhones.js index 19c0f42c..d3a78690 100644 --- a/src/components/DoctorCard/Shared/PageInfoPhones.js +++ b/src/components/DoctorCard/Shared/PageInfoPhones.js @@ -27,7 +27,7 @@ const PageInfoPhones = function PhoneInfoPhone({ phones }) { return ( - + {phoneLinks} diff --git a/src/components/DoctorCard/Shared/Tooltips.js b/src/components/DoctorCard/Shared/Tooltips.js index 6bb0a885..1bbcc0fa 100644 --- a/src/components/DoctorCard/Shared/Tooltips.js +++ b/src/components/DoctorCard/Shared/Tooltips.js @@ -35,3 +35,15 @@ export const Availability = function Availability({ date }) { ); }; + +export const Updated = function Updated({ date, note }) { + return ( + + + {t('changedOn')} + {date} + + {note &&

{note}

} + + ); +}; diff --git a/src/components/DoctorCard/styles/PageInfo.js b/src/components/DoctorCard/styles/PageInfo.js index 4f5fb01f..06d12761 100644 --- 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 index 6d4fa08d..fe0f55a7 100644 --- 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', }, }, }, diff --git a/src/components/Shared/Icons.js b/src/components/Shared/Icons.js index e4ffa83b..2ad8a851 100644 --- a/src/components/Shared/Icons.js +++ b/src/components/Shared/Icons.js @@ -33,6 +33,7 @@ import { ReactComponent as Students } from 'assets/icon-students.svg'; import { ReactComponent as ArrowBack } from 'assets/icon-back.svg'; import { ReactComponent as Close } from 'assets/icon-close.svg'; import { ReactComponent as Link } from 'assets/icon-link.svg'; +import { ReactComponent as LinkBig } from 'assets/icon-link--big.svg'; import { ReactComponent as PhoneBig } from 'assets/icon-phone--big.svg'; import { ReactComponent as NoPhoneBig } from 'assets/icon-phone-none--big.svg'; import { ReactComponent as Phone } from 'assets/icon-phone.svg'; @@ -45,6 +46,9 @@ import { ReactComponent as MapViewWhite } from 'assets/icon-map-view--white.svg' import { ReactComponent as ListView } from 'assets/icon-list-view.svg'; import { ReactComponent as ListViewWhite } from 'assets/icon-list-view--white.svg'; import { ReactComponent as More } from 'assets/icon-more.svg'; +import { ReactComponent as Booking } from 'assets/icon-booking.svg'; +import { ReactComponent as Edit } from 'assets/icon-edit.svg'; +import { ReactComponent as Email } from 'assets/icon-email.svg'; export { default as MenuIcon } from '@mui/icons-material/Menu'; export { default as RoomIcon } from '@mui/icons-material/Room'; @@ -88,6 +92,7 @@ const icons = { Kids, KidsWhite, Link, + LinkBig, Logo, MapMarker, Phone, @@ -107,6 +112,9 @@ const icons = { ListView, ListViewWhite, More, + Booking, + Edit, + Email, }; export const Icon = function Icon({ name, ...props }) {