From b2ac9349ac3f3bf5867390ba7d21560ef4fbcd19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= Date: Thu, 26 Nov 2020 14:34:02 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20refactor=20overlay=20to?= =?UTF-8?q?=20be=20used=20with=20react=20icon=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../absenceFormular/AbsenceFormular.tsx | 5 +- .../agencySelection/AgencySelection.tsx | 2 +- src/components/app/AbsenceHandler.tsx | 5 +- src/components/app/Routing.tsx | 2 +- src/components/enquiry/WriteEnquiry.tsx | 3 +- src/components/groupChat/createChatHelpers.ts | 6 +- src/components/groupChat/groupChatHelpers.ts | 3 +- .../groupChat/joinGroupChatHelpers.ts | 5 +- src/components/overlay/Overlay.tsx | 80 +++++++------------ src/components/overlay/overlay.styles.scss | 35 +++----- .../passwordReset/PasswordReset.tsx | 3 +- src/components/profile/profileHelpers.ts | 6 +- src/components/registration/Registration.tsx | 2 +- ...rationHelper.ts => registrationHelpers.ts} | 3 +- .../session/SessionItemComponent.tsx | 3 +- src/components/session/SessionView.tsx | 3 +- .../sessionAssign/SessionAssign.tsx | 5 +- .../sessionMenu/sessionMenuHelpers.ts | 12 +-- 18 files changed, 81 insertions(+), 102 deletions(-) rename src/components/registration/{registrationHelper.ts => registrationHelpers.ts} (92%) diff --git a/src/components/absenceFormular/AbsenceFormular.tsx b/src/components/absenceFormular/AbsenceFormular.tsx index 1e768bbb6..c095d6fda 100644 --- a/src/components/absenceFormular/AbsenceFormular.tsx +++ b/src/components/absenceFormular/AbsenceFormular.tsx @@ -12,9 +12,10 @@ import { Overlay } from '../overlay/Overlay'; import { UserDataContext } from '../../globalState'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; import './absenceFormular.styles'; -export const AbsenceFormular = (props) => { +export const AbsenceFormular = () => { const { userData, setUserData } = useContext(UserDataContext); const [savedAbsence, setSavedAbsence] = useState(true); const [currentAbsentState, setCurrentAbsentState] = useState( @@ -27,7 +28,7 @@ export const AbsenceFormular = (props) => { const [isRequestInProgress, setIsRequestInProgress] = useState(false); const absenceOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('absence.changeSuccess.overlay.headline'), buttonSet: [ { diff --git a/src/components/agencySelection/AgencySelection.tsx b/src/components/agencySelection/AgencySelection.tsx index 9a26597fc..a46f71a0c 100644 --- a/src/components/agencySelection/AgencySelection.tsx +++ b/src/components/agencySelection/AgencySelection.tsx @@ -9,7 +9,7 @@ import { translate } from '../../resources/scripts/i18n/translate'; import { ajaxCallAgencySelection } from '../apiWrapper/ajaxCallPostcode'; import { FETCH_ERRORS } from '../apiWrapper/fetchData'; import { InputField, InputFieldItem } from '../inputField/InputField'; -import { extendPostcodeToBeValid } from '../registration/registrationHelper'; +import { extendPostcodeToBeValid } from '../registration/registrationHelpers'; import { ReactComponent as InfoIcon } from '../../resources/img/icons/i.svg'; import { validPostcodeLengthForConsultingType, diff --git a/src/components/app/AbsenceHandler.tsx b/src/components/app/AbsenceHandler.tsx index cf77b126b..a61178f80 100644 --- a/src/components/app/AbsenceHandler.tsx +++ b/src/components/app/AbsenceHandler.tsx @@ -10,8 +10,9 @@ import * as React from 'react'; import { ajaxCallSetAbsence } from '../apiWrapper'; import { UserDataContext } from '../../globalState'; import { useContext, useState, useEffect } from 'react'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; -export const AbsenceHandler = (props) => { +export const AbsenceHandler = () => { const absenceReminderOverlayItem: OverlayItem = { headline: translate('absence.overlayHeadline'), copy: translate('absence.overlayCopy1'), @@ -31,7 +32,7 @@ export const AbsenceHandler = (props) => { }; const absenceChangedOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('absence.changeSuccess.overlay.headline'), buttonSet: [ { diff --git a/src/components/app/Routing.tsx b/src/components/app/Routing.tsx index deb1c70d8..d65b78aca 100644 --- a/src/components/app/Routing.tsx +++ b/src/components/app/Routing.tsx @@ -146,7 +146,7 @@ export const Routing = (props: routingProps) => { )} - + ); }; diff --git a/src/components/enquiry/WriteEnquiry.tsx b/src/components/enquiry/WriteEnquiry.tsx index 9d533803e..9ad7e2b32 100644 --- a/src/components/enquiry/WriteEnquiry.tsx +++ b/src/components/enquiry/WriteEnquiry.tsx @@ -20,10 +20,11 @@ import { SessionsDataContext } from '../../globalState'; import { mobileDetailView, mobileListView } from '../app/navigationHandler'; +import { ReactComponent as EnvelopeCheckIcon } from '../../resources/img/illustrations/envelope-check.svg'; import './enquiry.styles'; const overlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/envelope-check.svg', + svg: EnvelopeCheckIcon, headline: translate('enquiry.write.overlayHeadline'), copy: translate('enquiry.write.overlayCopy'), buttonSet: [ diff --git a/src/components/groupChat/createChatHelpers.ts b/src/components/groupChat/createChatHelpers.ts index 3ddb535d7..26557958a 100644 --- a/src/components/groupChat/createChatHelpers.ts +++ b/src/components/groupChat/createChatHelpers.ts @@ -1,6 +1,8 @@ import { translate } from '../../resources/scripts/i18n/translate'; import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; import { BUTTON_TYPES } from '../button/Button'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; +import { ReactComponent as XIcon } from '../../resources/img/illustrations/x.svg'; export const TOPIC_LENGTHS = { MIN: 3, @@ -36,7 +38,7 @@ export const durationSelectOptionsSet = [ //TODO: reimplement on registration logic with link export const createChatSuccessOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('groupChat.createSuccess.overlayHeadline'), //copy: translate('groupChat.createSuccess.overlayCopy'), //copyTwo: '', @@ -55,7 +57,7 @@ export const createChatSuccessOverlayItem: OverlayItem = { }; export const createChatErrorOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.createError.overlay.headline'), buttonSet: [ { diff --git a/src/components/groupChat/groupChatHelpers.ts b/src/components/groupChat/groupChatHelpers.ts index 350f49be8..dd6b2ff8b 100644 --- a/src/components/groupChat/groupChatHelpers.ts +++ b/src/components/groupChat/groupChatHelpers.ts @@ -1,9 +1,10 @@ import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; import { translate } from '../../resources/scripts/i18n/translate'; import { BUTTON_TYPES } from '../button/Button'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; export const updateChatSuccessOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('groupChat.updateSuccess.overlayHeadline'), buttonSet: [ { diff --git a/src/components/groupChat/joinGroupChatHelpers.ts b/src/components/groupChat/joinGroupChatHelpers.ts index 490f5fc50..9d7edb233 100644 --- a/src/components/groupChat/joinGroupChatHelpers.ts +++ b/src/components/groupChat/joinGroupChatHelpers.ts @@ -1,6 +1,7 @@ import { BUTTON_TYPES, ButtonItem } from '../button/Button'; import { translate } from '../../resources/scripts/i18n/translate'; import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; +import { ReactComponent as XIcon } from '../../resources/img/illustrations/x.svg'; export const joinButtonItem: ButtonItem = { label: translate('groupChat.join.button.label.join'), @@ -13,7 +14,7 @@ export const startButtonItem: ButtonItem = { }; export const startJoinGroupChatErrorOverlay: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.joinError.overlay.headline'), buttonSet: [ { @@ -25,7 +26,7 @@ export const startJoinGroupChatErrorOverlay: OverlayItem = { }; export const joinGroupChatClosedErrorOverlay: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.join.chatClosedOverlay.headline'), buttonSet: [ { diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx index bbf9211fc..c7e44f50e 100644 --- a/src/components/overlay/Overlay.tsx +++ b/src/components/overlay/Overlay.tsx @@ -17,11 +17,11 @@ export const OVERLAY_FUNCTIONS = { export const OVERLAY_RESET_TIME = 10000; export interface OverlayItem { - imgSrc?: string; - headline?: string; + buttonSet?: ButtonItem[]; copy?: string; copyTwo?: string; - buttonSet?: ButtonItem[]; + headline?: string; + svg?: any; } export class OverlayWrapper extends React.Component { @@ -67,67 +67,43 @@ export class Overlay extends React.Component<{ render(): JSX.Element { const item = this.props.item; + const Icon = item.svg; return (
- {item.imgSrc ? ( -
- {/*TO-DO: replace svg with div element*/} - - - - - - - overlay icon -
- ) : ( - `` + {item.svg && ( + + + )} {item.headline && - item.buttonSet && - item.buttonSet[0].function === + item?.buttonSet[0].function === OVERLAY_FUNCTIONS.DEACTIVATE_ABSENCE ? (

{item.headline}

- ) : item.headline ? ( -

- ) : ( - `` - )} - {item.copy ? ( -

{item.copy}

) : ( - `` + item.headline && ( +

+ ) )} - {item.copyTwo ? ( + {item.copy &&

{item.copy}

} + {item.copyTwo && (

{item.copyTwo}

- ) : ( - `` )} - {item.buttonSet - ? item.buttonSet.map((item, i) => { - return ( -
); diff --git a/src/components/overlay/overlay.styles.scss b/src/components/overlay/overlay.styles.scss index 0a8b06dfa..506dbc398 100644 --- a/src/components/overlay/overlay.styles.scss +++ b/src/components/overlay/overlay.styles.scss @@ -1,4 +1,4 @@ -$imageSize: 335px; +$imageSize: 280px; $iconSize: 170px; .overlay { @@ -80,33 +80,20 @@ $iconSize: 170px; } } - &__iconWrapper { - display: flex; - flex-direction: row; - justify-content: center; - position: relative; - } - &__icon { width: $iconSize; height: $iconSize; - width: calc(#{$imageSize}/ 2.5); - pointer-events: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - margin: 0; - - &__background { - width: $imageSize; - height: $imageSize; - min-width: $imageSize; - min-height: $imageSize; - border-radius: $imageSize / 2; - color: $light-success; - margin: 0 $grid-base-three; + align-self: center; + + &Wrapper { + display: flex; + justify-content: center; align-self: center; + background-color: $light-success; + border-radius: $imageSize / 2; + height: $imageSize; + width: $imageSize; + margin-bottom: $grid-base-four; } } diff --git a/src/components/passwordReset/PasswordReset.tsx b/src/components/passwordReset/PasswordReset.tsx index b5c3e3d6b..2123760e1 100644 --- a/src/components/passwordReset/PasswordReset.tsx +++ b/src/components/passwordReset/PasswordReset.tsx @@ -16,6 +16,7 @@ import { inputValuesFit, strengthIndicator } from '../../resources/scripts/helpers/validateInputValue'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; import './passwordReset.styles'; export const PasswordReset = () => { @@ -42,7 +43,7 @@ export const PasswordReset = () => { const [isRequestInProgress, setIsRequestInProgress] = useState(false); const overlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('profile.functions.passwordReset.overlay.headline'), buttonSet: [ { diff --git a/src/components/profile/profileHelpers.ts b/src/components/profile/profileHelpers.ts index 4fbb8abbe..36d9a67e1 100644 --- a/src/components/profile/profileHelpers.ts +++ b/src/components/profile/profileHelpers.ts @@ -5,6 +5,8 @@ import { } from '../../resources/scripts/i18n/translate'; import { UserDataInterface } from '../../globalState'; import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; +import { ReactComponent as XIcon } from '../../resources/img/illustrations/x.svg'; export const convertUserDataObjectToArray = (object) => { const array = []; @@ -60,7 +62,7 @@ export const consultingTypeSelectOptionsSet = (userData: UserDataInterface) => { }; export const overlayItemNewRegistrationSuccess: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('profile.data.registerSuccess.overlay.headline'), buttonSet: [ { @@ -81,7 +83,7 @@ export const overlayItemNewRegistrationSuccess: OverlayItem = { }; export const overlayItemNewRegistrationError: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('profile.data.registerError.overlay.headline'), buttonSet: [ { diff --git a/src/components/registration/Registration.tsx b/src/components/registration/Registration.tsx index 663b8a225..fec235b54 100644 --- a/src/components/registration/Registration.tsx +++ b/src/components/registration/Registration.tsx @@ -29,7 +29,7 @@ import { isStringValidEmail, MIN_USERNAME_LENGTH, overlayItemRegistrationSuccess -} from './registrationHelper'; +} from './registrationHelpers'; import { postRegistration } from '../apiWrapper/ajaxCallRegistration'; import { config } from '../../resources/scripts/config'; import { setTokenInCookie } from '../sessionCookie/accessSessionCookie'; diff --git a/src/components/registration/registrationHelper.ts b/src/components/registration/registrationHelpers.ts similarity index 92% rename from src/components/registration/registrationHelper.ts rename to src/components/registration/registrationHelpers.ts index 20a829e8a..f3256baca 100644 --- a/src/components/registration/registrationHelper.ts +++ b/src/components/registration/registrationHelpers.ts @@ -1,6 +1,7 @@ import { translate } from '../../resources/scripts/i18n/translate'; import { ButtonItem, BUTTON_TYPES } from '../button/Button'; import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; +import { ReactComponent as WelcomeIcon } from '../../resources/img/illustrations/willkommen.svg'; export const MIN_USERNAME_LENGTH = 5; @@ -27,7 +28,7 @@ export const getValidationClassNames = (invalid, valid) => { }; export const overlayItemRegistrationSuccess: OverlayItem = { - imgSrc: '/../resources/img/illustrations/willkommen.svg', + svg: WelcomeIcon, headline: translate('registration.overlay.success.headline'), copy: translate('registration.overlay.success.copy'), buttonSet: [ diff --git a/src/components/session/SessionItemComponent.tsx b/src/components/session/SessionItemComponent.tsx index 810d36a22..8d2bcf4b4 100644 --- a/src/components/session/SessionItemComponent.tsx +++ b/src/components/session/SessionItemComponent.tsx @@ -34,6 +34,7 @@ import { hasUserAuthority, AUTHORITIES } from '../../globalState'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; import { Link } from 'react-router-dom'; import './session.styles'; import './session.yellowTheme.styles'; @@ -243,7 +244,7 @@ export const SessionItemComponent = (props: SessionItemProps) => { }; const overlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('session.acceptance.overlayHeadline'), buttonSet: [ { diff --git a/src/components/session/SessionView.tsx b/src/components/session/SessionView.tsx index c4b9a4257..f92709ce1 100644 --- a/src/components/session/SessionView.tsx +++ b/src/components/session/SessionView.tsx @@ -42,6 +42,7 @@ import { encodeUsername, decodeUsername } from '../../resources/scripts/helpers/encryptionHelpers'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; import './session.styles'; let typingTimeout; @@ -321,7 +322,7 @@ export const SessionView = (props) => { }; const groupChatStoppedOverlay: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('groupChat.stopped.overlay.headline'), buttonSet: [ { diff --git a/src/components/sessionAssign/SessionAssign.tsx b/src/components/sessionAssign/SessionAssign.tsx index f0d8791b5..12d6fe36c 100644 --- a/src/components/sessionAssign/SessionAssign.tsx +++ b/src/components/sessionAssign/SessionAssign.tsx @@ -28,6 +28,7 @@ import { SelectOption } from '../select/SelectDropdown'; import { FETCH_ERRORS } from '../apiWrapper/fetchData'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; export interface Consultant { consultantId: string; @@ -83,7 +84,7 @@ export const SessionAssign = (props: { value?: string }) => { const currentUserId = profileData.userId; const assignOtherOverlay: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('session.assignOther.overlayHeadline'), buttonSet: [ { @@ -95,7 +96,7 @@ export const SessionAssign = (props: { value?: string }) => { }; const assignSelfOverlay: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('session.assignSelf.overlayHeadline'), buttonSet: [ { diff --git a/src/components/sessionMenu/sessionMenuHelpers.ts b/src/components/sessionMenu/sessionMenuHelpers.ts index 9d856edc7..13ab4e08d 100644 --- a/src/components/sessionMenu/sessionMenuHelpers.ts +++ b/src/components/sessionMenu/sessionMenuHelpers.ts @@ -1,9 +1,11 @@ import { OverlayItem, OVERLAY_FUNCTIONS } from '../overlay/Overlay'; import { translate } from '../../resources/scripts/i18n/translate'; import { BUTTON_TYPES } from '../button/Button'; +import { ReactComponent as CheckIcon } from '../../resources/img/illustrations/check.svg'; +import { ReactComponent as XIcon } from '../../resources/img/illustrations/x.svg'; export const stopGroupChatSecurityOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.stopChat.securityOverlay.headline'), copy: '', buttonSet: [ @@ -21,7 +23,7 @@ export const stopGroupChatSecurityOverlayItem: OverlayItem = { }; export const stopGroupChatSuccessOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('groupChat.stopChat.successOverlay.headline'), buttonSet: [ { @@ -38,7 +40,7 @@ export const stopGroupChatSuccessOverlayItem: OverlayItem = { }; export const groupChatErrorOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.createError.overlay.headline'), buttonSet: [ { @@ -50,7 +52,7 @@ export const groupChatErrorOverlayItem: OverlayItem = { }; export const leaveGroupChatSecurityOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/x.svg', + svg: XIcon, headline: translate('groupChat.leaveChat.securityOverlay.headline'), buttonSet: [ { @@ -71,7 +73,7 @@ export const leaveGroupChatSecurityOverlayItem: OverlayItem = { }; export const leaveGroupChatSuccessOverlayItem: OverlayItem = { - imgSrc: '/../resources/img/illustrations/check.svg', + svg: CheckIcon, headline: translate('groupChat.leaveChat.successOverlay.headline'), buttonSet: [ {