Merge pull request #1478 from session-foundation/dev

Bilb · web-flow · commit 0e04ab7c0e87 · 2025-07-03T16:01:11.000+10:00
Fix late found issues of UCS
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -761,9 +761,12 @@
   "pinUnpinConversation": "Unpin Conversation",
   "preview": "Preview",
   "proCallToActionLongerMessages": "Want to send longer messages? Send more text and unlock premium features with Session Pro",
+  "proCallToActionPinnedConversations": "Want more pins? Organize your chats and unlock premium features with Session Pro",
+  "proCallToActionPinnedConversationsMoreThan": "Want more than 5 pins? Organize your chats and unlock premium features with Session Pro",
   "proFeatureListLargerGroups": "Larger group chats up to 300 members",
   "proFeatureListLoadsMore": "Plus loads more exclusive features",
   "proFeatureListLongerMessages": "Messages up to 10,000 characters",
+  "proFeatureListPinnedConversations": "Pin unlimited conversations",
   "proSendMore": "Send more with",
   "profile": "Profile",
   "profileDisplayPicture": "Display Picture",
diff --git a/ts/components/SessionWrapperModal2.tsx b/ts/components/SessionWrapperModal2.tsx
@@ -68,10 +68,10 @@ const StyledModal = styled.div<{
   }
 
   ${StyledModalHeader} {
+    z-index: 3;
     box-shadow: ${props => (props.scrolled ? '0px 0px 20px 8px var(--modal-shadow-color)' : '')};
     border-bottom: ${props =>
       props.scrolled ? '1px solid var(--border-color)' : '1px solid var(--transparent-color)'};
-    margin-bottom: ${props => (props.bigHeader ? 'var(--margins-sm)' : 'var(--margins-xs)')};
   }
 `;
 
diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
@@ -9,40 +9,39 @@ const StyledContainer = styled.div<{ disabled: boolean }>`
   background-color: var(--transparent-color);
 `;
 
-const StyledRadioOuter = styled.div<{ $disabled: boolean; $diameterRadioBorder: number }>`
+const StyledRadioOuter = styled.div<{
+  $disabled: boolean;
+  $selected: boolean;
+  $diameterRadioBorder: number;
+}>`
   width: ${props => props.$diameterRadioBorder}px;
   height: ${props => props.$diameterRadioBorder}px;
   border: 1px solid var(--text-primary-color);
   border-radius: 50%;
-  background-color: transparent;
+
   cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
   position: relative;
-`;
 
