From 1a53f699b4ba8152442ba7089ec7f71ee844b2c8 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 23 Oct 2023 17:31:03 +1100
Subject: [PATCH] Revert "fix: move right panel buttons to a panelbuttongroup"

This reverts commit e6dd6844f966650f7c102c5c538fbfbda8550b30.
---
 stylesheets/_session_conversation.scss        |   2 +-
 ts/components/buttons/PanelButton.tsx         |  11 --
 ts/components/buttons/PanelIconButton.tsx     |   5 +-
 .../overlay/OverlayRightPanelSettings.tsx     | 111 +++++++++++-------
 ts/util/releaseFeature.ts                     |   2 +-
 5 files changed, 74 insertions(+), 57 deletions(-)

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
   );
 }