styling details component

net/web/src/constants/Strings.js

@@ -16,6 +16,7 @@ export const en = {
   unsetSealing: 'Unset Sealing Key',
   newTopic: 'New Topic', 
 
+  noContacts: 'No Contacts',
   noTopics: 'No Topics',
   noConnected: 'No Connected Contacts',
   subjectOptional: 'Subject (optional)',
@@ -160,6 +161,8 @@ export const en = {
   fontColor: 'Change Font Color',
   fontSize: 'Change Font Size',
   postMessage: 'Post Message',
+
+  leave: 'Leave',
 };
 
 export const fr = {
@@ -180,6 +183,7 @@ export const fr = {
   unsetSealing: 'Clé de sécurité non définie',
   newTopic: 'Nouveau Sujet',
 
+  noContacts: 'Pas de Contacts',
   noTopics: 'Pas de Sujets',
   noConnected: 'Pas de Contacts Connecter',
   subjectOptional: 'Sujet (optionnel)',
@@ -324,5 +328,7 @@ export const fr = {
   fontColor: 'Changer la Couleur du Message',
   fontSize: 'Changer la Taille du Message',
   postMessage: 'Publier le Message',
+
+  leave: 'Partir',
 };
 

net/web/src/session/cards/Cards.jsx

@@ -77,7 +77,7 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
             )} />
         )}
         { state.cards.length === 0 && (
-          <div className="empty">No Contacts</div>
+          <div className="empty">{ state.strings.noContacts }</div>
         )}
       </div>
     </CardsWrapper>

net/web/src/session/contact/Contact.jsx

