♻️(react) use nano Button inside DatePicker

Based on the last QA it appears that we were using wrong button size
and icon size ratio. By using the newly created nano size we can make
the code much simpler.

packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx

@@ -153,7 +153,9 @@ const DatePickerAux = forwardRef(
                   size="small"
                   className="c__date-picker__wrapper__toggle"
                   onClick={pickerState.toggle}
-                  icon={<span className="material-icons">calendar_today</span>}
+                  icon={
+                    <span className="material-icons icon">calendar_today</span>
+                  }
                   disabled={disabled}
                 />
               </div>
@@ -165,7 +167,7 @@ const DatePickerAux = forwardRef(
                     labelAsPlaceholder || disabled,
                 })}
                 color="tertiary"
-                size="small"
+                size="nano"
                 icon={<span className="material-icons">cancel</span>}
                 onClick={onClear}
                 aria-label={t(

packages/react/src/components/Forms/DatePicker/index.scss

@@ -30,6 +30,12 @@
       display: flex;
       align-items: center;
     }
+
+    &__toggle {
+      .icon {
+        font-size: var(--c--components--button--medium-icon-font-size);
+      }
+    }
   }
 
   &__inner {
@@ -68,26 +74,13 @@
     }
 
     &__action {
-      display: flex;
-      align-items: center;
-      height: auto;
-
-      &.c__button--small.c__button--icon-only {
-        width: fit-content;
-        height: fit-content;
-        margin: 1.65rem 0 0 0;
-      }
+      flex-shrink: 0;
+      margin-top: 1.375rem;
 
       &--empty {
         color: var(--c--components--forms-field--color);
       }
 
-      .material-icons {
-        font-size: 1rem;
-        position: relative;
-        top: 0.06rem;
-      }
-
       &--hidden {
         visibility: hidden;
         transition: none;