fix: improved stlying for settings heading items

ts/components/MemberListItem.tsx

@@ -22,6 +22,7 @@ const StyledSessionMemberItem = styled.button<{
   inMentions?: boolean;
   zombie?: boolean;
   selected?: boolean;
+  disableBg?: boolean;
 }>`
   cursor: pointer;
   display: flex;
@@ -36,14 +37,13 @@ const StyledSessionMemberItem = styled.button<{
   transition: var(--default-duration);
   opacity: ${props => (props.zombie ? 0.5 : 1)};
   background-color: ${props =>
-    props.selected && 'var(--color-conversation-item-selected) !important'};
+    !props.disableBg && props.selected
+      ? 'var(--conversation-tab-background-selected-color) !important'
+      : null};
 
   :not(:last-child) {
     border-bottom: var(--border-color);
   }
-
-  background-color: ${props =>
-    props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null};
 `;
 
 const StyledInfo = styled.div`
@@ -109,6 +109,7 @@ export const MemberListItem = (props: {
       zombie={isZombie}
       inMentions={inMentions}
       selected={isSelected}
+      disableBg={disableBg}
     >
       <StyledInfo>
         <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />

ts/components/leftpane/LeftPaneSettingSection.tsx

@@ -15,6 +15,33 @@ import { SessionIcon } from '../icon';
 import { SessionSettingCategory } from '../settings/SessionSettings';
 import { resetConversationExternal } from '../../state/ducks/conversations';
 
+const StyledSettingsSectionTitle = styled.strong`
+  font-family: var(--font-font-accent);
+  font-size: var(--font-size-md);
+`;
+
+const StyledSettingsListItem = styled.div<{ active: boolean }>`
+  background-color: ${props =>
+    props.active
+      ? 'var(--settings-tab-background-selected-color)'
+      : 'var(--settings-tab-background-color)'};
+  color: var(--settings-tab-text-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 74px;
+  line-height: 1.4;
+  padding: 0px var(--margins-md);
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: var(--default-duration) !important;
+
+  :hover {
+    background: var(--settings-tab-background-hover-color);
+  }
+`;
+
 const getCategories = () => {
   return [
     {
@@ -92,9 +119,7 @@ const LeftPaneSettingsCategoryRow = (props: {
         }
       }}
     >
-      <StyledSettingsSectionTitle
-        style={{ color: isClearData ? 'var(--color-destructive)' : 'unset' }}
-      >
+      <StyledSettingsSectionTitle style={{ color: isClearData ? 'var(--danger-color)' : 'unset' }}>
         {title}
       </StyledSettingsSectionTitle>
 
@@ -123,29 +148,6 @@ const StyledContentSection = styled.div`
   overflow-y: auto;
 `;
 
-const StyledSettingsSectionTitle = styled.strong`
-  font-family: var(--font-font-accent);
-  font-size: var(--font-size-md);
-`;
-
-const StyledSettingsListItem = styled.div<{ active: boolean }>`
-  background: ${props => (props.active ? 'var(--color-conversation-item-selected)' : 'none')};
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 74px;
-  line-height: 1.4;
-  padding: 0px var(--margins-md);
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: var(--default-duration) !important;
-
-  :hover {
-    background: var(--color-clickable-hovered);
-  }
-`;
-
 export const LeftPaneSettingSection = () => {
   return (
     <StyledContentSection>