fix: fixed font sizes and dark theme (#1376) (#1377)

* fix: fixed font sizes and dark theme * fix: fixed line height
push-protocol · Jul 10, 2024 · e03cb0a · e03cb0a
1 parent 5792e84
commit e03cb0a
Show file tree

Hide file tree

Showing 10 changed files with 21,554 additions and 30,226 deletions.
diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewSearchList/ChatPreviewSearchList.tsx b/packages/uiweb/src/lib/components/chat/ChatPreviewSearchList/ChatPreviewSearchList.tsx
@@ -611,7 +611,7 @@ const SearchError = styled(Span)`
   align-self: center;
   padding: 12px 18px;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: normal;
   font-size: 10px;
   font-weight: 500;
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
@@ -136,6 +136,7 @@ export const MessageCard = ({
         key={`${fragmentIndex}-${lineIndex}`} // Updated key to be more unique
         alignSelf="start"
         textAlign="left"
+        lineHeight="1.4em"
         fontSize={position ? `${theme.fontSize?.chatSentBubbleText}` : `${theme.fontSize?.chatReceivedBubbleText}`}
         fontWeight={
           position ? `${theme.fontWeight?.chatSentBubbleText}` : `${theme.fontWeight?.chatReceivedBubbleText}`

diff --git a/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx b/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx
@@ -210,7 +210,7 @@ const LoaderMessage = styled.div`
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.3rem;
-  letter-spacing: 0em;
+  letter-spacing: normal;
   text-align: left;
 `;
 
@@ -232,9 +232,9 @@ const ToastContent = styled.div`
 const ToastTitle = styled.div`
   font-weight: 500;
   font-size: 1.125rem;
-  letter-spacing: -0.019em;
+  letter-spacing: normal;
   line-height: 1.4rem;
-  letter-spacing: 0em;
+  letter-spacing: normal;
   text-align: left;
   margin-bottom: 1%;
 `;

diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -105,7 +105,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
         <>
           {member?.name || member?.web3Name ? (
             <Span
-              fontSize={customStyle?.fontSize ?? '18px'}
+              fontSize={customStyle?.fontSize ?? '16px'}
               fontWeight={customStyle?.fontWeight ?? '400'}
               color={customStyle?.textColor ?? theme.textColor?.modalSubHeadingText}
               position="relative"
@@ -135,7 +135,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
               animation={theme.skeletonBG}
             >
               <RecipientSpan
-                fontSize={member?.name || member?.web3Name ? '14px' : customStyle?.fontSize ?? '18px'}
+                fontSize={member?.name || member?.web3Name ? '14px' : customStyle?.fontSize ?? '16px'}
                 fontWeight={member?.name || member?.web3Name ? '500' : customStyle?.fontWeight ?? '400'}
                 color={
                   member?.name || member?.web3Name

diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
@@ -12,7 +12,7 @@ export interface ITextInputProps {
   onInputChange?: any;
   disabled?: boolean;
   customStyle?: CustomStyleParamsType;
-  error?:boolean;
+  error?: boolean;
 }
 type CustomStyleParamsType = {
   background?: string;
@@ -73,19 +73,17 @@ const LabelContainer = styled.div`
   justify-content: space-between;
 
   font-weight: 500;
-  font-size: 16px;
+  font-size: 14px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType,error:boolean}>`
+const Input = styled.input<IChatTheme & { customStyle: CustomStyleParamsType; error: boolean }>`
   padding: 16px;
   margin-top: 8px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
   background: ${(props) =>
-    props.customStyle?.background
-      ? props.customStyle.background
-      : props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
+    props.customStyle?.background ? props.customStyle.background : props.theme.backgroundColor.modalInputBackground};
+  border: ${(props) => (props.error ? ' 1px solid #ED5858' : props.theme.border.modalInnerComponents)};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
   font-family: ${(props) => props.theme.fontFamily};
@@ -98,7 +96,6 @@ const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType,error
   &:focus {
     border: 1px solid #ffdbf0;
   }
- 
 `;
 
 const CharCounter = styled.div<IChatTheme>`

diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -217,12 +217,12 @@ const darkSkeletonLoading = keyframes`
 const animation = () =>
   css`
     ${lightSkeletonLoading} 1s linear infinite alternate;
-`;
+  `;
 
 const darkAnimation = () =>
   css`
     ${darkSkeletonLoading} 1s linear infinite alternate;
-`;
+  `;
 
 //dark theme object
 export const lightChatTheme: IChatTheme = {
@@ -300,20 +300,20 @@ export const lightChatTheme: IChatTheme = {
   fontSize: {
     chatProfileText: '17px',
     messageInputText: '16px',
-    chatSentBubbleText: '16px',
-    chatReceivedBubbleText: '16px',
+    chatSentBubbleText: '14px',
+    chatReceivedBubbleText: '14px',
     timestamp: '12px',
     encryptionMessageText: '13px',
-    chatReceivedBubbleAddressText: '16px',
-    chatReceivedBubbleTimestampText: '12px',
-    chatSentBubbleTimestampText: '12px',
+    chatReceivedBubbleAddressText: '12px',
+    chatReceivedBubbleTimestampText: '10px',
+    chatSentBubbleTimestampText: '10px',
     searchInputText: '16px',
     searchPlaceholderText: '16px',
-    chatPreviewParticipantText: '16px',
+    chatPreviewParticipantText: '14px',
     chatPreviewMessageText: '14px',
     chatPreviewDateText: '12px',
     chatPreviewBadgeText: '12px',
-    userProfileText: '18px',
+    userProfileText: '16px',
     chatFrameTitleText: '16px',
     chatFrameDescriptionText: '14px',
   },
@@ -325,7 +325,7 @@ export const lightChatTheme: IChatTheme = {
     chatReceivedBubbleText: '400',
     timestamp: '400',
     encryptionMessageText: '400',
-    chatReceivedBubbleAddressText: '300',
+    chatReceivedBubbleAddressText: '500',
     chatReceivedBubbleTimestampText: '400',
     chatSentBubbleTimestampText: '400',
     searchInputText: '400',
@@ -397,7 +397,7 @@ export const lightChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
-  skeletonBG: animation
+  skeletonBG: animation,
 };
 
 export const darkChatTheme: IChatTheme = {
@@ -454,41 +454,40 @@ export const darkChatTheme: IChatTheme = {
     buttonBackground: 'rgb(202, 89, 155)',
     buttonHotBackground: '#D53A94',
     searchInputBackground: 'rgb(64,70,80)',
-    modalBackground: 'rgb(47, 49, 55)',
-    criteriaLabelBackground: 'rgb(47, 49, 55)',
+    modalBackground: '#202124',
+    criteriaLabelBackground: '#202124',
     modalInputBackground: 'transparent',
     modalHoverBackground: 'rgb(64, 70, 80)',
     buttonDisableBackground: '#787E99',
     toastSuccessBackground: 'linear-gradient(90.15deg, #30CC8B -125.65%, #30CC8B -125.63%, #2F3137 42.81%)',
     toastErrorBackground: 'linear-gradient(89.96deg, #FF2070 -101.85%, #2F3137 51.33%)',
     toastWarningBackground: 'linear-gradient(90.15deg, #FFB800 -125.65%, #FFB800 -125.63%, #FFF9FB 42.81%)',
     toastShadowBackground: '#00000010',
-    chatPreviewBackground: 'rgb(47, 49, 55)',
+    chatPreviewBackground: '#202124',
     chatPreviewSelectedBackground: 'rgb(64, 70, 80)',
     chatPreviewBadgeBackground: 'rgb(226,8,128)',
     chatPreviewHoverBackground: 'rgb(64, 70, 80)',
-    userProfileBackground: 'rgb(47, 49, 55)',
-
-    chatWidgetModalBackground: 'rgb(47, 49, 55)',
+    userProfileBackground: '#202124',
+    chatWidgetModalBackground: '#202124',
   },
 
   fontSize: {
     chatProfileText: '17px',
     messageInputText: '16px',
-    chatSentBubbleText: '16px',
-    chatReceivedBubbleText: '16px',
+    chatSentBubbleText: '14px',
+    chatReceivedBubbleText: '14px',
     timestamp: '12px',
     encryptionMessageText: '13px',
-    chatReceivedBubbleAddressText: '16px',
-    chatReceivedBubbleTimestampText: '12px',
-    chatSentBubbleTimestampText: '12px',
+    chatReceivedBubbleAddressText: '12px',
+    chatReceivedBubbleTimestampText: '10px',
+    chatSentBubbleTimestampText: '10px',
     searchInputText: '16px',
     searchPlaceholderText: '16px',
-    chatPreviewParticipantText: '16px',
+    chatPreviewParticipantText: '14px',
     chatPreviewMessageText: '14px',
     chatPreviewDateText: '12px',
     chatPreviewBadgeText: '12px',
-    userProfileText: '18px',
+    userProfileText: '16px',
     chatFrameTitleText: '16px',
     chatFrameDescriptionText: '14px',
   },
@@ -500,7 +499,7 @@ export const darkChatTheme: IChatTheme = {
     chatReceivedBubbleText: '400',
     timestamp: '400',
     encryptionMessageText: '400',
-    chatReceivedBubbleAddressText: '300',
+    chatReceivedBubbleAddressText: '500',
     chatReceivedBubbleTimestampText: '400',
     chatSentBubbleTimestampText: '400',
     searchInputText: '400',
@@ -571,5 +570,5 @@ export const darkChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
-  skeletonBG: darkAnimation
+  skeletonBG: darkAnimation,
 };
diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
@@ -176,7 +176,7 @@ export const Span = styled.span<SpanStyleProps>`
   font-size: ${(props) => props.fontSize || 'inherit'};
   font-weight: ${(props) => props.fontWeight || '300'};
   left: ${(props) => props.left || 'auto'};
-  letter-spacing: ${(props) => props.letterSpacing || 'inherit'};
+  letter-spacing: ${(props) => props.letterSpacing || 'normal'};
   line-height: ${(props) => props.lineHeight || 'initial'};
   cursor: ${(props) => props.cursor || 'default'};
   margin: ${(props) => props.margin || '0px'};
@@ -249,7 +249,7 @@ export const Anchor = styled.a<AnchorStyleProps>`
   font-size: ${(props) => props.fontSize || 'inherit'};
   font-weight: ${(props) => props.fontWeight || '300'};
   left: ${(props) => props.left || 'auto'};
-  letter-spacing: ${(props) => props.letterSpacing || 'inherit'};
+  letter-spacing: ${(props) => props.letterSpacing || 'normal'};
   line-height: ${(props) => props.lineHeight || 'initial'};
   cursor: ${(props) => props.cursor || 'pointer'};
   margin: ${(props) => props.margin || '0px'};

diff --git a/packages/uiweb/src/lib/components/supportChat/Modal.tsx b/packages/uiweb/src/lib/components/supportChat/Modal.tsx
@@ -6,16 +6,9 @@ import { AddressInfo } from './AddressInfo';
 import PoweredByPushLogo from '../../icons/sponsorPush.svg';
 import { SponserPushIcon } from '../../icons/SponserPush';
 import { HandWaveSvg } from '../../icons/HandWaveSvg';
-import {
-  SupportChatMainStateContext,
-  SupportChatPropsContext,
-} from '../../context';
+import { SupportChatMainStateContext, SupportChatPropsContext } from '../../context';
 import { Chats } from './Chats';
-import {
-  createUserIfNecessary,
-  getChats,
-  walletToPCAIP10,
-} from '../../helpers';
+import { createUserIfNecessary, getChats, walletToPCAIP10 } from '../../helpers';
 import type { IMessageIPFS } from '../../types';
 import { useChatScroll } from '../../hooks';
 import { Spinner } from './spinner/Spinner';
@@ -26,12 +19,9 @@ const chatsFetchedLimit = 10;
 
 export const Modal: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [lastThreadHashFetched, setLastThreadHashFetched] = useState<
-    string | null
-  >(null);
+  const [lastThreadHashFetched, setLastThreadHashFetched] = useState<string | null>(null);
   const [wasLastListPresent, setWasLastListPresent] = useState<boolean>(true);
-  const { supportAddress, user, env, account, signer, greetingMsg, theme } =
-    useContext<any>(SupportChatPropsContext);
+  const { supportAddress, user, env, account, signer, greetingMsg, theme } = useContext<any>(SupportChatPropsContext);
   const {
     chats,
     setChatsSorted,
@@ -170,7 +160,11 @@ export const Modal: React.FC = () => {
         />
       )}
       {loading && <Spinner size="40" />}
-      <ChatSection ref={listInnerRef} onScroll={onScroll} theme={theme}>
+      <ChatSection
+        ref={listInnerRef}
+        onScroll={onScroll}
+        theme={theme}
+      >
         {connectedUser && chats.length ? (
           chats.map((chat: IMessageIPFS, index: number) => (
             <Chats
@@ -186,17 +180,28 @@ export const Modal: React.FC = () => {
       </ChatSection>
       {!connectedUser && !loading && (
         <ConnectSection>
-          <Button onClick={() => connectUser()} theme={theme}>
+          <Button
+            onClick={() => connectUser()}
+            theme={theme}
+          >
             Connect
           </Button>
           <Span>Connect your wallet to continue</Span>
         </ConnectSection>
       )}
-      {toastMessage && <Toaster message={toastMessage} type={toastType} />}
+      {toastMessage && (
+        <Toaster
+          message={toastMessage}
+          type={toastType}
+        />
+      )}
 
       <InputSection>
         {connectedUser && <ChatInput />}
-        <Div height="18px" width="145px">
+        <Div
+          height="18px"
+          width="145px"
+        >
           <SponserPushIcon />
         </Div>
       </InputSection>