From 3c494aa4b571aed68d0a916e9ede39aa093eb0e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deborah=20K=C3=B6pfer?=
 <deborah.koepfer@virtual-identity.com>
Date: Fri, 5 Mar 2021 16:14:22 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20added=20type=20divider?=
 =?UTF-8?q?=20to=20<Text=20/>,=20refact.=20empty=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sessionsList/SessionsList.tsx  | 51 ++++++++++---------
 .../sessionsList/SessionsListEmptyState.tsx   | 13 -----
 .../sessionsList/sessionsList.styles.scss     |  6 +--
 src/components/text/Text.tsx                  |  3 +-
 src/components/text/text.styles.scss          |  7 +++
 5 files changed, 38 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/sessionsList/SessionsListEmptyState.tsx

diff --git a/src/components/sessionsList/SessionsList.tsx b/src/components/sessionsList/SessionsList.tsx
index be86b8e8e..e1065cf06 100644
--- a/src/components/sessionsList/SessionsList.tsx
+++ b/src/components/sessionsList/SessionsList.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useContext, useState, useEffect } from 'react';
-import { SessionListEmptyState } from './SessionsListEmptyState';
 import {
 	typeIsUser,
 	typeIsTeamSession,
@@ -51,6 +50,7 @@ import {
 	MAX_ITEMS_TO_SHOW_WELCOME_ILLUSTRATION,
 	SCROLL_PAGINATE_THRESHOLD
 } from './sessionsListConfig';
+import { Text } from '../text/Text';
 
 export const SessionsList: React.FC = () => {
 	let listRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -463,11 +463,11 @@ export const SessionsList: React.FC = () => {
 
 	return (
 		<div className="sessionsList__innerWrapper">
-			{showFilter ? (
+			{showFilter && (
 				<div className="sessionsList__selectWrapper">
 					<SelectDropdown {...selectDropdown} />
 				</div>
-			) : null}
+			)}
 			<div
 				className={`sessionsList__scrollContainer ${
 					showFilter ? 'sessionsList__scrollContainer--hasFilter' : ''
@@ -495,27 +495,32 @@ export const SessionsList: React.FC = () => {
 					data-cy="sessions-list-items-wrapper"
 				>
 					{activeCreateChat &&
-					typeIsSession(type) &&
-					hasUserAuthority(AUTHORITIES.CREATE_NEW_CHAT, userData) ? (
-						<SessionListCreateChat />
-					) : null}
+						typeIsSession(type) &&
+						hasUserAuthority(
+							AUTHORITIES.CREATE_NEW_CHAT,
+							userData
+						) && <SessionListCreateChat />}
 					{sessionsData &&
 					sessionsData[getSessionsDataKeyForSessionType(type)] &&
-					!hasNoSessions ? (
-						sessionsData[
-							getSessionsDataKeyForSessionType(type)
-						].map((item: ListItemInterface, index) => (
-							<SessionListItemComponent
-								key={index}
-								type={type}
-								id={getChatItemForSession(item).id}
-							/>
-						))
-					) : !activeCreateChat ? (
-						<SessionListEmptyState />
-					) : null}
-					{loadingWithOffset ? <SessionsListSkeleton /> : null}
-					{isReloadButtonVisible ? (
+					!hasNoSessions
+						? sessionsData[
+								getSessionsDataKeyForSessionType(type)
+						  ].map((item: ListItemInterface, index) => (
+								<SessionListItemComponent
+									key={index}
+									type={type}
+									id={getChatItemForSession(item).id}
+								/>
+						  ))
+						: !activeCreateChat && (
+								<Text
+									className="sessionsList--empty"
+									text={translate('sessionList.empty')}
+									type="divider"
+								/>
+						  )}
+					{loadingWithOffset && <SessionsListSkeleton />}
+					{isReloadButtonVisible && (
 						<div className="sessionsList__reloadWrapper">
 							<Button
 								item={{
@@ -529,7 +534,7 @@ export const SessionsList: React.FC = () => {
 								buttonHandle={handleReloadButton}
 							/>
 						</div>
-					) : null}
+					)}
 				</div>
 			</div>
 		</div>
diff --git a/src/components/sessionsList/SessionsListEmptyState.tsx b/src/components/sessionsList/SessionsListEmptyState.tsx
deleted file mode 100644
index c5bf6ac4a..000000000
--- a/src/components/sessionsList/SessionsListEmptyState.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { translate } from '../../resources/scripts/i18n/translate';
-import './sessionsList.styles';
-
-export const SessionListEmptyState = () => {
-	return (
-		<div className="sessionsList">
-			<p className="sessionsList--empty">
-				{translate('sessionList.empty')}
-			</p>
-		</div>
-	);
-};
diff --git a/src/components/sessionsList/sessionsList.styles.scss b/src/components/sessionsList/sessionsList.styles.scss
index 6039a35e7..50538a4a9 100644
--- a/src/components/sessionsList/sessionsList.styles.scss
+++ b/src/components/sessionsList/sessionsList.styles.scss
@@ -190,12 +190,8 @@ $headerHeight: 80px;
 	}
 
 	&--empty {
-		padding-top: 20px;
+		margin-top: $grid-base-four;
 		text-align: center;
-		font-family: $font-family-slab-regular;
-		font-size: $font-size-secondary;
-		line-height: $line-height-secondary;
-		color: $light-grey;
 	}
 
 	&__itemsWrapper {
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index c446b3b1b..c5f2a0b1a 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -9,7 +9,8 @@ export interface TextProps {
 		| 'standard'
 		| 'infoLargeStandard'
 		| 'infoLargeAlternative'
-		| 'infoSmall';
+		| 'infoSmall'
+		| 'divider';
 }
 
 export enum LABEL_TYPES {
diff --git a/src/components/text/text.styles.scss b/src/components/text/text.styles.scss
index 88d46e662..a5ebd6162 100644
--- a/src/components/text/text.styles.scss
+++ b/src/components/text/text.styles.scss
@@ -27,6 +27,13 @@
 		color: $tertiary;
 	}
 
+	&__divider {
+		font-family: $font-family-slab-regular;
+		font-size: $font-size-secondary;
+		line-height: $line-height-secondary;
+		color: $light-grey;
+	}
+
 	&__label {
 		font-family: $font-family-medium;
 		font-weight: $font-weight-medium;