added ui-message shortcode

CONTRIBUTING.md

@@ -352,6 +352,29 @@ The following case insensitive values are supported:
 - organizations, orgs
 - configuration, config
 
+### InfluxDB UI notification messages
+In some cases, documentation references a notification message that appears in
+the top-right corner of the InfluxDB UI.
+Rather than taking a screenshot of the message (that can be hard to maintain over time),
+use the `{{< ui-message >}}` shortcode.
+
+It expects two parameters:
+
+**`text`** (Required)  
+The message displayed.
+
+**`color`** (Optional)  
+Sets the background color and icons used in the message.
+The following options are available:
+
+- green _(default)_
+- blue
+- red
+
+```
+{{< ui-message color="green" text="The message displayed in the notification.">}}
+```
+
 ### Reference content
 The InfluxDB documentation is "task-based," meaning content primarily focuses on
 what a user is **doing**, not what they are **using**.

assets/styles/layouts/_ui-messages.scss

@@ -0,0 +1,48 @@
+.article--content {
+  .ui-message {
+    max-width: 350px;
+    margin: 1rem 0 2rem;
+    padding: .85rem 2.75rem;
+    font-size: .85rem;
+    border-radius: 5px;
+    position: relative;
+    color: $g20-white;
+
+    &:before {
+      font-family: 'icomoon';
+      display: block;
+      position: absolute;
+      left: 14px;
+      top: 17px;
+      font-size: 1.1rem;
+    }
+
+    &:after {
+      content: "\e932";
+      font-family: 'icomoon';
+      display: block;
+      position: absolute;
+      right: 14px;
+      top: 18px;
+      font-size: 1.1rem;
+      opacity: .25;
+    }
+
+    &.green {
+      background: linear-gradient(to right, #4dd7a1, #21adf5);
+      &:before { content: "\e922"; }
+    }
+
+    &.blue {
+      background: linear-gradient(to right, #22adf6, #4591ed);
+      &:before { content: "\e935"; }
+    }
+
+    &.red {
+      background: linear-gradient(to right, #e8695c, #7669e8);
+      &:before { content: "\e920"; }
+    }
+
+
+  }
+}

assets/styles/styles-default.scss

@@ -17,6 +17,7 @@
         "layouts/layout-content-wrapper",
         "layouts/layout-article",
         "layouts/inline-icons",
+        "layouts/ui-messages",
         "layouts/syntax-highlighting",
         "layouts/algolia-search-overrides",
         "layouts/layout-landing",

content/v2.0/collect-data/quick-start.md

@@ -29,7 +29,7 @@ It stores the scraped metrics in the bucket created during the [initial setup pr
 
 The following message briefly appears in the UI:
 
-{{< img-hd src="/img/2-0-quickstart-confirmation.png" />}}
+{{< ui-message text="The InfluxDB scraper has been configured for http://localhost:9999/metrics" >}}
 
 {{% note %}}
 Quick Start is available only in the last step of the setup process.

layouts/shortcodes/ui-message.html

@@ -0,0 +1,6 @@
+{{ $text := .Get "text" }}
+{{ $color := .Get "color" | default "green" }}
+
+<div class="ui-message {{ $color }}">
+ <strong>{{ $text }}</strong>
+</div>