diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 9b50aa63b..ea40c6ebe 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -27,7 +27,7 @@ transform: translateX(100%); will-change: transform; width: 25vw; - min-width: 300px; // because the disappear messages don't render well with less than this, and 25vw can be less than that + min-width: 350px; // because the disappear messages don't render well with less than this, and 25vw can be less than that z-index: 5; background-color: var(--background-primary-color); diff --git a/ts/components/buttons/PanelButton.tsx b/ts/components/buttons/PanelButton.tsx index e4644c0c0..a9a3f5100 100644 --- a/ts/components/buttons/PanelButton.tsx +++ b/ts/components/buttons/PanelButton.tsx @@ -81,17 +81,6 @@ const StyledPanelButton = styled.button<{ :not(:last-child) { border-bottom: 1px solid var(--border-color); } - padding-top: var(--margins-lg); - padding-bottom: var(--margins-lg); - text-align: left; - - :first-child { - padding-top: 0; - } - - :last-child { - padding-bottom: 0; - } `; export type PanelButtonProps = { diff --git a/ts/components/buttons/PanelIconButton.tsx b/ts/components/buttons/PanelIconButton.tsx index 7f1be973b..9059fac04 100644 --- a/ts/components/buttons/PanelIconButton.tsx +++ b/ts/components/buttons/PanelIconButton.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { SpacerLG } from '../basic/Text'; import { SessionIcon, SessionIconType } from '../icon'; import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton'; interface PanelIconButton extends Omit<PanelButtonProps, 'children'> { - iconType: SessionIconType | null; + iconType: SessionIconType; text: string; } @@ -14,7 +13,7 @@ export const PanelIconButton = (props: PanelIconButton) => { return ( <PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId}> <StyledContent disabled={disabled}> - {iconType ? <SessionIcon iconType={iconType} iconSize="medium" /> : <SpacerLG />} + <SessionIcon iconType={iconType} iconSize="medium" /> <StyledText>{text}</StyledText> </StyledContent> </PanelButton> diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx index 4fb93b780..e1e09931b 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx +++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx @@ -176,6 +176,26 @@ const StyledLeaveButton = styled.div` } `; +const StyledGroupSettingsItem = styled.div` + display: flex; + align-items: center; + min-height: 3rem; + font-size: var(--font-size-md); + color: var(--right-panel-item-text-color); + background-color: var(--right-panel-item-background-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + + width: -webkit-fill-available; + padding: 0 var(--margins-md); + transition: var(--default-duration); + cursor: pointer; + + &:hover { + background-color: var(--right-panel-item-background-hover-color); + } +`; + const StyledName = styled.h4` padding-inline: var(--margins-md); font-size: var(--font-size-md); @@ -282,50 +302,58 @@ export const OverlayRightPanelSettings = () => { <SpacerLG /> </> )} - <PanelButtonGroup> - {showUpdateGroupNameButton && ( - <PanelIconButton + + {showUpdateGroupNameButton && ( + <StyledGroupSettingsItem + className="right-panel-item" + role="button" + onClick={() => { + void showUpdateGroupNameByConvoId(selectedConvoKey); + }} + > + {isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')} + </StyledGroupSettingsItem> + )} + {showAddRemoveModeratorsButton && ( + <> + <StyledGroupSettingsItem + className="right-panel-item" + role="button" onClick={() => { - void showUpdateGroupNameByConvoId(selectedConvoKey); + showAddModeratorsByConvoId(selectedConvoKey); }} - text={isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')} - iconType={null} - dataTestId="edit-group" - /> - )} - {showAddRemoveModeratorsButton && ( - <> - <PanelIconButton - iconType={null} - onClick={() => { - showAddModeratorsByConvoId(selectedConvoKey); - }} - text={window.i18n('addModerators')} - dataTestId="add-moderators" - /> - <PanelIconButton - iconType={null} - onClick={() => { - showRemoveModeratorsByConvoId(selectedConvoKey); - }} - text={window.i18n('removeModerators')} - dataTestId="remove-moderators" - /> - </> - )} - - {showUpdateGroupMembersButton && ( - <PanelIconButton - iconType={null} + > + {window.i18n('addModerators')} + </StyledGroupSettingsItem> + <StyledGroupSettingsItem + className="right-panel-item" + role="button" onClick={() => { - void showUpdateGroupMembersByConvoId(selectedConvoKey); + showRemoveModeratorsByConvoId(selectedConvoKey); }} - text={window.i18n('groupMembers')} - dataTestId="group-members" - /> - )} + > + {window.i18n('removeModerators')} + </StyledGroupSettingsItem> + </> + )} + + {showUpdateGroupMembersButton && ( + <StyledGroupSettingsItem + className="right-panel-item" + role="button" + onClick={() => { + void showUpdateGroupMembersByConvoId(selectedConvoKey); + }} + > + {window.i18n('groupMembers')} + </StyledGroupSettingsItem> + )} + <SpacerLG /> + <SpacerLG /> - {hasDisappearingMessages && ( + {hasDisappearingMessages && ( + /* TODO Move ButtonGroup around all settings items */ + <PanelButtonGroup> <PanelIconButton iconType={'timer50'} text={window.i18n('disappearingMessages')} @@ -334,8 +362,9 @@ export const OverlayRightPanelSettings = () => { dispatch(setRightOverlayMode('disappearing-messages')); }} /> - )} - </PanelButtonGroup> + </PanelButtonGroup> + )} + <MediaGallery documents={documents} media={media} /> {isGroup && ( <StyledLeaveButton> diff --git a/ts/util/releaseFeature.ts b/ts/util/releaseFeature.ts index f81d691d3..e415c3e14 100644 --- a/ts/util/releaseFeature.ts +++ b/ts/util/releaseFeature.ts @@ -102,7 +102,7 @@ async function checkIsUserConfigFeatureReleased() { async function checkIsDisappearMessageV2FeatureReleased() { return ( - checkIsFeatureReleased('disappearing_messages') || + (await checkIsFeatureReleased('disappearing_messages')) || !isEmpty(process.env.SESSION_FORCE_DISAPPEAR_V2_ENABLED) // FIXME to remove after QA ); }