From 6a6347c0463aa778df52c7312d7de24e629dabb9 Mon Sep 17 00:00:00 2001
From: Marc Itzenthaler <itzenthaler@web-mi.de>
Date: Wed, 27 Sep 2023 11:10:56 +0200
Subject: [PATCH] style: fixed layout for create chat view and group chat info

---
 src/components/groupChat/CreateChatView.tsx   | 146 +++++-----
 src/components/groupChat/GroupChatInfo.tsx    |  55 ++--
 .../groupChat/createChat.styles.scss          |   2 +
 .../groupChat/groupChatInfo.styles.scss       | 254 ++++++++++++++++++
 4 files changed, 357 insertions(+), 100 deletions(-)
 create mode 100644 src/components/groupChat/groupChatInfo.styles.scss

diff --git a/src/components/groupChat/CreateChatView.tsx b/src/components/groupChat/CreateChatView.tsx
index 27380a3df..0eda95270 100644
--- a/src/components/groupChat/CreateChatView.tsx
+++ b/src/components/groupChat/CreateChatView.tsx
@@ -514,86 +514,84 @@ export const CreateGroupChatView = (props) => {
 					</p>
 				</div>
 			)}
-			<div id="createChatForm" className="createChat__content">
-				<form>
-					<InputField
-						item={chatTopicInputItem}
-						inputHandle={handleChatTopicInput}
+			<form id="createChatForm" className="createChat__content">
+				<InputField
+					item={chatTopicInputItem}
+					inputHandle={handleChatTopicInput}
+				/>
+				<div className="formWrapper react-datepicker--date">
+					<DatePicker
+						selected={selectedDate}
+						onChange={(date) => handleDatePicker(date)}
+						onFocus={() => setIsDateInputFocus(true)}
+						onBlur={() => setIsDateInputFocus(false)}
+						locale="de"
+						minDate={new Date()}
+						maxDate={new Date(2999, 12, 31)}
+						dateFormat="cccccc, dd. MMMM yyyy"
 					/>