-const StyledSelectedInner = styled.div<{
-  $disabled: boolean;
-  $selected: boolean;
-  $diameterRadioBg: number;
-}>`
-  width: ${props => props.$diameterRadioBg}px;
-  height: ${props => props.$diameterRadioBg}px;
-  border-radius: 50%;
-  opacity: ${props => (props.$selected ? 1 : 0)};
-  background: ${props => (props.$disabled ? 'var(--disabled-color)' : 'var(--primary-color)')};
-  pointer-events: none;
-  transition-duration: var(--default-duration);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: ${props =>
+      props.$disabled
+        ? 'var(--disabled-color)'
+        : 'radial-gradient(circle, var(--primary-color) 0%, var(--primary-color) 60%, transparent 60%, transparent 100%)'};
+    opacity: ${props => (props.$selected ? 1 : 0)};
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
 `;
 
 function RadioButton({
   disabled,
   onClick,
   selected,
   dataTestId,
-  diameterRadioBg,
   diameterRadioBorder,
   style,
   ariaLabel,
@@ -51,7 +50,6 @@ function RadioButton({
   onClick: MouseEventHandler<HTMLDivElement>;
   disabled: boolean;
   dataTestId: SessionDataTestId | undefined;
-  diameterRadioBg: number;
   diameterRadioBorder: number;
   style?: CSSProperties;
   ariaLabel?: string;
@@ -68,13 +66,8 @@ function RadioButton({
       aria-label={ariaLabel}
       data-checked={selected}
       data-disabled={disabled}
-    >
-      <StyledSelectedInner
-        $disabled={disabled}
-        $selected={selected}
-        $diameterRadioBg={diameterRadioBg}
-      />
-    </StyledRadioOuter>
+      $selected={selected}
+    />
   );
 }
 
@@ -120,7 +113,6 @@ export const SessionRadio = (props: SessionRadioProps) => {
   };
 
   const diameterRadioBorder = 26;
-  const diameterRadioBg = 20;
 
   return (
     <StyledContainer
@@ -156,7 +148,6 @@ export const SessionRadio = (props: SessionRadioProps) => {
           disabled={disabled}
           dataTestId={inputDataTestId}
           diameterRadioBorder={diameterRadioBorder}
-          diameterRadioBg={diameterRadioBg}
         />
       </Flex>
     </StyledContainer>
@@ -186,7 +177,6 @@ export const SessionRadioPrimaryColors = (props: {
 
   // this component has no padding between the selected background and the border
   const diameterRadioBorder = 26;
-  const diameterRadioBg = 22;
 
   const overriddenColorsVars = {
     '--primary-color': color,
@@ -201,7 +191,6 @@ export const SessionRadioPrimaryColors = (props: {
         disabled={false}
         dataTestId={undefined}
         diameterRadioBorder={diameterRadioBorder}
-        diameterRadioBg={diameterRadioBg}
         style={overriddenColorsVars}
         ariaLabel={ariaLabel}
       />
diff --git a/ts/components/buttons/PanelButton.tsx b/ts/components/buttons/PanelButton.tsx
@@ -3,6 +3,7 @@ import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../basic/Flex';
 import { H8 } from '../basic/Heading';
 import { SpacerXS } from '../basic/Text';
+import { useIsDarkTheme } from '../../state/theme/selectors/theme';
 
 // NOTE Used for descendant components
 export const StyledContent = styled.div<{ disabled: boolean }>`
@@ -16,7 +17,7 @@ export const PanelLabel = styled.p`
   color: var(--text-secondary-color);
   width: 100%;
   margin: 0;
-  padding-left: calc(var(--margins-lg) * 2 + var(--margins-sm));
+  padding-left: var(--margins-lg);
   padding-block: var(--margins-sm);
 `;
 
@@ -27,8 +28,9 @@ const StyledRoundedPanelButtonGroup = styled.div`
   overflow: hidden;
   background: var(--background-tertiary-color);
   border-radius: 16px;
-  padding: 0 var(--margins-lg) var(--margins-xs);
-  margin: 0 var(--margins-lg);
+  // Note: we need no padding here so we can change the bg color on hover
+  padding: 0;
+  margin: 0 var(--margins-xs);
   width: -webkit-fill-available;
 `;
 
@@ -55,6 +57,7 @@ export const PanelButtonGroup = (props: PanelButtonGroupProps) => {
 export const StyledPanelButton = styled.button<{
   disabled: boolean;
   color?: string;
+  isDarkTheme: boolean;
 }>`
   cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
@@ -66,11 +69,15 @@ export const StyledPanelButton = styled.button<{
   width: 100%;
   transition: var(--default-duration);
   color: ${props => (props.disabled ? 'var(--disabled-color)' : props.color)};
-  padding-inline: var(--margins-xs);
+  padding-inline: var(--margins-lg);
   padding-block: var(--margins-sm);
 
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--border-color);
+  &:hover {
+    background-color: ${props =>
+      !props.disabled &&
+      (props.isDarkTheme
+        ? 'var(--background-primary-color)'
+        : 'var(--background-secondary-color)')};
   }
 `;
 
@@ -88,6 +95,8 @@ export type PanelButtonProps = {
 export const PanelButton = (props: PanelButtonProps) => {
   const { className, disabled = false, children, onClick, dataTestId, style, color } = props;
 
+  const isDarkTheme = useIsDarkTheme();
+
   return (
     <StyledPanelButton
       className={className}
@@ -96,6 +105,7 @@ export const PanelButton = (props: PanelButtonProps) => {
       style={style}
       data-testid={dataTestId}
       color={color}
+      isDarkTheme={isDarkTheme}
     >
       {children}
     </StyledPanelButton>
diff --git a/ts/components/buttons/PanelIconButton.tsx b/ts/components/buttons/PanelIconButton.tsx
@@ -12,6 +12,7 @@ import {
 import { LucideIcon } from '../icon/LucideIcon';
 import { IconSizeToPxStr, SessionIcon } from '../icon/SessionIcon';
 import type { SessionIconType } from '../icon';
+import { StyledPanelButtonSeparator } from './StyledPanelButtonGroupSeparator';
 
 type PanelIconButtonProps = Omit<PanelButtonProps, 'children' | 'subText' | 'subTextDataTestId'> & {
   text: string;
@@ -36,22 +37,31 @@ export const PanelIconButton = (
       : undefined;
 
   return (
-    <PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId} color={color}>
-      <StyledContent disabled={disabled}>
-        <IconContainer>{props.iconElement}</IconContainer>
+    <>
+      <PanelButton
+        disabled={disabled}
+        onClick={onClick}
+        dataTestId={dataTestId}
+        color={color}
+        style={{ minHeight: '55px' }}
+      >
+        <StyledContent disabled={disabled}>
+          <IconContainer>{props.iconElement}</IconContainer>
 
-        {subTextProps ? (
-          <PanelButtonTextWithSubText
-            text={text}
-            textDataTestId={props.dataTestId}
-            subText={subTextProps.subText}
-            subTextDataTestId={subTextProps.subTextDataTestId}
-          />
-        ) : (
-          <PanelButtonText text={text} textDataTestId={props.dataTestId} />
-        )}
-      </StyledContent>
-    </PanelButton>
+          {subTextProps ? (
+            <PanelButtonTextWithSubText
+              text={text}
+              textDataTestId={props.dataTestId}
+              subText={subTextProps.subText}
+              subTextDataTestId={subTextProps.subTextDataTestId}
+            />
+          ) : (
+            <PanelButtonText text={text} textDataTestId={props.dataTestId} />
+          )}
+        </StyledContent>
+      </PanelButton>
+      <StyledPanelButtonSeparator />
+    </>
   );
 };
 
diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { SessionDataTestId, type ReactNode } from 'react';
 import { SessionRadio } from '../basic/SessionRadio';
 import { PanelButtonProps, StyledContent, StyledPanelButton } from './PanelButton';
+import { useIsDarkTheme } from '../../state/theme/selectors/theme';
+import { StyledPanelButtonSeparator } from './StyledPanelButtonGroupSeparator';
 
 const StyledCheckContainer = styled.div`
   display: flex;
@@ -32,28 +34,33 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
     radioInputDataTestId,
     textElement,
   } = props;
+  const isDarkTheme = useIsDarkTheme();
 
   return (
-    <StyledPanelButton
-      disabled={disabled}
-      onClick={() => {
-        return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
-      }}
-      data-testid={rowDataTestId}
-    >
-      <StyledContent disabled={disabled}>
-        {textElement}
-        <StyledCheckContainer>
-          <SessionRadio
-            active={isSelected}
-            value={value}
-            inputName={value}
-            disabled={disabled}
-            inputDataTestId={radioInputDataTestId}
-            style={{ paddingInlineEnd: 'var(--margins-xs)' }}
-          />
-        </StyledCheckContainer>
-      </StyledContent>
-    </StyledPanelButton>
+    <>
+      <StyledPanelButton
+        disabled={disabled}
+        onClick={() => {
+          return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
+        }}
+        data-testid={rowDataTestId}
+        isDarkTheme={isDarkTheme}
+      >
+        <StyledContent disabled={disabled}>
+          {textElement}
+          <StyledCheckContainer>
+            <SessionRadio
+              active={isSelected}
+              value={value}
+              inputName={value}
+              disabled={disabled}
+              inputDataTestId={radioInputDataTestId}
+              style={{ paddingInlineEnd: 'var(--margins-xs)' }}
+            />
+          </StyledCheckContainer>
+        </StyledContent>
+      </StyledPanelButton>
+      <StyledPanelButtonSeparator />
+    </>
   );
 };
diff --git a/ts/components/buttons/StyledPanelButtonGroupSeparator.tsx b/ts/components/buttons/StyledPanelButtonGroupSeparator.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const StyledPanelButtonSeparator = styled.div`
+  width: calc(100% -2 * var(--margins-lg));
+  // yes, 0.5px because 1px makes it sometimes 2, sometimes 1px and it is weird to have different
+  // separator sizes in the same radio group
+  height: 0.5px;
+  background-color: var(--border-color);
+  margin-inline: var(--margins-lg);
+
+  &:last-child {
+    display: none;
+  }
+`;
diff --git a/ts/components/dialog/SessionNicknameDialog.tsx b/ts/components/dialog/SessionNicknameDialog.tsx
@@ -89,6 +89,7 @@ export const SessionNicknameDialog = (props: Props) => {
       onClose={onClickClose}
       showExitIcon={true}
       showHeader={true}
+      headerReverse={true}
     >
       <StyledMaxWidth className="session-modal__centered">
         <Localizer
diff --git a/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx b/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx
@@ -88,7 +88,7 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab
   }
 
   return (
-    <SessionWrapperModal showExitIcon={true} title={localizedAction} onClose={closeModal}>
+    <SessionWrapperModal showExitIcon={false} title={localizedAction} onClose={closeModal}>
       <StyledModalDescriptionContainer data-testid="modal-description">
         <Localizer {...args} />
       </StyledModalDescriptionContainer>
diff --git a/ts/components/dialog/conversationSettings/conversationSettingsDialog.tsx b/ts/components/dialog/conversationSettings/conversationSettingsDialog.tsx
@@ -109,13 +109,7 @@ export function ConversationSettingsDialog(props: ConversationSettingsModalState
         $contentMinWidth="400px"
         bigHeader={true}
       >
-        <Flex
-          $container={true}
-          $flexDirection="column"
-          $alignItems="flex-start"
-          padding="var(--margins-sm) 0"
-          width="100%"
-        >
+        <Flex $container={true} $flexDirection="column" $alignItems="flex-start" width="100%">
           <PageToRender conversationId={props.conversationId} />
         </Flex>
       </SessionWrapperModal2>
diff --git a/ts/components/dialog/conversationSettings/conversationSettingsHeader.tsx b/ts/components/dialog/conversationSettings/conversationSettingsHeader.tsx
@@ -95,13 +95,13 @@ const StyledDescription = styled.p<{ expanded: boolean }>`
   background: transparent;
   width: 100%;
   white-space: pre-wrap;
+  word-break: break-word;
   overflow: hidden;
   -webkit-line-clamp: ${({ expanded }) => (expanded ? 'unset' : '2')};
   display: -webkit-box;
   -webkit-box-orient: vertical;
   // some padding so we always have room to show the ellipsis, if needed
   padding-inline: var(--margins-sm);
-  word-break: break-all;
 `;
 
 const StyledViewMoreButton = styled.button`
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts

Original file line number	Diff line number	Diff line change
`@@ -68,10 +68,10 @@ const StyledModal = styled.div<{`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`${StyledModalHeader} {`
	`71`	`+ z-index: 3;`
`71`	`72`	`box-shadow: ${props => (props.scrolled ? '0px 0px 20px 8px var(--modal-shadow-color)' : '')};`
`72`	`73`	`border-bottom: ${props =>`
`73`	`74`	`props.scrolled ? '1px solid var(--border-color)' : '1px solid var(--transparent-color)'};`
`74`		`- margin-bottom: ${props => (props.bigHeader ? 'var(--margins-sm)' : 'var(--margins-xs)')};`
`75`	`75`	`}`
`76`	`76`	`;
`77`	`77`
Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,7 @@ export const SessionNicknameDialog = (props: Props) => {`
`89`	`89`	`onClose={onClickClose}`
`90`	`90`	`showExitIcon={true}`
`91`	`91`	`showHeader={true}`
	`92`	`+ headerReverse={true}`
`92`	`93`	`>`
`93`	`94`	`<StyledMaxWidth className="session-modal__centered">`
`94`	`95`	`<Localizer`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`return (`
`91`		`- <SessionWrapperModal showExitIcon={true} title={localizedAction} onClose={closeModal}>`
	`91`	`+ <SessionWrapperModal showExitIcon={false} title={localizedAction} onClose={closeModal}>`
`92`	`92`	`<StyledModalDescriptionContainer data-testid="modal-description">`
`93`	`93`	`<Localizer {...args} />`
`94`	`94`	`</StyledModalDescriptionContainer>`