From df8b61672dd07fe2b2154e2edc4422b19fe73e0b Mon Sep 17 00:00:00 2001
From: rahulbile <rahul.rmcet@gmail.com>
Date: Sun, 8 Nov 2020 17:03:17 +0530
Subject: [PATCH] feat(ui): add 24 hour clock format setting [#3600]

---
 config/default.js                             |  1 +
 .../Settings/SettingsFieldsGeneral.js         | 24 +++++++++++++++++++
 renderer/components/Settings/messages.js      |  4 ++++
 3 files changed, 29 insertions(+)

diff --git a/config/default.js b/config/default.js
index bdda23acda4..548baf6419e 100644
--- a/config/default.js
+++ b/config/default.js
@@ -20,6 +20,7 @@ module.exports = {
   theme: 'dark',
   currency: 'USD',
   locale: 'en',
+  timeDisplayMode: '12Hour',
 
   autoupdate: {
     active: true,
diff --git a/renderer/components/Settings/SettingsFieldsGeneral.js b/renderer/components/Settings/SettingsFieldsGeneral.js
index 83af5d48873..6fe78c7e3fc 100644
--- a/renderer/components/Settings/SettingsFieldsGeneral.js
+++ b/renderer/components/Settings/SettingsFieldsGeneral.js
@@ -26,6 +26,15 @@ const themeMessageMapper = key => {
   return filters[key]
 }
 
+const displayModeItems = [{ key: '12Hour' }, { key: '24hour' }]
+const displayModeMessageMapper = key => {
+  const filters = {
+    '12Hour': messages.timeDisplayMode_option_12hour,
+    '24hour': messages.timeDisplayMode_option_24hour,
+  }
+  return filters[key]
+}
+
 const SettingsFieldsGeneral = ({ currentConfig }) => {
   return (
     <>
@@ -72,6 +81,21 @@ const SettingsFieldsGeneral = ({ currentConfig }) => {
 
       <Bar variant="light" />
 
+      <DataRow
+        left={<FieldLabel itemKey="timeDisplayMode" />}
+        right={
+          <Select
+            field="timeDisplayMode"
+            highlightOnValid={false}
+            initialValue={currentConfig.timeDisplayMode}
+            items={displayModeItems}
+            messageMapper={displayModeMessageMapper}
+          />
+        }
+      />
+
+      <Bar variant="light" />
+
       <DataRow
         left={<FieldLabel itemKey="autoupdate.active" />}
         right={<Toggle field="autoupdate.active" initialValue={currentConfig.autoupdate.active} />}
diff --git a/renderer/components/Settings/messages.js b/renderer/components/Settings/messages.js
index f545a5c3725..4a300a689e0 100644
--- a/renderer/components/Settings/messages.js
+++ b/renderer/components/Settings/messages.js
@@ -63,4 +63,8 @@ export default defineMessages({
   payments_maxParts_label: 'Payment parts',
   payments_maxParts_description:
     'Maximum number of partial payments that may be used to send a payment.',
+  timeDisplayMode_label: 'Time display mode clock',
+  timeDisplayMode_description: 'Your preferred time display mode.',
+  timeDisplayMode_option_12hour: '12 Hour',
+  timeDisplayMode_option_24hour: '24 Hour',
 })