Merge pull request #1660 from session-foundation/feat/pro-settings

Merge pro-settings to  pro-libsession

Author: Bilb

ts/components/SessionWrapperModal.tsx

@@ -37,14 +37,20 @@ type WithShowExitIcon = { showExitIcon?: boolean };
 const StyledModalHeader = styled(Flex)<{
   bigHeader?: boolean;
   scrolled: boolean;
+  floatingHeader?: boolean;
 }>`
-  position: relative;
+  position: ${props => (props.floatingHeader ? 'absolute' : 'relative')};
   font-family: var(--font-default);
   font-size: ${props => (props.bigHeader ? 'var(--font-size-h4)' : 'var(--font-size-xl)')};
   font-weight: 500;
   text-align: center;
   line-height: 18px;
-
+  background-color: ${props =>
+    props.floatingHeader && !props.scrolled
+      ? 'var(--transparent-color)'
+      : 'var(--modal-background-content-color)'};
+  width: ${props => (props.floatingHeader ? '-webkit-fill-available' : 'auto')};
+  transition-duration: var(--default-duration);
   z-index: 3;
 
   &::after {
@@ -54,15 +60,12 @@ const StyledModalHeader = styled(Flex)<{
     bottom: -16px; // bottom and height have to match for the border to be correctly placed
     height: 16px; // bottom and height have to match for the border to be correctly placed
     width: 100%;
-    ${props =>
-      props.scrolled
-        ? 'background: linear-gradient(to bottom, var(--modal-shadow-color), transparent)'
-        : ''};
+    transition-duration: var(--default-duration);
+    background: linear-gradient(to bottom, var(--modal-shadow-color), transparent);
+
     pointer-events: none;
+    opacity: ${props => (!props.scrolled ? '0' : '1')};
   }
-
-  border-bottom: ${props =>
-    props.scrolled ? '1px solid var(--border-color)' : '1px solid var(--transparent-color)'};
 `;
 
 export enum WrapperModalWidth {
@@ -309,28 +312,28 @@ export const ModalBasicHeader = ({
   bigHeader,
   modalHeaderDataTestId,
   extraRightButton,
+  floatingHeader,
 }: WithShowExitIcon &
   WithExtraRightButton &
   WithExtraLeftButton & {
     title?: ReactNode;
     bigHeader?: boolean;
+    floatingHeader?: boolean;
     modalHeaderDataTestId?: SessionDataTestId;
   }) => {
-  const htmlDirection = useHTMLDirection();
-
   const onClose = useOnModalClose();
   const scrolled = useIsModalScrolled();
 
   return (
     <StyledModalHeader
       data-testid={modalHeaderDataTestId}
-      dir={htmlDirection}
       $container={true}
       $flexDirection={'row'}
       $justifyContent={'space-between'}
       $alignItems={'center'}
-      padding={'var(--margins-lg) var(--margins-sm)  var(--margins-sm) var(--margins-lg)'}
+      padding={'var(--margins-lg) var(--margins-lg) var(--margins-sm) var(--margins-lg)'}
       bigHeader={bigHeader}
+      floatingHeader={floatingHeader}
       scrolled={scrolled}
     >
       <Flex
@@ -410,6 +413,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
   const [scrolled, setScrolled] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
+  const htmlDirection = useHTMLDirection();
   const isTopModal = useIsTopModal(modalId);
 
   useKey((event: KeyboardEvent) => {
@@ -440,6 +444,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
             onMouseDown={handleClick}
             role="dialog"
             data-testid={modalDataTestId}
+            dir={htmlDirection}
           >
             <StyledModal
               $contentMaxWidth={$contentMaxWidth}

ts/components/basic/SessionButton.tsx

@@ -19,6 +19,7 @@ export enum SessionButtonShape {
 export enum SessionButtonColor {
   TextPrimary = 'text-primary',
   Tertiary = 'background-tertiary',
+  Primary = 'primary',
   PrimaryDark = 'renderer-span-primary', // use primary in dark modes only since it has poor contrast in light mode
   Danger = 'danger',
   Disabled = 'button-simple-disabled',
@@ -110,16 +111,13 @@ const StyledOutlineButton = styled(StyledBaseButton)`
 const StyledSolidButton = styled(StyledBaseButton)<{ isDarkTheme: boolean }>`
   outline: none;
   background-color: ${props =>
-    props.color ? `var(--${props.color}-color)` : `var(--button-solid-background-color)`};
+    props.color ? `var(--${props.color}-color)` : `var(--primary-color)`};
   color: ${props =>
-    props.color &&
-    ((props.color !== SessionButtonColor.PrimaryDark && !props.isDarkTheme) ||
-      (props.isDarkTheme && props.color === SessionButtonColor.Tertiary))
+    props.color === SessionButtonColor.Tertiary
       ? 'var(--text-primary-color)'
-      : `var(--button-solid-text-color)`};
+      : `var(--black-color)`};
   border: 1px solid
-    ${props =>
-      props.color ? `var(--${props.color}-color)` : `var(--button-solid-background-color)`};
+    ${props => (props.color ? `var(--${props.color}-color)` : `var(--primary-color)`)};
 
   &.disabled {
     background-color: var(--transparent-color);

ts/components/basic/SessionIdNotEditable.tsx

@@ -45,7 +45,7 @@ export const SessionIDNotEditable = ({
   const pointerStyle = onClick ? { cursor: 'pointer' } : {};
 
   const style = tooltipNode
-    ? { ...providedStyle, ...pointerStyle, marginLeft: 'var(--margins-lg)' }
+    ? { ...providedStyle, ...pointerStyle, marginStart: 'var(--margins-lg)' }
     : { ...providedStyle, ...pointerStyle };
 
   if (displayType === 'blinded') {

ts/components/conversation/composition/CompositionBox.tsx

@@ -61,7 +61,7 @@ import { useShowBlockUnblock } from '../../menuAndSettingsHooks/useShowBlockUnbl
 import { showLocalizedPopupDialog } from '../../dialog/LocalizedPopupDialog';
 import { formatNumber } from '../../../util/i18n/formatting/generics';
 import { getFeatureFlag } from '../../../state/ducks/types/releasedFeaturesReduxTypes';
-import { SessionProInfoVariant, showSessionProInfoDialog } from '../../dialog/SessionProInfoModal';
+import { ProCTAVariant, showSessionProInfoDialog } from '../../dialog/SessionProInfoModal';
 import { tStripped } from '../../../localization/localeTools';
 import type { ProcessedLinkPreviewThumbnailType } from '../../../webworker/workers/node/image_processor/image_processor';
 import { selectWeAreProUser } from '../../../hooks/useParamSelector';
@@ -746,7 +746,7 @@ class CompositionBoxInner extends Component<Props, State> {
       const dispatch = window.inboxStore?.dispatch;
       if (dispatch) {
         if (isProAvailable && !hasPro) {
-          showSessionProInfoDialog(SessionProInfoVariant.MESSAGE_CHARACTER_LIMIT, dispatch);
+          showSessionProInfoDialog(ProCTAVariant.MESSAGE_CHARACTER_LIMIT, dispatch);
         } else {
           showLocalizedPopupDialog(
             {

ts/components/dialog/EditProfilePictureModal.tsx

@@ -26,10 +26,7 @@ import {
 } from '../SessionWrapperModal';
 import { useIsProAvailable } from '../../hooks/useIsProAvailable';
 import { SpacerLG, SpacerSM } from '../basic/Text';
-import {
-  SessionProInfoVariant,
-  useShowSessionProInfoDialogCbWithVariant,
-} from './SessionProInfoModal';
+import { ProCTAVariant, useShowSessionProInfoDialogCbWithVariant } from './SessionProInfoModal';
 import { AvatarSize } from '../avatar/Avatar';
 import { ProIconButton } from '../buttons/ProButton';
 import { useProBadgeOnClickCb } from '../menuAndSettingsHooks/useProBadgeOnClickCb';
@@ -202,7 +199,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
      * All of those are taken care of as part of the `isProUser` check in the conversation model
      */
     if (isProAvailable && !userHasPro && isNewAvatarAnimated && !isCommunity) {
-      handleShowProInfoModal(SessionProInfoVariant.PROFILE_PICTURE_ANIMATED);
+      handleShowProInfoModal(ProCTAVariant.ANIMATED_DISPLAY_PICTURE);
       window.log.debug('Attempted to upload an animated profile picture without pro!');
       return;
     }