From e6dd6844f966650f7c102c5c538fbfbda8550b30 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 23 Oct 2023 15:35:17 +1100
Subject: [PATCH] fix: move right panel buttons to a panelbuttongroup

also enforce a 300 min width for the right panel, otherwise the bloaded
disappearing message design is not looking good
---
 stylesheets/_session_conversation.scss        |   1 +
 ts/components/buttons/PanelButton.tsx         |  11 ++
 ts/components/buttons/PanelIconButton.tsx     |   5 +-
 .../overlay/OverlayRightPanelSettings.tsx     | 106 +++++++-----------
 4 files changed, 53 insertions(+), 70 deletions(-)

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 80a70a4f3..a09024d73 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -27,6 +27,7 @@
   transform: translateX(100%);
   will-change: transform;
   width: 25vw;
+  min-width: 300px; // because the disappear messages don't render will with less than this, and 25% 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 d8fd31c81..6cd31dbf3 100644
--- a/ts/components/buttons/PanelButton.tsx
+++ b/ts/components/buttons/PanelButton.tsx
@@ -81,6 +81,17 @@ 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 9059fac04..7f1be973b 100644
--- a/ts/components/buttons/PanelIconButton.tsx
+++ b/ts/components/buttons/PanelIconButton.tsx
@@ -1,9 +1,10 @@
 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;
+  iconType: SessionIconType | null;
   text: string;
 }
 
@@ -13,7 +14,7 @@ export const PanelIconButton = (props: PanelIconButton) => {
   return (
     <PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId}>
       <StyledContent disabled={disabled}>
-        <SessionIcon iconType={iconType} iconSize="medium" />
+        {iconType ? <SessionIcon iconType={iconType} iconSize="medium" /> : <SpacerLG />}
         <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 cd96706e0..263fa6bb4 100644
--- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx
+++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx
@@ -176,26 +176,6 @@ 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);
@@ -301,56 +281,47 @@ export const OverlayRightPanelSettings = () => {
           </div>
           <SpacerLG />
         </>
-      )}
-      {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"
+      )}{' '}
+      <PanelButtonGroup>
+        {showUpdateGroupNameButton && (
+          <PanelIconButton
             onClick={() => {
-              showAddModeratorsByConvoId(selectedConvoKey);
+              void showUpdateGroupNameByConvoId(selectedConvoKey);
             }}
-          >
-            {window.i18n('addModerators')}
-          </StyledGroupSettingsItem>
-          <StyledGroupSettingsItem
-            className="right-panel-item"
-            role="button"
+            text={isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
+            iconType={null}
+          />
+        )}
+        {showAddRemoveModeratorsButton && (
+          <>
+            <PanelIconButton
+              iconType={null}
+              onClick={() => {
+                showAddModeratorsByConvoId(selectedConvoKey);
+              }}
+              text={window.i18n('addModerators')}
+            />
+            <PanelIconButton
+              iconType={null}
+              onClick={() => {
+                showRemoveModeratorsByConvoId(selectedConvoKey);
+              }}
+              text={window.i18n('removeModerators')}
+            />
+          </>
+        )}
+
+        {showUpdateGroupMembersButton && (
+          <PanelIconButton
+            iconType={null}
             onClick={() => {
-              showRemoveModeratorsByConvoId(selectedConvoKey);
+              void showUpdateGroupMembersByConvoId(selectedConvoKey);
             }}
-          >
-            {window.i18n('removeModerators')}
-          </StyledGroupSettingsItem>
-        </>
-      )}
-
-      {showUpdateGroupMembersButton && (
-        <StyledGroupSettingsItem
-          className="right-panel-item"
-          role="button"
-          onClick={() => {
-            void showUpdateGroupMembersByConvoId(selectedConvoKey);
-          }}
-        >
-          {window.i18n('groupMembers')}
-        </StyledGroupSettingsItem>
-      )}
+            text={window.i18n('groupMembers')}
+          />
+        )}
 
-      {hasDisappearingMessages && (
-        /* TODO Move ButtonGroup around all settings items */
-        <PanelButtonGroup>
+        {hasDisappearingMessages && (
           <PanelIconButton
             iconType={'timer50'}
             text={window.i18n('disappearingMessages')}
@@ -358,9 +329,8 @@ export const OverlayRightPanelSettings = () => {
               dispatch(setRightOverlayMode('disappearing-messages'));
             }}
           />
-        </PanelButtonGroup>
-      )}
-
+        )}
+      </PanelButtonGroup>
       <MediaGallery documents={documents} media={media} />
       {isGroup && (
         <StyledLeaveButton>