fix: address PR comments + fix shining animation

Author: Bilb

stylesheets/_modules.scss

@@ -197,6 +197,7 @@
   overflow-y: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  align-items: center;
 }
 
 // Module: Contact List Item

ts/components/SessionWrapperModal.tsx

@@ -14,6 +14,7 @@ import { StyledRootDialog } from './dialog/StyledRootDialog';
 import { LUCIDE_ICONS_UNICODE } from './icon/lucide';
 import { IsModalScrolledContext, useIsModalScrolled } from '../contexts/IsModalScrolledContext';
 import { OnModalCloseContext, useOnModalClose } from '../contexts/OnModalCloseContext';
+import { SessionButton, SessionButtonColor } from './basic/SessionButton';
 
 type WithExtraLeftButton = {
   /**
@@ -179,6 +180,35 @@ export const ModalActionsContainer = ({
   );
 };
 
+/**
+ * In the modal, the bottom actions sometimes have a border.
+ * When they do, they all share the same styling (minWidth 125px) so this component is here to reuse that logic.
+ */
+export function ModalBottomButtonWithBorder({
+  text,
+  onClick,
+  buttonColor,
+  dataTestId,
+  disabled,
+}: {
+  text: string;
+  onClick: () => void | Promise<void>;
+  disabled?: boolean;
+  buttonColor?: SessionButtonColor;
+  dataTestId?: SessionDataTestId;
+}) {
+  return (
+    <SessionButton
+      text={text}
+      onClick={onClick}
+      disabled={disabled}
+      buttonColor={buttonColor ?? SessionButtonColor.PrimaryDark}
+      dataTestId={dataTestId}
+      style={{ minWidth: '125px' }}
+    />
+  );
+}
+
 export type ModalTopAnchor = '15vh' | '25vh' | '35vh' | '45vh';
 
 export type SessionWrapperModalType = {

ts/components/basic/SessionButtonShiny.tsx

@@ -1,10 +1,16 @@
 import styled, { keyframes, type CSSProperties } from 'styled-components';
 import { SessionButton, type SessionButtonProps, StyledBaseButton } from './SessionButton';
 
+/**
+ * Note: we want 0.6s shine + 3s pause
+ */
 const shine = keyframes`
-  0% {
+ 0% {
     transform: translateX(-100%);
   }
+  16.6% {
+    transform: translateX(100%);
+  }
   100% {
     transform: translateX(100%);
   }
@@ -19,7 +25,6 @@ const ShinyButtonContainer = styled.div`
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    transform: translateX(-100%);
     animation: ${shine} 0.6s ease-in-out infinite;
     animation-delay: 0s;
     animation-iteration-count: infinite;

ts/components/buttons/CopyToClipboardButton.tsx

@@ -5,12 +5,13 @@ import useTimeoutFn from 'react-use/lib/useTimeoutFn';
 
 import { useHotkey } from '../../hooks/useHotkey';
 import { ToastUtils } from '../../session/utils';
-import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
+import { SessionButtonProps } from '../basic/SessionButton';
 import { SessionIconButtonProps, SessionLucideIconButton } from '../icon/SessionIconButton';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 import type { SessionIconSize } from '../icon';
 import { tr } from '../../localization/localeTools';
 import { DURATION } from '../../session/constants';
+import { ModalBottomButtonWithBorder } from '../SessionWrapperModal';
 
 type CopyProps = {
   copyContent?: string;
@@ -54,11 +55,13 @@ export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
   useHotkey('c', onClick, !hotkey);
 
   return (
-    <SessionButton
+    <ModalBottomButtonWithBorder
       aria-label={'copy to clipboard button'}
-      {...props}
-      text={!isEmpty(text) ? text : copied ? tr('copied') : tr('copy')}
+      text={text && !isEmpty(text) ? text : copied ? tr('copied') : tr('copy')}
       onClick={onClick}
+      buttonColor={props.buttonColor}
+      dataTestId={props.dataTestId}
+      disabled={props.disabled}
     />
   );
 };

ts/components/buttons/ProButton.tsx

@@ -37,6 +37,7 @@ export function ProIconButton({
   dataTestId: SessionDataTestId;
   style?: CSSProperties;
 }) {
+  const mergedStyle = { ...defaultStyle, ...style };
   if (onClick) {
     return (
       <SessionIconButton
@@ -46,7 +47,7 @@ export function ProIconButton({
         dataTestId={dataTestId}
         disabled={disabled}
         onClick={onClick}
-        style={{ ...style, ...defaultStyle }}
+        style={mergedStyle}
       />
     );
   }
@@ -57,7 +58,7 @@ export function ProIconButton({
       iconSize={iconSize}
       borderRadius={sizeToBorderRadius(iconSize)}
       dataTestId={dataTestId}
-      style={{ ...style, ...defaultStyle }}
+      style={mergedStyle}
     />
   );
 }

ts/components/dialog/UserProfileModal.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { ConvoHub } from '../../session/conversations';
 import { openConversationWithMessages } from '../../state/ducks/conversations';
 import { updateUserProfileModal, UserProfileModalState } from '../../state/ducks/modalDialog';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import { SessionButtonColor } from '../basic/SessionButton';
 import { CopyToClipboardButton } from '../buttons/CopyToClipboardButton';
 import { ConversationTypeEnum } from '../../models/types';
 import { Flex } from '../basic/Flex';
@@ -15,6 +15,7 @@ import {
   ModalBasicHeader,
   ModalActionsContainer,
   SessionWrapperModal,
+  ModalBottomButtonWithBorder,
 } from '../SessionWrapperModal';
 import { tr } from '../../localization/localeTools';
 import { PubKey } from '../../session/types';
@@ -103,12 +104,10 @@ export const UserProfileModal = ({
       onClose={closeDialog}
       buttonChildren={
         <ModalActionsContainer extraBottomMargin={true}>
-          <SessionButton
+          <ModalBottomButtonWithBorder
             text={tr('message')}
             onClick={onClickStartConversation}
-            buttonColor={SessionButtonColor.PrimaryDark}
             dataTestId="new-session-conversation"
-            style={{ minWidth: '125px' }}
             disabled={isBlindedAndNotResolved && hasDisabledMsgRequests}
           />
 
@@ -117,7 +116,6 @@ export const UserProfileModal = ({
               copyContent={conversationIdToDisplay}
               buttonColor={SessionButtonColor.PrimaryDark}
               dataTestId="copy-button-account-id"
-              style={{ minWidth: '125px' }}
               hotkey={true}
             />
           )}

ts/components/dialog/edit-profile/EditProfileDialog.tsx

@@ -22,8 +22,9 @@ import {
   ModalBasicHeader,
   ModalActionsContainer,
   SessionWrapperModal,
+  ModalBottomButtonWithBorder,
 } from '../../SessionWrapperModal';
-import { SessionButtonColor, SessionButton } from '../../basic/SessionButton';
+import { SessionButtonColor } from '../../basic/SessionButton';
 import { CopyToClipboardButton } from '../../buttons';
 import { SessionIDNotEditable } from '../../basic/SessionIdNotEditable';
 import { Flex } from '../../basic/Flex';
@@ -245,37 +246,31 @@ export const EditProfileDialog = () => {
                 hotkey={true}
                 reference={copyButtonRef}
                 dataTestId="copy-button-profile-update"
-                style={{ minWidth: '125px' }}
               />
               {mode === 'default' ? (
-                <SessionButton
+                <ModalBottomButtonWithBorder
                   text={tr('qrView')}
                   onClick={() => {
                     setMode('qr');
                   }}
                   buttonColor={SessionButtonColor.PrimaryDark}
                   dataTestId="view-qr-code-button"
-                  style={{ minWidth: '125px' }}
                 />
               ) : null}
             </ModalActionsContainer>
           ) : (
             !loading && (
               <ModalActionsContainer extraBottomMargin={true}>
-                <SessionButton
+                <ModalBottomButtonWithBorder
                   text={tr('save')}
                   onClick={onClickOK}
                   disabled={cannotContinue}
-                  buttonColor={SessionButtonColor.PrimaryDark}
                   dataTestId="save-button-profile-update"
-                  style={{ minWidth: '125px' }}
                 />
-                <SessionButton
+                <ModalBottomButtonWithBorder
                   text={tr('cancel')}
                   onClick={cancelEdit}
-                  buttonColor={SessionButtonColor.PrimaryDark}
                   dataTestId="invalid-data-testid"
-                  style={{ minWidth: '125px' }}
                 />
               </ModalActionsContainer>
             )

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -17,6 +17,8 @@ import { tr } from '../../../localization/localeTools';
 import { SessionIDNotEditable } from '../../basic/SessionIdNotEditable';
 
 const StyledHeadingContainer = styled(Flex)`
+  gap: var(--margins-xs);
+
   .session-icon-button {
     border: 1px solid var(--text-primary-color);
     border-radius: 9999px;
@@ -47,7 +49,7 @@ const StyledDescription = styled.div`
   padding: 0 var(--margins-sm);
 `;
 
-const StyledButtonerContainer = styled.div`
+const StyledButtonContainer = styled.div`
   .session-button {
     width: 160px;
     height: 41px;
@@ -90,15 +92,15 @@ export const OverlayInvite = () => {
           <SpacerMD />
           <StyledDescription>{tr('accountIdCopyDescription')}</StyledDescription>
           <SpacerLG />
-          <StyledButtonerContainer>
+          <StyledButtonContainer>
             <CopyToClipboardButton
               buttonColor={SessionButtonColor.PrimaryDark}
               copyContent={ourSessionID}
               onCopyComplete={() => setIdCopied(true)}
               hotkey={true}
               dataTestId="copy-button-account-id"
             />
-          </StyledButtonerContainer>
+          </StyledButtonContainer>
         </>
       ) : (
         <>