From 6628c204b5def84bb1ef7f36017344e567919cc9 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 25 Oct 2024 11:05:29 +0200
Subject: [PATCH] ui: autodetect us datetime format for search

---
 .../shared/DateRangeDropdown/DateRangePopup.tsx   | 15 ++++++++-------
 .../shared/DateRangeDropdown/ReactCalendar.css    |  4 ++++
 .../DateRangeDropdown/dateRangePopup.module.css   |  2 +-
 .../shared/SelectDateRange/SelectDateRange.tsx    |  7 ++++---
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/shared/DateRangeDropdown/DateRangePopup.tsx b/frontend/app/components/shared/DateRangeDropdown/DateRangePopup.tsx
index e47a0aedc..e7663a785 100644
--- a/frontend/app/components/shared/DateRangeDropdown/DateRangePopup.tsx
+++ b/frontend/app/components/shared/DateRangeDropdown/DateRangePopup.tsx
@@ -53,6 +53,7 @@ function DateRangePopup(props: any) {
   };
 
   const { onCancel } = props;
+  const isUSLocale = navigator.language === 'en-US' || navigator.language.startsWith('en-US');
   const rangeForDisplay = [range.start!.startOf('day').ts, range.end!.startOf('day').ts]
   return (
     <div className={styles.wrapper}>
@@ -70,7 +71,7 @@ function DateRangePopup(props: any) {
               </div>
             ))}
         </div>
-        <div className="flex justify-center h-fit dateRangeContainer">
+        <div className="flex justify-center h-fit w-full items-center dateRangeContainer">
           <DateRangePicker
             name="dateRangePicker"
             // onSelect={this.selectCustomRange} -> onChange
@@ -89,24 +90,24 @@ function DateRangePopup(props: any) {
       <div className="flex items-center justify-between py-2 px-3">
         <div className="flex items-center gap-2">
           <label>From: </label>
-          <span>{range.start.toFormat("dd/MM")} </span>
+          <span>{range.start.toFormat(isUSLocale ? "MM/dd" : "dd/MM")} </span>
           <TimePicker
-            format={"HH:mm"}
+            format={isUSLocale ? 'hh:mm a' : "HH:mm"}
             value={range.start}
-            className="w-24"
             onChange={setRangeTimeStart}
             needConfirm={false}
             showNow={false}
+            style={{ width: isUSLocale ? 102 : 76 }}
           />
           <label>To: </label>
-          <span>{range.end.toFormat("dd/MM")} </span>
+          <span>{range.end.toFormat(isUSLocale ? "MM/dd" : "dd/MM")} </span>
           <TimePicker
-            format={"HH:mm"}
+            format={isUSLocale ? 'hh:mm a' : "HH:mm"}
             value={range.end}
             onChange={setRangeTimeEnd}
-            className="w-24"
             needConfirm={false}
             showNow={false}
+            style={{ width: isUSLocale ? 102 : 76 }}
           />
         </div>
         <div className="flex items-center">
diff --git a/frontend/app/components/shared/DateRangeDropdown/ReactCalendar.css b/frontend/app/components/shared/DateRangeDropdown/ReactCalendar.css
index c36b28ea6..9a85ae892 100644
--- a/frontend/app/components/shared/DateRangeDropdown/ReactCalendar.css
+++ b/frontend/app/components/shared/DateRangeDropdown/ReactCalendar.css
@@ -152,4 +152,8 @@
 
 .react-calendar--selectRange .react-calendar__tile--hover {
     background-color: #e6e6e6;
+}
+
+.ant-picker-input > input:focus {
+    border: 0!important;
 }
\ No newline at end of file
diff --git a/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css b/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css
index 154d056bf..cfbe348b8 100644
--- a/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css
+++ b/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.module.css
@@ -11,7 +11,7 @@
 }
 
 .preSelections {
-    width: 130px;
+    min-width: 112px;
     background-color: white;
     border-right: solid thin #EEE;
     & > div {
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index 42bb062f7..cf7a8f819 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -55,7 +55,8 @@ function SelectDateRange(props: Props) {
   };
 
   const isCustomRange = period.rangeName === CUSTOM_RANGE;
-  const customRange = isCustomRange ? period.rangeFormatted() : '';
+  const isUSLocale = navigator.language === 'en-US' || navigator.language.startsWith('en-US');
+  const customRange = isCustomRange ? period.rangeFormatted(isUSLocale ? "MMM dd yyyy, hh:mm a" : "MMM dd yyyy, HH:mm") : '';
 
   if (props.isAnt) {
     const menuProps = {
@@ -106,7 +107,7 @@ function SelectDateRange(props: Props) {
             <div
               className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
               style={{
-                width: '520px',
+                width: isUSLocale ? '542px' : '500px',
                 fontSize: '14px',
                 textAlign: 'left',
               }}
@@ -164,7 +165,7 @@ function SelectDateRange(props: Props) {
           <div
             className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
             style={{
-              width: '520px',
+              width: isUSLocale ? '542px' : '520px',
               fontSize: '14px',
               textAlign: 'left'
             }}