UX: improves local-dates modal form UI

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -0,0 +1,131 @@
+.discourse-local-date {
+  display: inline-block;
+  vertical-align: top;
+
+  &.cooked {
+    color: $primary;
+    font-weight: bold;
+    cursor: pointer;
+
+    .d-icon-globe {
+      margin-right: .25em;
+      color: $primary-medium;
+
+      &:hover {
+        color: $primary-high;
+      }
+    }
+
+    &:hover .d-icon-globe {
+      color: $primary-high;
+    }
+  }
+
+  + .discourse-local-date {
+    margin-left: .5em;
+  }
+}
+
+.discourse-local-dates-create-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &:before, &:after {
+    content: none;
+  }
+
+  .cancel-action {
+    margin: 0 5px 5px 0;
+  }
+
+  .btn + .cancel-action {
+    margin-left: 1em;
+  }
+
+  .advanced-mode-btn {
+    margin-left: auto;
+  }
+}
+
+.discourse-local-dates-create-modal {
+  min-height: 300px;
+  display: flex;
+  flex-direction: row;
+
+  .form {
+    flex: 1;
+
+    label {
+      font-weight: 700;
+    }
+
+    .date-time-configuration {
+      display: flex;
+      align-items: center;
+
+      .date {
+        .date-input {
+          margin-right: 1em;
+
+          .date-picker {
+            padding-top: 5px;
+            bottom: 5px;
+            margin: 0;
+            width: 120px;
+            text-align: left;
+          }
+        }
+      }
+
+      .time {
+        margin-right: 1em;
+
+        .time-input {
+          margin: 0 0.5em 0 0;
+          width: 120px;
+          padding: 3.5px 10px;
+        }
+      }
+
+      .preview {
+        margin-top: 16px;
+      }
+    }
+
+    .validation-error {
+      color: $danger;
+    }
+
+    .recurrence {
+      .recurrence-input {
+        width: 300px;
+      }
+    }
+   }
+
+   .format {
+     .format-input {
+       width: 280px;
+     }
+   }
+
+   .formats {
+     list-style: none;
+     padding: 0;
+     margin: 0;
+     .format {
+       .previewed-format {
+         color: $primary-medium;
+       }
+     }
+   }
+
+   .control-group.recurrence, .control-group.format, .control-group.timezones {
+     margin-top: 1em;
+   }
+
+  .timezones-input {
+    width: 99%;
+  }
+}

plugins/discourse-local-dates/assets/stylesheets/discourse-local-dates.scss

@@ -1,83 +0,0 @@
-.discourse-local-date {
-  display: inline-block;
-  vertical-align: top;
-
-  &.cooked {
-    color: $primary;
-    font-weight: bold;
-    cursor: pointer;
-
-    .d-icon-globe {
-      margin-right: .25em;
-      color: $primary-medium;
-
-      &:hover {
-        color: $primary-high;
-      }
-    }
-
-    &:hover .d-icon-globe {
-      color: $primary-high;
-    }
-  }
-
-  + .discourse-local-date {
-    margin-left: .5em;
-  }
-}
-
-.discourse-local-dates-create-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .validation-error {
-    color: $danger;
-  }
-
-  &:before, &:after {
-    content: none;
-  }
-}
-
-.discourse-local-dates-create-modal {
-  min-height: 300px;
-  display: flex;
-  flex-direction: row;
-
-  .form {
-    flex: 1;
-    .controls {
-      &.date-time {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin-bottom: 1em;
-
-        .date {
-          margin: 0 0.5em 0 0;
-        }
-
-        .date-picker {
-          padding-top: 5px;
-          bottom: 5px;
-          margin: 0;
-        }
-
-        .time {
-          margin: 0 0.5em 0 0;
-          max-width: 100px;
-        }
-      }
-    }
-
-    .advanced-mode-btn {
-      margin-top: 2em;
-      margin-bottom: 1em;
-    }
-   }
-
-  .select-kit.multi-select {
-    width: 90%;
-  }
-}

plugins/discourse-local-dates/assets/stylesheets/mobile/discourse-local-dates.scss

@@ -0,0 +1,16 @@
+.discourse-local-dates-create-modal {
+  .form {
+    .date-time-configuration {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .date .date-input .date-picker {
+        width: 200px;
+      }
+
+      .time .time-input {
+        width: 200px;
+      }
+    }
+  }
+}