UX: Fix local-dates styling (#12085)

Renames the new `relative-time` component to `relative-time-picker` to
avoid CSS class conflict with local-dates.

app/assets/javascripts/discourse/app/components/relative-time-picker.js

@@ -39,10 +39,10 @@ export default Component.extend({
   @discourseComputed
   intervals() {
     return [
-      { id: "mins", name: I18n.t("relative_time.minutes") },
-      { id: "hours", name: I18n.t("relative_time.hours") },
-      { id: "days", name: I18n.t("relative_time.days") },
-      { id: "months", name: I18n.t("relative_time.months") },
+      { id: "mins", name: I18n.t("relative_time_picker.minutes") },
+      { id: "hours", name: I18n.t("relative_time_picker.hours") },
+      { id: "days", name: I18n.t("relative_time_picker.days") },
+      { id: "months", name: I18n.t("relative_time_picker.months") },
     ];
   },
 

app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs

@@ -24,7 +24,7 @@
   {{#if useDuration}}
     <div class="controls">
       <label class="control-label">Duration</label>
-      {{relative-time onChange=(action "durationChanged") durationMinutes=(readonly topicTimer.duration_minutes)}}
+      {{relative-time-picker onChange=(action "durationChanged") durationMinutes=(readonly topicTimer.duration_minutes)}}
     </div>
   {{/if}}
   {{#if willCloseImmediately}}

app/assets/javascripts/discourse/app/templates/components/relative-time-picker.hbs

@@ -1,4 +1,4 @@
-<div class="relative-time">
+<div class="relative-time-picker">
   {{input class="relative-time-duration" min="0.1" step="0.01" type="number" value=duration onChange=(action "onChangeDuration")}}
   {{combo-box
     content=intervals

app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs

@@ -29,7 +29,7 @@
     {{#if option.isRelativeTimeShortcut}}
       {{#if relativeTimeSelected}}
         <div class="control-group custom-date-time-wrap">
-          {{relative-time onChange=(action "relativeTimeChanged")}}
+          {{relative-time-picker onChange=(action "relativeTimeChanged")}}
         </div>
       {{/if}}
     {{/if}}

app/assets/stylesheets/common/components/_index.scss

@@ -17,7 +17,7 @@
 @import "ignored-user-list";
 @import "keyboard_shortcuts";
 @import "navs";
-@import "relative-time";
+@import "relative-time-picker";
 @import "share-and-invite-modal";
 @import "svg";
 @import "tap-tile";

app/assets/stylesheets/common/components/relative-time-picker.scss

@@ -1,4 +1,4 @@
-.relative-time {
+.relative-time-picker {
   display: flex;
   flex-wrap: wrap;
 

config/locales/client.en.yml

@@ -575,7 +575,7 @@ en:
         title: "Why are you rejecting this user?"
         send_email: "Send rejection email"
 
-    relative_time:
+    relative_time_picker:
       minutes: "minute(s)"
       hours: "hour(s)"
       days: "day(s)"