Merge pull request #1533 from metabase/pulse_cleanup

pulse visual cleanup

frontend/src/css/pulse.css

@@ -7,7 +7,7 @@
 }
 
 .PulseEdit-content {
-    max-width: 450px;
+    max-width: 510px;
     margin-left: 180px;
 }
 
@@ -38,6 +38,10 @@
   border-color: rgb(97,167,229) !important;
 }
 
+.PulseListItem button {
+  font-family: "Lato", Helvetica, sans-serif;
+}
+
 .bg-grey-0 {
   background-color: rgb(252,252,253);
 }
@@ -53,6 +57,7 @@
 
 .DangerZone:hover {
   border-color: var(--error-color);
+  transition: border .3s ease-in;
 }
 
 .DangerZone .Button--danger {

frontend/src/pulse/components/PulseEdit.jsx

@@ -123,14 +123,14 @@ export default class PulseEdit extends Component {
                         </ModalContent>
                     </ModalWithTrigger>
                 </div>
-                <div className="PulseEdit-content pt2">
+                <div className="PulseEdit-content pt2 pb4">
                     <PulseEditName {...this.props} setPulse={this.setPulse} />
                     <PulseEditCards {...this.props} setPulse={this.setPulse} />
                     <PulseEditChannels {...this.props} setPulse={this.setPulse} />
                     { pulse && pulse.id != null &&
-                        <div className="DangerZone mb2 p2 rounded bordered relative">
+                        <div className="DangerZone mb2 p3 rounded bordered relative">
                             <h3 className="text-error absolute top bg-white px1" style={{ marginTop: "-12px" }}>Danger Zone</h3>
-                            <div className="">
+                            <div className="ml1">
                                 <h4 className="text-bold mb1">Delete this pulse</h4>
                                 <div className="flex">
                                     <p className="h4 pr2">Stop delivery and delete this pulse. There's no undo, so be careful.</p>

frontend/src/pulse/components/PulseListChannel.jsx

@@ -87,7 +87,7 @@ export default class PulseListChannel extends Component {
                         { subscribed ?
                             <button className="rounded bg-green text-white text-bold flex align-center">
                                 <span className="pl2">You get this {channel.channel_type}</span>
-                                <Icon className="p2 text-grey-1 text-hover-white cursor-pointer" name="close" width={12} height={12} onClick={this.unsubscribe}/>
+                                <Icon className="p2 text-grey-1 text-white-hover cursor-pointer" name="close" width={12} height={12} onClick={this.unsubscribe}/>
                             </button>
                         :
                             <button className="rounded bordered bg-white text-default text-bold flex align-center cursor-pointer" onClick={this.subscribe}>

frontend/src/pulse/components/SchedulePicker.jsx

@@ -62,7 +62,7 @@ export default class SchedulePicker extends Component {
             <div className="mt1">
                 <span className="h4 text-bold mr1">at</span>
                 <Select
-                    className="mr1"
+                    className="mr1 bg-white"
                     value={_.find(HOUR_OPTIONS, (o) => o.value === hour)}
                     options={HOUR_OPTIONS}
                     optionNameFn={o => o.name}
@@ -75,6 +75,7 @@ export default class SchedulePicker extends Component {
                     optionNameFn={o => o.name}
                     optionValueFn={o => o.value}
                     onChange={(o) => this.props.onPropertyChange("schedule_hour", hour + o * 12) }
+                    className="bg-white"
                 />
                 <div className="mt2 h4 text-bold text-grey-3">
                     {CHANNEL_NOUN_PLURAL[cs && cs.type] || "Messages"} will be sent at {hour === 0 ? 12 : hour}:00 {amPm ? "PM" : "AM"} {timezone}, your Metabase timezone.
@@ -89,7 +90,7 @@ export default class SchedulePicker extends Component {
             <div className="mt1">
                 <span className="h4 text-bold mr1">Sent</span>
                 <Select
-                    className="h4 text-bold"
+                    className="h4 text-bold bg-white"
                     value={channel.schedule_type}
                     options={channelSpec.schedules}
                     optionNameFn={o => capitalize(o)}