Skip to content

Commit

Permalink
fix: fixed minor ui iisues
Browse files Browse the repository at this point in the history
  • Loading branch information
@mishramonalisha76
mishramonalisha76 committed Oct 18, 2023
2 parents 7bc87aa + 7177cf9 commit 2c2bfed
Show file tree
Hide file tree
Showing 8 changed files with 330 additions and 94 deletions.
2 changes: 1 addition & 1 deletion packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ChatViewComponentTest = () => {
<h2>Chat UI Test page</h2>
{/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
<ChatViewComponentCard>
<ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
<ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='5b3dba72949b77c48fe12cf87ffab91309ed9d1d78dec1db17c254020d2ffe2b' limit={10} isConnected={true} />
</ChatViewComponentCard>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion packages/uiweb/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
"livekit-client": "^1.13.3",
"moment": "^2.29.4",
"react-icons": "^4.10.1",
"react-easy-crop": "^4.1.4",
"react-image-file-resizer": "^0.4.7",
"react-toastify": "^9.1.3",
"react-twitter-embed": "^4.0.4",
"uuid": "^9.0.1"
Expand All @@ -33,6 +35,6 @@
"@pushprotocol/restapi": "^1.2.15",
"@pushprotocol/socket": "^0.5.0",
"react": ">=16.8.0",
"styled-components": "^5.3.5"
"styled-components": "^6.0.8"
}
}
169 changes: 109 additions & 60 deletions packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,11 @@ import addIcon from '../../../icons/addicon.svg';
import DismissAdmin from '../../../icons/dismissadmin.svg';
import AddAdmin from '../../../icons/addadmin.svg';
import Remove from '../../../icons/remove.svg';
import { shortenText } from '../../../helpers';
import { copyToClipboard, shortenText } from '../../../helpers';
import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg';
import ConditionsComponent from '../CreateGroup/ConditionsComponent';
import { ConditionArray } from '../exportedTypes';
import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants';
import * as PushAPI from '@pushprotocol/restapi';
import { Rule } from '../types';
import {
GroupRulesType,
getRuleInfo,
} from '../helpers/getRulesToCondtionArray';
import { getRuleInfo } from '../helpers/getRulesToCondtionArray';

