fix: QA fixes (#654)

push-protocol · Aug 17, 2023 · 5a577c6 · 5a577c6
1 parent 39c7fe2
commit 5a577c6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -305,7 +305,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider account={account!} pgpPrivateKey={pgpPrivateKey} env={env} theme={lightChatTheme}>
+                <ChatUIProvider account={account!} pgpPrivateKey={pgpPrivateKey} env={env} theme={darkChatTheme}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -59,7 +59,10 @@ const Options = ({ options, setOptions, isGroup, chatInfo, groupInfo, setGroupIn
                         <DropDownItem cursor='pointer' onClick={ShowModal}>
                            <Image src={InfoIcon} height="21px" maxHeight="21px" width={'auto'} cursor="pointer"  />
 
-                          Group Info</DropDownItem>
+                          <TextItem>
+                            Group Info
+                          </TextItem>
+                        </DropDownItem>
                     </DropDownBar>)}
 
                     {modal && 
@@ -196,12 +199,11 @@ const DummyImage = styled.div`
 const DropDownBar = styled.div`
     position: absolute;
     top: 30px;
-    left: -120px;
+    left: -130px;
     display: block;
-    min-width: 110px;
+    min-width: 140px;
     color: rgb(101, 119, 149);
-    border: 1px solid rgb(74, 79, 103);
-    border: ${(props) => props.theme.dropdownBorderColor};
+    border: ${(props) => `1px solid ${props.theme.defaultBorder}`};
     background: ${(props) => props.theme.bgColorPrimary};
     z-index: 10;
     border-radius: 16px;
@@ -215,11 +217,16 @@ const DropDownItem = styled(Span)`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
   padding: 10px 16px;
   border-radius: 16px;
   z-index: 3000000;
+  width: 100%;
+`;
+
+const TextItem = styled(Span)`
+    white-space: nowrap;
+    overflow: hidden;
 `;
 
 

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -545,7 +545,7 @@ const PublicEncrypted = styled.div`
     width: 100%;
     gap: 19px;  
     align-items: center;
-    border: ${(props) => props.theme.dropdownBorderColor};
+    border: ${(props) => `1px solid ${props.theme.defaultBorder}`};
     border-radius: 16px;
     padding: 16px;
     box-sizing: border-box;
@@ -570,7 +570,7 @@ const AdminItem = styled.div`
 
 const AddWalletContainer = styled.div`
     margin-top: 20px;
-    border: ${(props) => props.theme.dropdownBorderColor};
+    border: ${(props) => `1px solid ${props.theme.defaultBorder}`};
     border-radius: 16px;
     width: 100%;
     padding: 20px 16px;
@@ -601,7 +601,7 @@ const GroupPendingMembers = styled.div`
 const PendingRequestWrapper = styled.div`
     width: 100%;
     margin-top: 20px;
-    border: ${(props) => props.theme.dropdownBorderColor};
+    border: ${(props) => `1px solid ${props.theme.defaultBorder}`};
     border-radius: 16px;
     padding: 0px 0px;
     box-sizing: border-box;

diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -42,6 +42,7 @@ export interface IChatTheme {
   modalIconColor?: string;
   pendingCardBackground?: string,
   modalHeadingColor?: string;
+  defaultBorder?: string;
 }
 
 export const lightChatTheme: IChatTheme = {
@@ -83,6 +84,7 @@ export const lightChatTheme: IChatTheme = {
   modalIconColor: '#657795',
   pendingCardBackground: 'rgba(173, 176, 190, 0.12)',
   modalHeadingColor: '#333333',
+  defaultBorder: '#E5E8F6',
 };
 
 export const darkChatTheme: IChatTheme = {
@@ -125,5 +127,6 @@ export const darkChatTheme: IChatTheme = {
   modalIconColor: '#787E99',
   pendingCardBackground: 'rgba(173, 176, 190, 0.08)',
   modalHeadingColor: '#B6BCD6',
+  defaultBorder: '#4A4F67'
 };