Fix time picker styling

Author: Nathan Reyes

src/components/TimePicker.vue

@@ -195,7 +195,7 @@ export default {
   padding: 8px;
   &.vc-invalid {
     pointer-events: none;
-    opacity: 50%;
+    opacity: 0.5;
   }
   &:not(:first-child) {
     border-top: 1px solid var(--gray-400);
@@ -256,6 +256,7 @@ export default {
     font-size: var(--text-sm);
     font-weight: var(--font-medium);
     padding: 0 4px;
+    background: transparent;
     border: 2px solid transparent;
     border-radius: var(--rounded);
     line-height: var(--leading-snug);

src/components/TimeSelect.vue

@@ -36,6 +36,7 @@ export default {
     appearance: none;
     width: 52px;
     height: 30px;
+    font-size: var(--text-base);
     font-weight: var(--font-medium);
     text-align: left;
     background-color: var(--gray-200);