const UPDATE_KEYS = {
REMOVE_MEMBER: 'REMOVE_MEMBER',
Expand Down Expand Up @@ -95,10 +89,14 @@ const PendingMembers = ({
</PendingSection>

{showPendingRequests && (
<Section
margin="0px 0px 0px 0px"
<ProfileSection
flexDirection="column"
flex="1"
theme={theme}
maxHeight="7rem"
height="7rem"
justifyContent="start"
overflow="hidden auto"
borderRadius="16px"
>
{groupInfo?.pendingMembers &&
Expand All @@ -120,7 +118,7 @@ const PendingMembers = ({
/>
</GroupPendingMembers>
))}
</Section>
</ProfileSection>
)}
</PendingRequestWrapper>
);
Expand Down Expand Up @@ -148,7 +146,7 @@ export const ConditionsInformation = ({
return null;
};

console.log(groupRules);

return (
<Section
margin="15px 0px 0px 0px"
Expand All @@ -167,15 +165,17 @@ export const ConditionsInformation = ({
)}
{Object.keys(ACCESS_TYPE_TITLE).map((key, idx) => (
<Section key={idx} flexDirection="column">
<Span
{getOperator(key as keyof typeof groupRules) ? (
<>
<Span
fontSize="16px"
fontWeight="500"
alignSelf="start"
margin="0 0 10px 0"
margin="0 0 5px 0"
>
{ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]?.heading}
</Span>
{getOperator(key as keyof typeof groupRules) ? (
<Span fontSize="14px" margin="20px 0">
{
OPERATOR_OPTIONS_INFO[
Expand All @@ -193,14 +193,17 @@ export const ConditionsInformation = ({
}
</Span>
</Span>
</>
) : null}

<ConditionSection
width="100%"
overflow="hidden auto"
maxHeight="12rem"
maxHeight="12.5rem"
theme={theme}
padding="0 4px 0 0"
justifyContent="start"
flexDirection="column"
>
<ConditionsComponent
moreOptions={false}
Expand Down Expand Up @@ -301,6 +304,7 @@ const GroupInformation = ({
useState<boolean>(false);
const [memberList, setMemberList] = useState<any>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [copyText, setCopyText] = useState<string>('');
const [selectedMemberAddress, setSelectedMemberAddress] = useState<
string | null
>(null);
Expand Down Expand Up @@ -485,13 +489,56 @@ const GroupInformation = ({

return (
<Section width={isMobile ? '100%' : '410px'} flexDirection="column">
<GroupDescription>
<Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
Chat ID
</Span>
<Section
gap="5px"
alignSelf="start"
onClick={() => {
copyToClipboard(groupInfo?.chatId);
setCopyText('copied');
}}
onMouseEnter={() => {
setCopyText('click to copy');
}}
onMouseLeave={() => {
setCopyText('');
}}
>
<Span
textAlign="start"
fontSize="16px"
fontWeight="400"
color={theme.textColor?.modalSubHeadingText}
>
{shortenText(groupInfo?.chatId, 8, true)}
</Span>
{!!copyText && (
<Span
cursor="pointer"
position="relative"
padding="2px 10px"
color={theme.textColor?.modalSubHeadingText}
fontSize="14px"
fontWeight="400"
background={theme.backgroundColor?.modalHoverBackground}
borderRadius="16px"
>
{copyText}
</Span>
)}
</Section>
</GroupDescription>
<GroupDescription>
<Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
Group Description
</Span>
<Span
textAlign="start"
fontSize="18px"
fontSize="16px"
fontWeight="400"
color={theme.textColor?.modalSubHeadingText}
>
{groupInfo?.groupDescription}
Expand Down Expand Up @@ -557,36 +604,35 @@ const GroupInformation = ({
)}
</Section>

<Section
<ProfileSection
margin="15px 10px"
flexDirection="column"
flex="1"
zIndex="2"
maxHeight="10rem"
height="100%"
maxHeight="9rem"
height="9rem"
justifyContent="start"
overflow="hidden auto"
theme={theme}
>
<Section flexDirection="column" height="100%">
{groupInfo?.members &&
groupInfo?.members?.length > 0 &&
groupInfo?.members.map((item, index) => (
<MemberProfileCard
key={index}
member={item}
dropdownValues={
item?.isAdmin && isAccountOwnerAdmin(groupInfo, account!)
? [removeAdminDropdown, removeMemberDropdown]
: isAccountOwnerAdmin(groupInfo, account!)
? [addAdminDropdown, removeMemberDropdown]
: []
}
selectedMemberAddress={selectedMemberAddress}
setSelectedMemberAddress={setSelectedMemberAddress}
dropdownRef={dropdownRef}
/>
))}
</Section>
</Section>
{groupInfo?.members &&
groupInfo?.members?.length > 0 &&
groupInfo?.members.map((item, index) => (
<MemberProfileCard
key={index}
member={item}
dropdownValues={
item?.isAdmin && isAccountOwnerAdmin(groupInfo, account!)
? [removeAdminDropdown, removeMemberDropdown]
: isAccountOwnerAdmin(groupInfo, account!)
? [addAdminDropdown, removeMemberDropdown]
: []
}
selectedMemberAddress={selectedMemberAddress}
setSelectedMemberAddress={setSelectedMemberAddress}
dropdownRef={dropdownRef}
/>
))}
</ProfileSection>
{showAddMoreWalletModal && (
<AddWalletContent
onSubmit={addMembers}
Expand Down Expand Up @@ -654,27 +700,11 @@ export const GroupInfoModal = ({
string | null
>(null);

const { updateGroup } = useUpdateGroup();
const isMobile = useMediaQuery(device.mobileL);

const dropdownRef = useRef<any>(null);
useClickAway(dropdownRef, () => setSelectedMemberAddress(null));

type UpdateGroupType = {
adminList: Array<string>;
memberList: Array<string>;
};

const handleUpdateGroup = async (options: UpdateGroupType) => {
const { adminList, memberList } = options || {};
const updateResponse = await updateGroup({
groupInfo,
memberList,
adminList,
});
return { updateResponse };
};

const onClose = (): void => {
setModal(false);
};
Expand Down Expand Up @@ -706,11 +736,16 @@ export const GroupInfoModal = ({
/>

<Section flexDirection="column" alignItems="flex-start" gap="5px">
<Span fontSize="20px" color={theme.textColor?.modalHeadingText}>
<Span
fontSize="20px"
fontWeight="500"
color={theme.textColor?.modalHeadingText}
>
{groupInfo?.groupName}
</Span>
<Span
fontSize="16px"
fontWeight="500"
color={theme.textColor?.modalSubHeadingText}
>
{groupInfo?.members?.length} Members
Expand All @@ -737,7 +772,7 @@ const GroupHeader = styled.div`
`;

const GroupDescription = styled.div`
margin-top: 34px;
margin-top: 25px;
display: flex;
flex-direction: column;
width: 100%;
Expand Down Expand Up @@ -837,4 +872,18 @@ const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
}
`;

const ProfileSection = styled(Section)<{ theme: IChatTheme }>`
&::-webkit-scrollbar-thumb {
background: ${(props) => props.theme.scrollbarColor};
border-radius: 10px;
}
&::-webkit-scrollbar-button {
height: 40px;
}
&::-webkit-scrollbar {
width: 4px;
}
`;

//auto update members when an user accepts not done
Loading

0 comments on commit 2c2bfed

Please sign in to comment.