Style the broadcast message form

app/assets/stylesheets/framework/forms.scss

@@ -78,6 +78,10 @@ label {
   padding: 8px $gl-padding;
 }
 
+.form-control-inline {
+  display: inline;
+}
+
 .wiki-content {
   margin-top: 35px;
 }

app/views/admin/broadcast_messages/index.html.haml

 - page_title "Broadcast Messages"
+
 %h3.page-title
   Broadcast Messages
 %p.light
-  Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.
+  Broadcast messages are displayed for every user and can be used to notify
+  users about scheduled maintenance, recent upgrades and more.
+
 .broadcast-message-preview
-  %i.fa.fa-bullhorn
+  = icon('bullhorn')
   %span Your message here
 
 = form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-requires-input'} do |f|
@@ -21,7 +24,7 @@
   .form-group.js-toggle-colors-container.hide
     = f.label :color, "Background Color", class: 'control-label'
     .col-sm-10
-      = f.color_field :color, value: "#eb9532", class: "form-control"
+      = f.color_field :color, value: "#E75E40", class: "form-control"
   .form-group.js-toggle-colors-container.hide
     = f.label :font, "Font Color", class: 'control-label'
     .col-sm-10
@@ -29,11 +32,11 @@
   .form-group
     = f.label :starts_at, class: 'control-label'
     .col-sm-10.datetime-controls
-      = f.datetime_select :starts_at
+      = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
   .form-group
     = f.label :ends_at, class: 'control-label'
     .col-sm-10.datetime-controls
-      = f.datetime_select :ends_at
+      = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline'
   .form-actions
     = f.submit "Add broadcast message", class: "btn btn-create"
 

app/views/layouts/_broadcast.html.haml

 - if broadcast_message.present?
   .broadcast-message{ style: broadcast_styling(broadcast_message) }
-    %i.fa.fa-bullhorn
+    = icon('bullhorn')
     = broadcast_message.message