translated detail component

net/web/src/constants/Strings.js

@@ -168,6 +168,14 @@ export const en = {
   sureTopic: 'Are you sure you want to delete this topic?',
   confirmLeave: 'Leaving Topic',
   sureLeave: 'Are you sure you want to leave this topic?',
+
+  details: 'Details',
+  host: 'Host',
+  guest: 'Guest',
+  editSubject: 'Edit Subject',
+  editMembership: 'Edit Membership', 
+  deleteTopic: 'Delete Topic',
+  leaveTopic: 'Leave Topic',
 };
 
 export const fr = {
@@ -340,5 +348,13 @@ export const fr = {
   sureTopic: 'Êtes-Vous Sûr de Vouloir Supprimer ce Sujet?',
   confirmLeave: 'Quitter le Suject',
   sureLeave: 'Êtes-Vous Sûr de Vouloir Quitter ce Sujet?',
+
+  details: 'Détails',
+  host: 'Hôte',
+  guest: 'Invité',
+  editSubject: 'Modifier le Sujet',
+  editMembership: 'Modifier Membres du Suject',
+  deleteTopic: 'Supprimer le Sujet',
+  leaveTopic: 'Quitter le Suject',
 };
 

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

@@ -131,7 +131,7 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     <DetailsWrapper>
       { modalContext }
       <div className="header">
-        <div className="label">Topic Details</div>
+        <div className="label">{state.strings.details}</div>
         { state.display === 'xlarge' && (
           <div className="dismiss" onClick={closeConversation}>
             <CloseOutlined />
@@ -187,10 +187,10 @@ export function Details({ closeDetails, closeConversation, openContact }) {
               </div>
             )}
             { !state.host && (
-              <div className="host">host</div>
+              <div className="host">{ state.strings.host }</div>
             )}
             { state.host && (
-              <div className="host">guest</div>
+              <div className="host">{ state.strings.guest }</div>
             )}
             <div className="created">{ state.started }</div>
           </div>
@@ -199,23 +199,23 @@ export function Details({ closeDetails, closeConversation, openContact }) {
           <div className="label">{ state.strings.actions }</div>
           <div className="controls">
             { !state.host && (
-              <Tooltip placement="top" title="Delete Topic">
+              <Tooltip placement="top" title={state.strings.deleteTopic}>
                 <Button className="button" type="primary" icon={<DeleteOutlined />} size="medium"  onClick={deleteChannel}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { !state.host && !state.sealed && (
-              <Tooltip placement="top" title="Edit Membership">
+              <Tooltip placement="top" title={state.strings.editMembership}>
                 <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">
+              <Tooltip placement="top" title={state.strings.leaveTopic}>
                 <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="label">{state.strings.members}</div>
         <div className="members">
           <CardSelect filter={(item) => {
             if(state.members.includes(item.id)) {

net/web/src/session/details/editMembers/EditMembers.jsx

@@ -6,7 +6,7 @@ export function EditMembers({ members, setMember, clearMember, onClose, strings
 
   return (
     <EditMembersWrapper>
-      <div className="title">Edit Membership</div>
+      <div className="title">{strings.editMembership}</div>
 
       <div className="list">
         <CardSelect

net/web/src/session/details/editSubject/EditSubject.jsx

@@ -5,9 +5,9 @@ export function EditSubject({ subject, setSubject, saveSubject, cancelSubject, s
 
   return (
     <EditSubjectWrapper>
-      <div className="title">Edit Subject</div>
+      <div className="title">{strings.editSubject}</div>
 
-      <Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word"
+      <Input placeholder={strings.subjectOptional} spellCheck="false" autocapitalize="word"
           value={subject} onChange={(e) => setSubject(e.target.value)} />
 
       <div className="controls">

net/web/src/session/details/editSubject/EditSubject.styled.js

@@ -18,5 +18,17 @@ export const EditSubjectWrapper = styled.div`
     justify-content: flex-end;
     gap: 16px;
     padding-top: 16px;
+    width: 100%;
+  }
+
+  input {
+    padding-left: 8px;
+    background-color: ${props => props.theme.inputArea};
+    border: 1px solid ${props => props.theme.sectionBorder};
+    color: ${props => props.theme.mainText};
+  }
+
+  input::placeholder {
+    color: ${props => props.theme.placeholderText};
   }
 `

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

@@ -89,10 +89,20 @@ export function useDetails() {
     const date = new Date(channelValue?.data?.channelDetail?.created * 1000);
     const now = new Date();
     if(now.getTime() - date.getTime() < 86400000) {
-      started = date.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'});
+      if (settings.state.timeFormat === '12h') {
+        started = date.toLocaleTimeString("en-US", {hour: 'numeric', minute:'2-digit'});
+      }
+      else {
+        started = date.toLocaleTimeString("en-GB", {hour: 'numeric', minute:'2-digit'});
+      }
     }
     else {
-      started = date.toLocaleDateString("en-US");
+      if (settings.state.dateFormat === 'mm/dd') {
+        started = date.toLocaleDateString("en-US");
+      }
+      else {
+        started = date.toLocaleDateString("en-GB");
+      }
     }
     if (cardValue) {
       host = cardValue.id;

todo

@@ -1,13 +1,3 @@
-
-details:
-  - dark style
-  - translation
-  - action hints
-  - delete modal
-  - members modal
-  - leave modal
-  - subject modal
-
 calling:
   - dark style
   - translation