[form-builder] Hack date picker to make it a bit less ugly

sanity-io · Oct 6, 2020 · aec5299 · aec5299
1 parent 4c602ce
commit aec5299
Showing 1 changed file with 68 additions and 9 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/DateInputs/styles/BaseDateTimeInput.css b/packages/@sanity/form-builder/src/inputs/DateInputs/styles/BaseDateTimeInput.css
@@ -134,32 +134,91 @@
   border: 0;
 
   @nest & :global(.react-datepicker__current-month) {
-    color: var(--main-navigation-color--inverted);
+    display: none;
   }
 
   @nest & :global(.react-datepicker__header) {
-    background-color: var(--main-navigation-color);
-    color: var(--main-navigation-color--inverted);
+    background-color: transparent;
+    color: var(--main-navigation-color);
     border: 0;
     border-top-right-radius: 0 !important;
   }
 
+  @nest & :global(.react-datepicker__navigation) {
+    border: 1px solid var(--gray);
+    transform: rotate(45deg);
+    height: 8px;
+    width: 8px;
+    margin-top: 8px;
+  }
+
+  @nest & :global(.react-datepicker__navigation--previous) {
+    border-width: 0 0 1px 1px;
+    margin-left: 4px;
+  }
+
+  @nest & :global(.react-datepicker__navigation--next) {
+    border-width: 1px 1px 0 0;
+    margin-right: 4px;
+  }
+
+  @nest & :global(.react-datepicker__month-select) {
+    font-weight: 600;
+  }
+
+  @nest & :global(.react-datepicker__year-select) {
+    font-weight: 600;
+  }
+
+  @nest & :global(.react-datepicker__day-names) {
+    border-bottom: 1px solid var(--hairline-color);
+    font-weight: 600;
+  }
+
+  @nest & :global(.react-datepicker__day--selected) {
+    border-radius: 50%;
+  }
+
+  @nest & :global(.react-datepicker__day--keyboard-selected) {
+    border-radius: 50%;
+    background: var(--brand-primary);
+  }
+
+  @nest & :global(.react-datepicker__day:hover) {
+    border-radius: 50%;
+  }
+
+  @nest & :global(.react-datepicker__today-button) {
+    background: transparent;
+    border-top: 1px solid var(--hairline-color);
+  }
+
   @nest & :global(.react-datepicker-time__header) {
-    color: var(--main-navigation-color--inverted);
+    color: var(--main-navigation-color);
+    background: transparent;
+    font-size: 0.8rem;
   }
 
   @nest & :global(.react-datepicker__time-container) {
-    border-color: var(--main-navigation-color);
+    border-color: var(--gray-lighter);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  @nest & :global(.react-datepicker__time-list-item--selected) {
+    background: var(--brand-primary) !important;
   }
 
   @nest & :global(.react-datepicker__header--time), & :global(.react-datepicker__time-container) {
-    background-color: var(--main-navigation-color);
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: var(--border-radius-base) !important;
+    background-color: var(--main-navigation-color--inverted);
+  }
+
+  @nest & :global(.react-datepicker__header--time) {
+    border-bottom:  1px solid var(--hairline-color);
+    background: transparent;
   }
 
   @nest & :global(.react-datepicker__day-name) {
-    color: var(--main-navigation-color--inverted);
+    color: var(--main-navigation-color);
   }
 
   @nest & :global(.react-datepicker__day--selected) {