From d210b5c354fcb985713c988460942ff37d8a4ce5 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 10:28:36 +1000
Subject: [PATCH] fix: adjust contacts list to match design

no borders and smaller breaks
---
 .../leftpane/overlay/choose-action/ContactRow.tsx    | 11 ++---------
 .../overlay/choose-action/ContactsListWithBreaks.tsx | 12 ++++++++----
 ts/themes/globals.tsx                                | 11 +++++++++++
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
index 02bcf50ab..5c2d2568a 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
@@ -47,11 +47,6 @@ const StyledRowContainer = styled.button`
   padding: 0 var(--margins-lg);
   transition: background-color var(--default-duration) linear;
   cursor: pointer;
-  border-bottom: 1px var(--border-color) solid;
-
-  &:first-child {
-    border-top: 1px var(--border-color) solid;
-  }
 
   &:hover {
     background-color: var(--conversation-tab-background-hover-color);
@@ -63,10 +58,8 @@ const StyledBreak = styled.div`
   align-items: center;
   padding: 0 var(--margins-lg);
   color: var(--text-secondary-color);
-  font-size: var(--font-size-md);
-  height: 30px; // should also be changed in rowHeight
-
-  border-bottom: 1px var(--border-color) solid;
+  font-size: var(--font-size-sm);
+  height: var(--contact-row-break-width);
 `;
 
 export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => {
diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index f4c400aaa..cb186d88b 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -13,6 +13,7 @@ import { StyledLeftPaneList } from '../../LeftPaneList';
 import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
 import { UserUtils } from '../../../../session/utils';
+import { getThemeValue, pxValueToNumber } from '../../../../themes/globals';
 
 const StyledContactSection = styled.div`
   display: flex;
@@ -98,6 +99,12 @@ const ContactListItemSection = () => {
 
   const length = Number(directContactsByNameWithBreaks.length);
 
+  const calcRowHeight = (params: Index) => {
+    return isString(directContactsByNameWithBreaks[params.index])
+      ? pxValueToNumber(getThemeValue('--contact-row-break-height'))
+      : pxValueToNumber(getThemeValue('--contact-row-height'));
+  };
+
   return (
     <StyledLeftPaneList key={0} style={{ width: '100%' }}>
       <AutoSizer>
@@ -107,10 +114,7 @@ const ContactListItemSection = () => {
               className="module-left-pane__virtual-list"
               height={height}
               rowCount={length}
-              rowHeight={
-                (params: Index) =>
-                  isString(directContactsByNameWithBreaks[params.index]) ? 30 : 64 // should also be changed in `ContactRowBreak`
-              }
+              rowHeight={calcRowHeight}
               directContactsByNameWithBreaks={directContactsByNameWithBreaks}
               rowRenderer={renderRow}
               width={leftPaneListWidth}
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 57fc3ccb5..42a92ace8 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -7,6 +7,10 @@ function setDuration(duration: number | string) {
   return `${!isTestIntegration() ? duration : typeof duration === 'string' ? '0s' : '0'}`;
 }
 
+export function pxValueToNumber(value: string) {
+  return Number(value.replace('px', ''));
+}
+
 // These variables are independent of the current theme
 type ThemeGlobals = {
   /* Fonts */
@@ -117,6 +121,10 @@ type ThemeGlobals = {
   '--right-panel-height': string;
   '--right-panel-attachment-width': string;
   '--right-panel-attachment-height': string;
+
+  /* Contact Row */
+  '--contact-row-height': string;
+  '--contact-row-break-height': string;
 };
 
 type Theme = ThemeGlobals | ThemeColorVariables;
@@ -226,4 +234,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
   '--right-panel-attachment-height':
     'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
+
+  '--contact-row-height': '60px',
+  '--contact-row-break-height': '20px',
 };