From 88e7e6e6cb0684114e1a681e9e3a510d26bb6beb Mon Sep 17 00:00:00 2001
From: Fynn Feldpausch <fynn.feldpausch@coyoapp.com>
Date: Thu, 28 Mar 2024 10:19:43 +0100
Subject: [PATCH] chore: some minor cleanup in the datepicker

---
 core/src/components/cat-date/cat-date.scss |  6 +++++-
 core/src/components/cat-date/cat-date.tsx  | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/core/src/components/cat-date/cat-date.scss b/core/src/components/cat-date/cat-date.scss
index 543c43af..a7754c9f 100644
--- a/core/src/components/cat-date/cat-date.scss
+++ b/core/src/components/cat-date/cat-date.scss
@@ -90,14 +90,18 @@
   display: flex;
   gap: 1rem;
   align-items: center;
-  justify-content: space-between;
 }
 
 .cursor-help {
+  flex: 1;
   margin: 0;
   @include cat-body('s');
   color: cat-token('color.ui.font.muted') !important;
   text-align: center;
+
+  &.cursor-right {
+    text-align: right;
+  }
 }
 
 .cursor-aria {
diff --git a/core/src/components/cat-date/cat-date.tsx b/core/src/components/cat-date/cat-date.tsx
index 888d5899..fab8d070 100644
--- a/core/src/components/cat-date/cat-date.tsx
+++ b/core/src/components/cat-date/cat-date.tsx
@@ -447,15 +447,19 @@ export class CatDate {
                 </div>
               </div>
               <div class="picker-foot">
-                <cat-button
-                  size="s"
-                  disabled={!this.canClick(this.now)}
-                  data-dropdown-no-close
-                  onClick={() => this.select(this.now)}
+                {this.canClick(this.now) && (
+                  <cat-button size="s" data-dropdown-no-close onClick={() => this.select(this.now)}>
+                    {this.locale.today}
+                  </cat-button>
+                )}
+                <p
+                  class={{
+                    'cursor-help': true,
+                    'cursor-right': this.canClick(this.now)
+                  }}
                 >
-                  {this.locale.today}
-                </cat-button>
-                <p class="cursor-help">{this.locale.arrowKeys}</p>
+                  {this.locale.arrowKeys}
+                </p>
                 <p class="cursor-aria" aria-live="polite"></p>
               </div>
             </div>