-
-
-
{ profile?.name }
-
{ handle() }
-
- { (select || setItem || clearItem) && (
-
-
onSelect(ev)} size="small" />
+ { state.logoSet && (
+
+
+
+
{ profile?.name }
+
{ handle() }
- )}
- { state.markup && (
-
-
-
- )}
-
+ { (select || setItem || clearItem) && (
+
+ onSelect(ev)} size="small" />
+
+ )}
+ { state.markup && (
+
+
+
+ )}
+
+ )}
);
}
diff --git a/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js b/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js
index 5263a717..4bfe7520 100644
--- a/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js
+++ b/net/web/src/session/cardSelect/selectItem/useSelectItem.hook.js
@@ -5,6 +5,7 @@ export function useSelectItem(item, selected, markup) {
const [state, setState] = useState({
logo: null,
+ logoSet: false,
selected: false,
busy: false,
className: 'passive',
@@ -30,10 +31,10 @@ export function useSelectItem(item, selected, markup) {
useEffect(() => {
const contact = card.state.cards.get(item.id);
if (contact?.data?.cardProfile?.imageSet) {
- updateState({ logo: card.actions.getCardImageUrl(item.id) });
+ updateState({ logoSet: true, logo: card.actions.getCardImageUrl(item.id) });
}
else {
- updateState({ logo: null });
+ updateState({ logoSet: true, logo: null });
}
}, [card, item]);
diff --git a/net/web/src/session/details/Details.jsx b/net/web/src/session/details/Details.jsx
index ba371fff..dc28d9f3 100644
--- a/net/web/src/session/details/Details.jsx
+++ b/net/web/src/session/details/Details.jsx
@@ -44,11 +44,12 @@ export function Details({ closeDetails, closeConversation, openContact }) {
const deleteChannel = async () => {
modal.confirm({
- title: 'Are you sure you want to delete the topic?',
+ title:
{state.strings.confirmTopic},
+ content:
{state.strings.sureTopic},
icon:
,
- bodyStyle: { padding: 16 },
- okText: "Yes, Delete",
- cancelText: "No, Cancel",
+ bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
+ okText: state.strings.remove,
+ cancelText: state.strings.cancel,
onOk() {
applyDeleteChannel();
},
@@ -72,11 +73,12 @@ export function Details({ closeDetails, closeConversation, openContact }) {
const leaveChannel = async () => {
modal.confirm({
- title: 'Are you sure you want to leave the topic?',
+ title:
{state.strings.confirmLeave},
+ content:
{state.strings.sureLeave},
icon:
,
- bodyStyle: { padding: 16 },
- okText: "Yes, Leave",
- cancelText: "No, Cancel",
+ bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
+ okText: state.strings.leave,
+ cancelText: state.strings.cancel,
onOk() {
applyLeaveChannel();
},
@@ -228,9 +230,8 @@ export function Details({ closeDetails, closeConversation, openContact }) {
-
-
+
+
);
diff --git a/net/web/src/session/details/editMembers/EditMembers.jsx b/net/web/src/session/details/editMembers/EditMembers.jsx
index 7a4cf125..725f1f78 100644
--- a/net/web/src/session/details/editMembers/EditMembers.jsx
+++ b/net/web/src/session/details/editMembers/EditMembers.jsx
@@ -1,11 +1,14 @@
import { EditMembersWrapper } from './EditMembers.styled';
import { CardSelect } from '../../cardSelect/CardSelect';
+import { Button } from 'antd';
-export function EditMembers({ members, setMember, clearMember }) {
+export function EditMembers({ members, setMember, clearMember, onClose, strings }) {
return (
-
+
Edit Membership
+
+
card?.data?.cardDetail?.status === 'connected'}
/>
+
+
+
);
}
diff --git a/net/web/src/session/details/editMembers/EditMembers.styled.js b/net/web/src/session/details/editMembers/EditMembers.styled.js
index 1a7a1df8..80b0c5af 100644
--- a/net/web/src/session/details/editMembers/EditMembers.styled.js
+++ b/net/web/src/session/details/editMembers/EditMembers.styled.js
@@ -12,7 +12,22 @@ export const EditMembersWrapper = styled.div`
min-height: 100px;
max-height: 200px;
overflow: auto;
- border: 1px solid ${Colors.divider};
+ border: 1px solid ${props => props.theme.sectionBorder};
+ background-color: ${props => props.theme.itemArea};
}
+ .title {
+ font-size: 1.2rem;
+ display: flex;
+ justify-content: center;
+ padding-bottom: 16px;
+ }
+
+ .controls {
+ display: flex;
+ justify-content: flex-end;
+ gap: 16px;
+ padding-top: 16px;
+ width: 100%;
+ }
`