change toast message display to markdown

FarmBot · Feb 16, 2022 · 039b0c3 · 039b0c3
1 parent cce39f3
commit 039b0c3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/api_docs.md.erb b/api_docs.md.erb
@@ -5,7 +5,7 @@
 <% end %>
 <% if (request.has_params? || request.has_body?) %>
 <% if request.display_body.length > 4 %>
-### Request
+**Request**
 
 ```
 <%=
@@ -14,7 +14,7 @@
 ```
 <% end %>
 <% end %>
-### Response
+**Response**
 
 ```
 <%=

diff --git a/frontend/css/toastr.scss b/frontend/css/toastr.scss
@@ -58,6 +58,11 @@
     .toast-title,
     .toast-message {
       color: $dark_gray;
+      .markdown {
+        * {
+          color: $dark_gray;
+        }
+      }
     }
   }
   &.green,
@@ -69,6 +74,11 @@
     .toast-title,
     .toast-message {
       color: $off_white;
+      .markdown {
+        * {
+          color: $off_white;
+        }
+      }
     }
   }
 }
@@ -83,6 +93,14 @@
 .toast-message {
   pointer-events: none;
   font-size: 1.3rem;
+  .markdown {
+    p {
+      width: unset;
+      text-overflow: unset;
+      overflow: unset;
+      white-space: unset;
+    }
+  }
 }
 
 .toast-loader {

diff --git a/frontend/os_download/content.tsx b/frontend/os_download/content.tsx
@@ -65,8 +65,8 @@ const PLATFORM_DATA = (): PlatformContent[] => [
       imageUrl: RPI4().imageUrl,
       releaseTag: RPI4().releaseTag,
       kits: [
-        "Genesis v1.6.1 (red cable)",
-        "Genesis XL v1.6.1 (red cable)",
+        "Genesis v1.6.1 (white cable)",
+        "Genesis XL v1.6.1 (white cable)",
       ],
     }]
     : []),

diff --git a/frontend/toast/fb_toast.tsx b/frontend/toast/fb_toast.tsx
@@ -3,6 +3,7 @@ import { isUndefined } from "lodash";
 import { Actions } from "../constants";
 import { ToastProps, ToastsProps, ToastState } from "./interfaces";
 import { store } from "../redux/store";
+import { Markdown } from "../ui";
 
 export class Toast extends React.Component<ToastProps, ToastState> {
   state: ToastState = {
@@ -66,7 +67,9 @@ export class Toast extends React.Component<ToastProps, ToastState> {
       onMouseLeave={() => this.setState({ isHovered: false })}>
       <h4 className={"toast-title"}>{this.props.title}</h4>
       <div className={"toast-message"}>
-        {this.props.message.replace(/\s+/g, " ")}
+        <Markdown>
+          {this.props.message.replace(/\s+/g, " ")}
+        </Markdown>
       </div>
       <div className={"toast-loader"}>
         <div className={`toast-loader-left ${color}`} style={style}></div>