From 0b4e7da468b15b5845fca9ece00d1797a50d29dc Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 3 Mar 2024 22:56:39 -0800
Subject: [PATCH] translated detail component

---
 net/web/src/constants/Strings.js                 | 16 ++++++++++++++++
 net/web/src/session/details/Details.jsx          | 14 +++++++-------
 .../session/details/editMembers/EditMembers.jsx  |  2 +-
 .../session/details/editSubject/EditSubject.jsx  |  4 ++--
 .../details/editSubject/EditSubject.styled.js    | 12 ++++++++++++
 net/web/src/session/details/useDetails.hook.js   | 14 ++++++++++++--
 todo                                             | 10 ----------
 7 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js
index 89cb385c..4ce586e2 100644
--- a/net/web/src/constants/Strings.js
+++ b/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',
 };
 
diff --git a/net/web/src/session/details/Details.jsx b/net/web/src/session/details/Details.jsx
index dc28d9f3..af7e27f4 100644
--- a/net/web/src/session/details/Details.jsx
+++ b/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)) {
diff --git a/net/web/src/session/details/editMembers/EditMembers.jsx b/net/web/src/session/details/editMembers/EditMembers.jsx
index 725f1f78..42c46b75 100644
--- a/net/web/src/session/details/editMembers/EditMembers.jsx
+++ b/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
diff --git a/net/web/src/session/details/editSubject/EditSubject.jsx b/net/web/src/session/details/editSubject/EditSubject.jsx
index 48ef16a5..7ed63d66 100644
--- a/net/web/src/session/details/editSubject/EditSubject.jsx
+++ b/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">
diff --git a/net/web/src/session/details/editSubject/EditSubject.styled.js b/net/web/src/session/details/editSubject/EditSubject.styled.js
index 4e8e6c5c..7a29a7ba 100644
--- a/net/web/src/session/details/editSubject/EditSubject.styled.js
+++ b/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};
   }
 `
diff --git a/net/web/src/session/details/useDetails.hook.js b/net/web/src/session/details/useDetails.hook.js
index cf66b66a..7b90f5e7 100644
--- a/net/web/src/session/details/useDetails.hook.js
+++ b/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;
diff --git a/todo b/todo
index faaffa32..1960b49d 100644
--- a/todo
+++ b/todo
@@ -1,13 +1,3 @@
-
-details:
-  - dark style
-  - translation
-  - action hints
-  - delete modal
-  - members modal
-  - leave modal
-  - subject modal
-
 calling:
   - dark style
   - translation