ui: Date Picker Styles (#2542)

* Date Picker Styles

* style popup changes

---------

Co-authored-by: nick-delirium <nikita@openreplay.com>

frontend/app/components/shared/DateRangeDropdown/DateRangePopup.js

@@ -65,7 +65,7 @@ export default class DateRangePopup extends React.PureComponent {
 
     return (
       <div className={styles.wrapper}>
-        <div className={styles.body}>
+        <div className={`${styles.body} h-fit`}>
           <div className={styles.preSelections}>
             {dateRangeValues
               .filter(
@@ -79,19 +79,21 @@ export default class DateRangePopup extends React.PureComponent {
                 </div>
               ))}
           </div>
-          <DateRangePicker
-            name="dateRangePicker"
-            // onSelect={this.selectCustomRange} -> onChange
-            // numberOfCalendars={2}
-            // selectionType="range"
-            // maximumDate={new Date()}
-            // singleDateRange={true}
-            onChange={this.selectCustomRange}
-            shouldCloseCalendar={() => false}
-            isOpen
-            maxDate={new Date()}
-            value={rangeForDisplay}
-          />
+          <div className='flex justify-center h-fit dateRangeContainer'>
+            <DateRangePicker
+              name="dateRangePicker"
+              // onSelect={this.selectCustomRange} -> onChange
+              // numberOfCalendars={2}
+              // selectionType="range"
+              // maximumDate={new Date()}
+              // singleDateRange={true}
+              onChange={this.selectCustomRange}
+              shouldCloseCalendar={() => false}
+              isOpen
+              maxDate={new Date()}
+              value={rangeForDisplay}
+            />
+          </div>
         </div>
         <div className="flex items-center justify-between py-2 px-3">
           <div className="flex items-center gap-2">

frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx

@@ -89,7 +89,8 @@ function SelectDateRange(props: Props) {
           <OutsideClickDetectingDiv
             onClickOutside={(e: any) => {
               if (
-                e.target.parentElement.parentElement.classList.contains(
+                e.target.className.includes('react-calendar')
+                || e.target.parentElement.parentElement.classList.contains(
                   'rc-time-picker-panel-select'
                 ) ||
                 e.target.parentElement.parentElement.classList[0]?.includes(
@@ -115,6 +116,7 @@ function SelectDateRange(props: Props) {
                 onApply={onApplyDateRange}
                 onCancel={() => setIsCustom(false)}
                 selectedDateRange={period.range}
+                className='h-fit'
               />
             </div>
           </OutsideClickDetectingDiv>

frontend/app/styles/main.css

@@ -343,4 +343,39 @@ svg {
 .react-daterange-picker__calendar {
     position: relative!important;
     inset: 0!important;
-}
+}
+
+.dateRangeContainer .react-calendar{
+    border: none;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.dateRangeContainer  .react-calendar__tile--active{
+    background-color: rgba(57, 77, 254,.7);
+}
+
+.dateRangeContainer .react-calendar__tile--hasActive, .dateRangeContainer .react-calendar__tile--active:hover, .dateRangeContainer .react-calendar__tile--active:enabled:hover, .dateRangeContainer .react-calendar__tile--active:enabled:focus, .dateRangeContainer  .react-calendar__tile--hasActive:enabled:hover, .dateRangeContainer  .react-calendar__tile--hasActive:enabled:focus{
+    background-color: #394dfe;
+    color: #FFF;
+}
+
+.dateRangeContainer .react-calendar__tile--hasActive:hover{
+    background-color: #394dfe;
+    cursor: default;
+}
+
+.dateRangeContainer  .react-calendar button{
+    border: 1px solid #fff;
+    border-radius: .5rem;
+}
+
+.dateRangeContainer abbr{
+    text-decoration: none;
+}
+
+.dateRangeContainer  textarea:focus, .dateRangeContainer  input:not(.ant-input-number-input, .ant-input, .nofocus):focus{
+    border:none;
+}
+
+  

spot/entrypoints/background.ts

@@ -820,6 +820,7 @@ export default defineBackground(() => {
                     return r.json();
                   } else {
                     if (r.status === 401) {
+                      setJWTToken("");
                       throw new Error(
                         "Not authorized or no permissions to create Spot",
                       );