feat: 🎸 refactor overlay to be used with react icon component

CaritasDeutschland · Nov 26, 2020 · b2ac934 · b2ac934
1 parent d6e614e
commit b2ac934
Show file tree

Hide file tree

Showing 18 changed files with 81 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -146,7 +146,7 @@ export const Routing = (props: routingProps) => {
 					)}
 				</div>
 			</section>
-			<AbsenceHandler></AbsenceHandler>
+			<AbsenceHandler />
 		</div>
 	);
 };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<any> {
@@ -67,67 +67,43 @@ export class Overlay extends React.Component<{
 
 	render(): JSX.Element {
 		const item = this.props.item;
+		const Icon = item.svg;
 		return (
 			<div className="overlay">
 				<div className="overlay__background"></div>
 				<div className="overlay__content">
-					{item.imgSrc ? (
-						<div className="overlay__iconWrapper">
-							{/*TO-DO: replace svg with div element*/}
-							<svg
-								className="overlay__icon__background"
-								xmlns="http://www.w3.org/2000/svg"
-								xmlnsXlink="http://www.w3.org/1999/xlink"
-								viewBox="0 0 72 72"
-							>
-								<defs>
-									<circle id="dot-a" cx="36" cy="36" r="30" />
-								</defs>
-								<use xlinkHref="#dot-a" />
-							</svg>
-							<img
-								className="overlay__icon"
-								src={item.imgSrc}
-								alt="overlay icon"
-							/>
-						</div>
-					) : (
-						``
+					{item.svg && (
+						<span className="overlay__iconWrapper">
+							<Icon className="overlay__icon" />
+						</span>
 					)}
 					{item.headline &&
-					item.buttonSet &&
-					item.buttonSet[0].function ===
+					item?.buttonSet[0].function ===
 						OVERLAY_FUNCTIONS.DEACTIVATE_ABSENCE ? (
 						<h1 className="overlay__headline">{item.headline}</h1>
-					) : item.headline ? (
-						<h3
-							className="overlay__headline"
-							dangerouslySetInnerHTML={{ __html: item.headline }}
-						></h3>
-					) : (
-						``
-					)}
-					{item.copy ? (
-						<p className="overlay__copy">{item.copy}</p>
 					) : (
-						``
+						item.headline && (
+							<h3
+								className="overlay__headline"
+								dangerouslySetInnerHTML={{
+									__html: item.headline
+								}}
+							></h3>
+						)
 					)}
-					{item.copyTwo ? (
+					{item.copy && <p className="overlay__copy">{item.copy}</p>}
+					{item.copyTwo && (
 						<p className="overlay__copy">{item.copyTwo}</p>
-					) : (
-						``
 					)}
-					{item.buttonSet
-						? item.buttonSet.map((item, i) => {
-								return (
-									<Button
-										item={item}
-										key={i}
-										buttonHandle={this.handleButtonClick}
-									/>
-								);
-						  })
-						: ``}
+					{item.buttonSet?.map((item, i) => {
+						return (
+							<Button
+								item={item}
+								key={i}
+								buttonHandle={this.handleButtonClick}
+							/>
+						);
+					})}
 				</div>
 			</div>
 		);

diff --git 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
@@ -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
@@ -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
@@ -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/...onents/registration/registrationHelper.ts → ...nents/registration/registrationHelpers.ts b/...onents/registration/registrationHelper.ts → ...nents/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
@@ -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
@@ -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: [
 		{