-					<div className="formWrapper react-datepicker--date">
-						<DatePicker
-							selected={selectedDate}
-							onChange={(date) => handleDatePicker(date)}
-							onFocus={() => setIsDateInputFocus(true)}
-							onBlur={() => setIsDateInputFocus(false)}
-							locale="de"
-							minDate={new Date()}
-							maxDate={new Date(2999, 12, 31)}
-							dateFormat="cccccc, dd. MMMM yyyy"
-						/>
-						<span
-							className={
-								isDateInputFocused || selectedDate
-									? `react-datepicker__label react-datepicker__label--active`
-									: `react-datepicker__label`
-							}
-							aria-label="date input label"
-						>
-							{translate('groupChat.create.dateInput.label')}
-						</span>
-					</div>
-					<div className="formWrapper react-datepicker--time">
-						<DatePicker
-							selected={selectedTime}
-							onChange={(time) => handleTimePicker(time)}
-							onFocus={() => setIsTimeInputFocus(true)}
-							onBlur={() => setIsTimeInputFocus(false)}
-							locale="de"
-							showTimeSelect
-							showTimeSelectOnly
-							timeIntervals={15}
-							timeCaption="Uhrzeit"
-							dateFormat="HH:mm"
-						/>
-						<span
-							className={
-								isTimeInputFocused || selectedTime
-									? `react-datepicker__label react-datepicker__label--active`
-									: `react-datepicker__label`
-							}
-							aria-label="time input label"
-						>
-							{translate('groupChat.create.beginDateInput.label')}
-						</span>
-					</div>
-					<SelectDropdown {...durationSelectDropdown} />
-					<Checkbox
-						item={repetitiveCheckboxItem}
-						checkboxHandle={() =>
-							setSelectedRepetitive(!selectedRepetitive)
+					<span
+						className={
+							isDateInputFocused || selectedDate
+								? `react-datepicker__label react-datepicker__label--active`
+								: `react-datepicker__label`
 						}
+						aria-label="date input label"
+					>
+						{translate('groupChat.create.dateInput.label')}
+					</span>
+				</div>
+				<div className="formWrapper react-datepicker--time">
+					<DatePicker
+						selected={selectedTime}
+						onChange={(time) => handleTimePicker(time)}
+						onFocus={() => setIsTimeInputFocus(true)}
+						onBlur={() => setIsTimeInputFocus(false)}
+						locale="de"
+						showTimeSelect
+						showTimeSelectOnly
+						timeIntervals={15}
+						timeCaption="Uhrzeit"
+						dateFormat="HH:mm"
 					/>
-					{isEditGroupChatMode ? (
-						<div className="createChat__buttonsWrapper">
-							<Button
-								item={buttonSetCancel}
-								buttonHandle={handleBackButton}
-							/>
-							<Button
-								item={buttonSetSave}
-								buttonHandle={handleCreateAndUpdateButton}
-								disabled={isSaveButtonDisabled}
-							/>
-						</div>
-					) : (
+					<span
+						className={
+							isTimeInputFocused || selectedTime
+								? `react-datepicker__label react-datepicker__label--active`
+								: `react-datepicker__label`
+						}
+						aria-label="time input label"
+					>
+						{translate('groupChat.create.beginDateInput.label')}
+					</span>
+				</div>
+				<SelectDropdown {...durationSelectDropdown} />
+				<Checkbox
+					item={repetitiveCheckboxItem}
+					checkboxHandle={() =>
+						setSelectedRepetitive(!selectedRepetitive)
+					}
+				/>
+				{isEditGroupChatMode ? (
+					<div className="createChat__buttonsWrapper">
 						<Button
-							item={buttonSetCreate}
+							item={buttonSetCancel}
+							buttonHandle={handleBackButton}
+						/>
+						<Button
+							item={buttonSetSave}
 							buttonHandle={handleCreateAndUpdateButton}
-							disabled={isCreateButtonDisabled}
+							disabled={isSaveButtonDisabled}
 						/>
-					)}
-				</form>
-			</div>
+					</div>
+				) : (
+					<Button
+						item={buttonSetCreate}
+						buttonHandle={handleCreateAndUpdateButton}
+						disabled={isCreateButtonDisabled}
+					/>
+				)}
+			</form>
 
 			{overlayActive && (
 				<Overlay
diff --git a/src/components/groupChat/GroupChatInfo.tsx b/src/components/groupChat/GroupChatInfo.tsx
index 09151451e..5fa11f5b1 100644
--- a/src/components/groupChat/GroupChatInfo.tsx
+++ b/src/components/groupChat/GroupChatInfo.tsx
@@ -32,7 +32,7 @@ import {
 import { decodeUsername } from '../../utils/encryptionHelpers';
 import { ReactComponent as BackIcon } from '../../resources/img/icons/arrow-left.svg';
 import { ReactComponent as GroupChatIcon } from '../../resources/img/icons/speech-bubble.svg';
-import '../profile/profile.styles';
+import './groupChatInfo.styles';
 import { Text } from '../text/Text';
 import { FlyoutMenu } from '../flyoutMenu/FlyoutMenu';
 import { getValueFromCookie } from '../sessionCookie/accessSessionCookie';
@@ -226,47 +226,47 @@ export const GroupChatInfo = () => {
 	});
 
 	return (
-		<div className="profile__wrapper">
-			<div className="profile__header">
-				<div className="profile__header__wrapper">
+		<div className="groupChatInfo__wrapper">
+			<div className="groupChatInfo__header">
+				<div className="groupChatInfo__header__wrapper">
 					<Link
 						to={`${listPath}/${activeSession.item.groupId}/${
 							activeSession.item.id
 						}${getSessionListTab()}`}
-						className="profile__header__backButton"
+						className="groupChatInfo__header__backButton"
 					>
 						<BackIcon />
 					</Link>
-					<h3 className="profile__header__title profile__header__title--withBackButton">
+					<h3 className="groupChatInfo__header__title">
 						{translate('groupChat.info.headline')}
 					</h3>
 				</div>
-				<div className="profile__header__metaInfo">
-					<p className="profile__header__username profile__header__username--withBackButton">
+				<div className="groupChatInfo__header__metaInfo">
+					<p className="groupChatInfo__header__username">
 						{activeSession.item.topic}
 					</p>
 				</div>
 			</div>
-			<div className="profile__innerWrapper">
-				<div className="profile__user">
-					<div className="profile__icon">
-						<GroupChatIcon className="profile__icon--chatInfo" />
+			<div className="groupChatInfo__innerWrapper">
+				<div className="groupChatInfo__user">
+					<div className="groupChatInfo__icon">
+						<GroupChatIcon className="groupChatInfo__icon--chatInfo" />
 						{activeSession.item.active ? (
-							<span className="profile__icon--active"></span>
+							<span className="groupChatInfo__icon--active"></span>
 						) : null}
 					</div>
 					<h2>{activeSession.item.topic}</h2>
 				</div>
 				{activeSession.item.active && activeSession.item.subscribed ? (
-					<div className="profile__innerWrapper__stopButton">
+					<div className="groupChatInfo__innerWrapper__stopButton">
 						<Button
 							item={stopChatButtonSet}
 							buttonHandle={handleStopGroupChatButton}
 						/>
 					</div>
 				) : null}
-				<div className="profile__content">
-					<div className="profile__content__item profile__data">
+				<div className="groupChatInfo__content">
+					<div className="groupChatInfo__content__item groupChatInfo__data">
 						<Text
 							text={translate(
 								'groupChat.info.subscribers.headline'
@@ -275,7 +275,7 @@ export const GroupChatInfo = () => {
 						/>
 
 						{featureGroupChatV2Enabled && isV2GroupChat && (
-							<div className="profile__groupChatContainer">
+							<div className="groupChatInfo__groupChatContainer">
 								<GroupChatCopyLinks
 									id={activeSession.item.groupId}
 									groupChatId={activeSession.item.id.toString()}
@@ -285,10 +285,10 @@ export const GroupChatInfo = () => {
 						{subscriberList ? (
 							subscriberList.map((subscriber, index) => (
 								<div
-									className="profile__data__item"
+									className="groupChatInfo__data__item"
 									key={index}
 								>
-									<div className="profile__data__content profile__data__content--subscriber">
+									<div className="groupChatInfo__data__content groupChatInfo__data__content--subscriber">
 										{subscriber.displayName
 											? decodeUsername(
 													subscriber.displayName
@@ -365,8 +365,8 @@ export const GroupChatInfo = () => {
 								</div>
 							))
 						) : (
-							<div className="profile__data__item">
-								<p className="profile__data__content profile__data__content--empty">
+							<div className="groupChatInfo__data__item">
+								<p className="groupChatInfo__data__content groupChatInfo__data__content--empty">
 									{translate(
 										'groupChat.info.subscribers.empty'
 									)}
@@ -375,17 +375,20 @@ export const GroupChatInfo = () => {
 						)}
 					</div>
 
-					<div className="profile__content__item profile__data">
+					<div className="groupChatInfo__content__item groupChatInfo__data">
 						<Text
 							text={translate('groupChat.info.settings.headline')}
 							type="divider"
 						/>
 						{preparedSettings.map((item, index) => (
-							<div className="profile__data__item" key={index}>
-								<p className="profile__data__label">
+							<div
+								className="groupChatInfo__data__item"
+								key={index}
+							>
+								<p className="groupChatInfo__data__label">
 									{item.label}
 								</p>
-								<p className="profile__data__content">
+								<p className="groupChatInfo__data__content">
 									{item.value}
 								</p>
 							</div>
@@ -393,7 +396,7 @@ export const GroupChatInfo = () => {
 						{isGroupChatOwner(activeSession, userData) &&
 						!activeSession.item.active ? (
 							<Link
-								className="profile__innerWrapper__editButton"
+								className="groupChatInfo__innerWrapper__editButton"
 								to={{
 									pathname: `${listPath}/${
 										activeSession.item.groupId
diff --git a/src/components/groupChat/createChat.styles.scss b/src/components/groupChat/createChat.styles.scss
index cdba2fb80..06bd1d551 100644
--- a/src/components/groupChat/createChat.styles.scss
+++ b/src/components/groupChat/createChat.styles.scss
@@ -7,6 +7,7 @@ $inputSpacing: 32px;
 		flex-direction: column;
 		background-color: $background-light;
 		width: 100vw;
+		height: 100%;
 
 		@include breakpoint($fromLarge) {
 			width: 100%;
@@ -114,6 +115,7 @@ $inputSpacing: 32px;
 		align-items: center;
 		height: 100%;
 		margin-top: $grid-base-three;
+		overflow-y: auto;
 
 		.inputField {
 			width: $chat-input-width;
diff --git a/src/components/groupChat/groupChatInfo.styles.scss b/src/components/groupChat/groupChatInfo.styles.scss
new file mode 100644
index 000000000..c5e0a3e79
--- /dev/null
+++ b/src/components/groupChat/groupChatInfo.styles.scss
@@ -0,0 +1,254 @@
+$iconSize: 24px;
+$groupChatIconSize: 40px;
+$inputMaxWidth: 500px;
+
+.groupChatInfo {
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		align-items: stretch;
+		height: 100%;
+		background-color: $background-light;
+		width: 100vw;
+
+		@include breakpoint($fromLarge) {
+			width: auto;
+		}
+
+		.button__wrapper {
+			text-align: center;
+		}
+	}
+
+	&__header {
+		flex: 0;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: $grid-base-three $grid-base-two;
+		position: relative;
+		background-color: $background-lighter;
+
+		@include breakpoint($fromMedium) {
+			padding: $grid-base-three;
+		}
+
+		@include breakpoint($fromLarge) {
+			align-items: flex-start;
+			background-color: $background-light;
+		}
+
+		&__backButton {
+			display: block;
+			position: absolute;
+			left: 0;
+			line-height: 32px;
+			cursor: pointer;
+
+			@include breakpoint($fromLarge) {
+				position: static;
+			}
+
+			svg {
+				width: $iconSize;
+				height: $iconSize;
+				fill: var(--skin-color-secondary-contrast-safe, $secondary);
+
+				svg path {
+					fill: var(--skin-color-secondary-contrast-safe, $secondary);
+				}
+
+				&:hover {
+					fill: var(--skin-color-primary, $primary);
+
+					svg path {
+						fill: var(--skin-color-primary, $primary);
+					}
+				}
+			}
+		}
+
+		&__wrapper {
+			display: flex;
+			flex-direction: row;
+			position: relative;
+			width: 100%;
+			flex-wrap: wrap;
+		}
+
+		&__title {
+			margin: 0 auto;
+
+			@include breakpoint($fromLarge) {
+				margin: 0 0 0 $grid-base;
+			}
+		}
+
+		&__username {
+			font-size: $font-size-secondary;
+			line-height: $line-height-secondary;
+			color: $tertiary;
+			margin: 0;
+
+			@include breakpoint($fromLarge) {
+				margin-left: $grid-base-four;
+			}
+		}
+	}
+
+	&__innerWrapper {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow-x: hidden;
+		overflow-y: auto;
+		background-color: $background-light;
+		margin-top: 0;
+
+		&__stopButton {
+			margin-bottom: $grid-base-four;
+		}
+
+		&__editButton {
+			display: block;
+			margin-top: $grid-base-four;
+		}
+	}
+
+	&__user {
+		text-align: center;
+		padding: 0 $grid-base-two $grid-base;
+		margin-top: $grid-base-three;
+
+		@include breakpoint($fromMedium) {
+			padding: 0 $grid-base-three $grid-base;
+		}
+	}
+
+	&__icon {
+		background-color: $white;
+		border-radius: 50%;
+		position: relative;
+		display: flex;
+		margin: 0 auto $grid-base-two;
+		width: 72px;
+		height: 72px;
+
+		&--active {
+			display: block;
+			width: $grid-base-two;
+			height: $grid-base-two;
+			border-radius: 50%;
+			background-color: $upload-progress;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+		}
+
+		&--chatInfo {
+			width: $groupChatIconSize;
+			height: $groupChatIconSize;
+			align-self: center;
+			margin: 0 auto;
+		}
+
+		&--user {
+			width: 72px;
+			height: 72px;
+			align-self: flex-end;
+			margin: 0 auto;
+		}
+	}
+
+	&__content {
+		display: flex;
+		padding: 0 $grid-base-two $grid-base-ten;
+		height: auto;
+		width: 100%;
+		flex-direction: column;
+
+		@include breakpoint($fromMedium) {
+			flex-direction: row;
+		}
+
+		&__item {
+			flex: 1;
+			margin-top: $grid-base-eight;
+
+			@include breakpoint($fromMedium) {
+				padding: 0 $grid-base-three;
+				margin-top: 0;
+			}
+
+			&:first-child {
+				padding-left: 0;
+				margin-top: 0;
+			}
+
+			&:last-child {
+				padding-right: 0;
+			}
+		}
+
+		@include breakpoint($fromMedium) {
+			padding: 0 $grid-base-three $grid-base-ten;
+		}
+
+		@include breakpoint($fromLarge) {
+			padding: 0 $grid-base-three $grid-base-eight;
+		}
+
+		.text__divider {
+			text-align: $profile-divider-text-align;
+			margin-bottom: $grid-base-three;
+		}
+	}
+
+	&__data {
+		> div:first-of-type {
+			margin-top: $grid-base-three;
+		}
+
+		> div:not(:first-of-type) {
+			margin-top: $grid-base-six;
+		}
+
+		&__item {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+			min-height: 42px;
+			margin-top: 12px;
+			border-bottom: 1px solid $line-grey;
+		}
+
+		&__label {
+			color: $tertiary;
+			font-size: $font-size-secondary;
+			line-height: $line-height-secondary;
+			margin: 0 0 6px;
+		}
+
+		&__content {
+			margin: 0 0 6px;
+
+			&--empty {
+				color: $tertiary;
+			}
+
+			&--subscriber {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				position: relative;
+			}
+		}
+
+		&__divider {
+			color: $black-25-opacity;
+			margin: 0 5px;
+		}
+	}
+}