@@ -120,7 +120,7 @@ export function Contact({ close, guid, listing }) {
               </Tooltip>
             )}
             { state.status === 'connecting' && (
-              <Tooltip placement="top" title="Cancel Request">
+              <Tooltip placement="top" title={state.strings.cancelRequest}>
                 <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}

net/web/src/session/details/Details.jsx

@@ -1,9 +1,9 @@
-import { Button, Modal } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
 import { DetailsWrapper, ModalFooter } from './Details.styled';
-import { DoubleRightOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
 import { useDetails } from './useDetails.hook';
 import { Logo } from 'logo/Logo';
-import { EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { EditOutlined, CloseCircleOutlined, UserSwitchOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { CardSelect } from '../cardSelect/CardSelect';
 import { EditSubject } from './editSubject/EditSubject';
 import { EditMembers } from './editMembers/EditMembers';
@@ -128,32 +128,27 @@ export function Details({ closeDetails, closeConversation, openContact }) {
   return (
     <DetailsWrapper>
       { modalContext }
-      <div class="header">
+      <div className="header">
-        <div class="label">Topic Details</div>
+        <div className="label">Topic Details</div>
         { state.display === 'xlarge' && (
-          <div class="dismiss" onClick={closeConversation}>
+          <div className="dismiss" onClick={closeConversation}>
-            <DoubleRightOutlined />
-          </div>
-        )}
-        { state.display === 'small' && (
-          <div class="dismiss" onClick={closeDetails}>
             <CloseOutlined />
           </div>
         )}
-        { state.display !== 'small' && state.display !== 'xlarge' && (
+        { state.display === 'small' && (
-          <div class="dismiss" onClick={closeDetails}>
+          <div className="dismiss" onClick={closeDetails}>
-            <RightOutlined />
+            <CloseOutlined />
           </div>
         )}
       </div>
-      <div class="content">
+      <div className="content">
-        <div class="description">
+        <div className="description">
-          <div class="logo">
+          <div className="logo">
             <Logo src={state.logo} width={72} height={72} radius={4} img={state.img} />
           </div>
-          <div class="stats">
+          <div className="stats">
             { !state.host && (
-              <div class="subject" onClick={actions.setEditSubject}>
+              <div className="subject" onClick={actions.setEditSubject}>
                 { state.sealed && !state.contentKey && (
                   <LockFilled style={{ paddingRight: 4 }} />
                 )}
@@ -167,14 +162,14 @@ export function Details({ closeDetails, closeConversation, openContact }) {
                   <span>{ state.label }</span>
                 )}
                 { (!state.sealed || state.contentKey) && (
-                  <span class="edit" onClick={actions.setEditSubject}>
+                  <span className="edit" onClick={actions.setEditSubject}>
                     <EditOutlined style={{ paddingLeft: 4 }}/>
                   </span>
                 )}
               </div>
             )}
             { state.host && (
-              <div class="subject">
+              <div className="subject">
                 { state.sealed && !state.contentKey && (
                   <LockFilled style={{ paddingRight: 4 }} />
                 )}
@@ -190,25 +185,36 @@ export function Details({ closeDetails, closeConversation, openContact }) {
               </div>
             )}
             { !state.host && (
-              <div class="host">host</div>
+              <div className="host">host</div>
             )}
             { state.host && (
-              <div class="host">guest</div>
+              <div className="host">guest</div>
             )}
-            <div class="created">{ state.started }</div>
+            <div className="created">{ state.started }</div>
           </div>
         </div>
-        { !state.host && (
+        <div className="actions">
-          <div class="button" onClick={deleteChannel}>Delete Topic</div>
+          <div className="label">{ state.strings.actions }</div>
-        )}
+          <div className="controls">
-        { !state.host && !state.sealed && (
+            { !state.host && (
-          <div class="button" onClick={actions.setEditMembers}>Edit Membership</div>
+              <Tooltip placement="top" title="Delete Topic">
-        )}
+                <Button className="button" type="primary" icon={<DeleteOutlined />} size="medium"  onClick={deleteChannel}>{ state.strings.remove }</Button>
-        { state.host && (
+              </Tooltip>
-          <div class="button" onClick={leaveChannel}>Leave Topic</div>
+            )}
-        )}
+            { !state.host && !state.sealed && (
-        <div class="label">Members</div>
+              <Tooltip placement="top" title="Edit Membership">
-        <div class="members">
+                <Button className="button" type="primary" icon={<UserSwitchOutlined />} size="medium"  onClick={actions.setEditMembers}>{state.strings.members}</Button>
+              </Tooltip>
+            )}
+            { state.host && (
+              <Tooltip placement="top" title="Leave Channel">
+                <Button className="button" type="primary" icon={<CloseCircleOutlined />} size="medium"  onClick={leaveChannel}>{state.strings.leave}</Button>
+              </Tooltip>
+            )}
+          </div>
+        </div>
+        <div className="label">Members</div>
+        <div className="members">
           <CardSelect filter={(item) => {
             if(state.members.includes(item.id)) {
               return true;

net/web/src/session/details/Details.styled.js

@@ -6,12 +6,69 @@ export const DetailsWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${Colors.statsForm};
+  background-color: ${props => props.theme.selectedArea};
+  color: ${props => props.theme.mainText};
+
+  .actions {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    padding-top: 16px;
+    flex-direction: column;
+    align-items: center;
+
+    .label {
+      padding-top: 16px;
+      border-bottom: 1px solid ${props => props.theme.sectionBorder};
+      color: ${props => props.theme.hintText};
+      font-size: 12px;
+      width: 50%;
+      max-width: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .controls {
+      padding-top: 16px;
+      padding-bottom: 16px;
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+
+      .button {
+        display: flex;
+      }
+
+      .anticon {
+        font-size: 18px;
+        padding-top: 2px;
+      }
+
+      .label {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+      }
+
+      .idle {
+        cursor: pointer;
+        opactiy: 0;
+      }
+
+      .busy {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+  }
 
   .header {
     width: 100%;
     height: 48px;
-    border-bottom: 1px solid ${Colors.statsDivider};
+    border-bottom: 1px solid ${props => props.theme.headerBorder};
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -27,7 +84,7 @@ export const DetailsWrapper = styled.div`
 
     .dismiss {
       font-size: 18px;
-      color: ${Colors.text};
+      color: ${props => props.theme.hintText};
       cursor: pointer;
     }
   }
@@ -40,14 +97,13 @@ export const DetailsWrapper = styled.div`
     flex-direction: column;
     padding-top: 32px;
     align-items: center;
-    flex-grow: 1;
     position: relative;
     min-height: 0;
 
     .label {
       padding-top: 16px;
       width: 100%;
-      border-bottom: 1px solid ${Colors.divider};
+      border-bottom: 1px solid ${props => props.theme.sectionBorder};
       padding-left: 16px;
     }
 
@@ -57,11 +113,9 @@ export const DetailsWrapper = styled.div`
     }
 
     .button {
-      width: 144px;
-      padding: 4px;
       border-radius: 4px;
-      color: ${Colors.white};
+      color: ${props => props.theme.activeText};
-      background-color: ${Colors.primary};
+      background-color: ${props => props.theme.enabledArea};
       cursor: pointer;
       margin-bottom: 8px;
       display: flex;
@@ -93,6 +147,10 @@ export const DetailsWrapper = styled.div`
           cursor: pointer;
         }
 
+        .edit:hover {
+          color: ${props => props.theme.linkText};
+        }
+
         .subject {
           font-size: 18px;
           font-weight: bold;

net/web/src/session/details/useDetails.hook.js

@@ -25,6 +25,7 @@ export function useDetails() {
     showEditSubject: false,
     editSubject: null,
 
+    strings: {},
     display: 'small',
     sealed: false,
     contentKey: null,
@@ -72,8 +73,9 @@ export function useDetails() {
   }, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);
 
   useEffect(() => {
-    updateState({ display: settings.state.display });
+    const { strings, display } = settings.state;
-  }, [settings]);
+    updateState({ strings, display });
+  }, [settings.state]);
 
   useEffect(() => {
 

net/web/src/session/listing/Listing.jsx

@@ -69,7 +69,7 @@ export function Listing({ closeListing, openContact }) {
               )} />
           )}
           { state.contacts.length === 0 && (
-            <div className="empty">No Contacts</div>
+            <div className="empty">{ state.strings.noContacts }</div>
           )}
         </div>
       </div>