styling detail modals

net/web/src/constants/Strings.js

@@ -162,7 +162,12 @@ export const en = {
   fontSize: 'Change Font Size',
   postMessage: 'Post Message',
 
+  close: 'Close',
   leave: 'Leave',
+  confirmTopic: 'Deleting Topic',
+  sureTopic: 'Are you sure you want to delete this topic?',
+  confirmLeave: 'Leaving Topic',
+  sureLeave: 'Are you sure you want to leave this topic?',
 };
 
 export const fr = {
@@ -329,6 +334,11 @@ export const fr = {
   fontSize: 'Changer la Taille du Text',
   postMessage: 'Publier le Message',
 
-  leave: 'Partir',
+  close: 'Fermer',
+  leave: 'Quitter',
+  confirmTopic: 'Suppression du Sujet',
+  sureTopic: 'Êtes-Vous Sûr de Vouloir Supprimer ce Sujet?',
+  confirmLeave: 'Quitter le Suject',
+  sureLeave: 'Êtes-Vous Sûr de Vouloir Quitter ce Sujet?',
 };
 

net/web/src/dashboard/accountItem/AccountItem.jsx

@@ -16,7 +16,7 @@ export function AccountItem({ item, remove }) {
       content: <span style={state.menuStyle}>{state.strings.areSure}</span>,
       icon: <ExclamationCircleOutlined />,
       bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
-      okText: state.strings.ok,
+      okText: state.strings.remove,
       cancelText: state.strings.cancel,
       onOk() {
         applyRemoveAccount();

net/web/src/session/cardSelect/selectItem/SelectItem.jsx

@@ -30,23 +30,25 @@ export function SelectItem({ item, select, selected, markup, setItem, clearItem
 
   return (
     <SelectItemWrapper onClick={onSelect}>
-      <div class={ state.className }>
+      { state.logoSet && (
-        <Logo url={state.logo} width={32} height={32} radius={8} />
+        <div className={ state.className }>
-        <div class="details">
+          <Logo url={state.logo} width={32} height={32} radius={8} />
-          <div class="name">{ profile?.name }</div>
+          <div className="details">
-          <div class="handle">{ handle() }</div>
+            <div className="name">{ profile?.name }</div>
-        </div>
+            <div className="handle">{ handle() }</div>
-        { (select || setItem || clearItem) && (
-          <div class="switch">
-            <Switch checked={state.selected} onChange={(flag, ev) => onSelect(ev)} size="small" />
           </div>
-        )}
+          { (select || setItem || clearItem) && (
-        { state.markup && (
+            <div className="switch">
-          <Tooltip placement="left" title="channel host">
+              <Switch checked={state.selected} onChange={(flag, ev) => onSelect(ev)} size="small" />
-            <Markup />
+            </div>
-          </Tooltip>
+          )}
-        )}
+          { state.markup && (
-      </div>
+            <Tooltip placement="left" title="channel host">
+              <Markup />
+            </Tooltip>
+          )}
+        </div>
+      )}
     </SelectItemWrapper>
   );
 }

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]);
 

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: <span style={state.menuStyle}>{state.strings.confirmTopic}</span>,
+      content: <span style={state.menuStyle}>{state.strings.sureTopic}</span>,
       icon: <ExclamationCircleOutlined />,
-      bodyStyle: { padding: 16 },
+      bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
-      okText: "Yes, Delete",
+      okText: state.strings.remove,
-      cancelText: "No, Cancel",
+      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: <span style={state.menuStyle}>{state.strings.confirmLeave}</span>,
+      content: <span style={state.menuStyle}>{state.strings.sureLeave}</span>,
       icon: <ExclamationCircleOutlined />,
-      bodyStyle: { padding: 16 },
+      bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
-      okText: "Yes, Leave",
+      okText: state.strings.leave,
-      cancelText: "No, Cancel",
+      cancelText: state.strings.cancel,
       onOk() {
         applyLeaveChannel();
       },
@@ -228,9 +230,8 @@ export function Details({ closeDetails, closeConversation, openContact }) {
         <EditSubject subject={state.editSubject} cancelSubject={actions.clearEditSubject} saveSubject={saveSubject} setSubject={actions.setSubjectUpdate}
             strings={state.strings} />
       </Modal>
-      <Modal title="Edit Members" centered visible={state.showEditMembers} footer={editMembersFooter}
+      <Modal centered visible={state.showEditMembers} closable={false} footer={null} bodyStyle={{borderRadius: 8, padding: 16, ...state.menuStyle}}>
-          bodyStyle={{ padding: 16 }} onCancel={actions.clearEditMembers}>
+        <EditMembers members={state.editMembers} setMember={setMember} clearMember={clearMember} onClose={actions.clearEditMembers} strings={state.strings} />
-        <EditMembers members={state.editMembers} setMember={setMember} clearMember={clearMember} />
       </Modal>
     </DetailsWrapper>
   );

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 (
     <EditMembersWrapper>
-      <div class="list">
+      <div className="title">Edit Membership</div>
+
+      <div className="list">
         <CardSelect
           setItem={setMember}
           clearItem={clearMember}
@@ -13,6 +16,9 @@ export function EditMembers({ members, setMember, clearMember }) {
           filter={(card) => card?.data?.cardDetail?.status === 'connected'}
         />
       </div>
+      <div className="controls">
+        <Button key="back" onClick={onClose}>{strings.close}</Button>
+      </div>
     </EditMembersWrapper>
   );
 }

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%;
+  }
 `