From 04dc4fe861c92f523183fa1a3051b33a73cf57c6 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 26 Apr 2024 18:58:13 +1000
Subject: [PATCH] fix: the modal header now always centers content correctly
---
stylesheets/_session.scss | 42 +--------------
ts/components/SessionWrapperModal.tsx | 77 ++++++++++++++++++++-------
2 files changed, 60 insertions(+), 59 deletions(-)
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 3ac42138b..2e9da6cc2 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -188,49 +188,11 @@ label {
flex-direction: column;
&__header {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
-
- padding: var(--margins-lg);
-
font-family: var(--font-default);
- text-align: center;
- line-height: 18px;
font-size: var(--font-size-lg);
font-weight: 500;
-
- &.reverse {
- flex-direction: row-reverse;
-
- .session-modal__header__close > div {
- float: right;
- }
-
- .session-modal__header__icons > div {
- float: left;
- padding-inline-start: 0px;
- padding-inline-end: 10px;
- }
- }
-
- &__icons,
- &__close {
- width: 60px;
- }
- &__icons {
- float: right;
- }
- &__close > div {
- float: left;
- padding: var(--margins-xs);
- margin: 0px;
- }
- &__icons > div {
- float: right;
- padding-inline-start: 10px;
- }
+ text-align: center;
+ line-height: 18px;
}
&__body {
diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx
index 775160a8f..e20c249e8 100644
--- a/ts/components/SessionWrapperModal.tsx
+++ b/ts/components/SessionWrapperModal.tsx
@@ -4,8 +4,10 @@ import useKey from 'react-use/lib/useKey';
import { SessionIconButton } from './icon';
-import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
import { SessionFocusTrap } from './SessionFocusTrap';
+import { Flex } from './basic/Flex';
+import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
+import { SpacerXL } from './basic/Text';
export type SessionWrapperModalType = {
title?: string;
@@ -73,34 +75,71 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
<div className="session-confirm-wrapper">
<div ref={modalRef} className="session-modal">
{showHeader ? (
- <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
- <div className="session-modal__header__close">
+ <Flex
+ container={true}
+ flexDirection={headerReverse ? 'row-reverse' : 'row'}
+ justifyContent={'space-between'}
+ alignItems={'center'}
+ padding={'var(--margins-lg)'}
+ className={'session-modal__header'}
+ >
+ <Flex
+ container={true}
+ flexDirection={headerReverse ? 'row-reverse' : 'row'}
+ alignItems={'center'}
+ padding={'0'}
+ margin={'0'}
+ className={'session-modal__header__close'}
+ >
{showExitIcon ? (
<SessionIconButton
iconType="exit"
iconSize="small"
onClick={props.onClose}
+ padding={'5px'}
+ margin={'0'}
dataTestId="modal-close-button"
/>
) : null}
- </div>
- <div className="session-modal__header__title">{title}</div>
- <div className="session-modal__header__icons">
- {headerIconButtons
- ? headerIconButtons.map((iconItem: any) => {
- return (
- <SessionIconButton
- key={iconItem.iconType}
- iconType={iconItem.iconType}
- iconSize={'large'}
- iconRotation={iconItem.iconRotation}
- onClick={iconItem.onClick}
- />
- );
+ {headerIconButtons?.length
+ ? headerIconButtons.map((_, index) => {
+ const offset = showExitIcon
+ ? headerIconButtons.length - 2
+ : headerIconButtons.length - 1;
+ if (index > offset) {
+ return null;
+ }
+ return <SpacerXL key={`session-modal__header_space-${index}`} />;
})
: null}
- </div>
- </div>
+ </Flex>
+ <div className="session-modal__header__title">{title}</div>
+ <Flex
+ container={true}
+ flexDirection={headerReverse ? 'row-reverse' : 'row'}
+ alignItems={'center'}
+ padding={'0'}
+ margin={'0'}
+ >
+ {headerIconButtons?.length ? (
+ headerIconButtons.map((iconItem: any) => {
+ return (
+ <SessionIconButton
+ key={iconItem.iconType}
+ iconType={iconItem.iconType}
+ iconSize={'large'}
+ iconRotation={iconItem.iconRotation}
+ onClick={iconItem.onClick}
+ padding={'0'}
+ margin={'0'}
+ />
+ );
+ })
+ ) : showExitIcon ? (
+ <SpacerXL />
+ ) : null}
+ </Flex>
+ </Flex>
) : null}
<div className="session-modal__body">