From e641e4505afa4e7c36b4cd5be13aed58c098ecc4 Mon Sep 17 00:00:00 2001
From: "Leomotors (Ubuntu)" <59821765+Leomotors@users.noreply.github.com>
Date: Tue, 5 Oct 2021 20:54:36 +0700
Subject: [PATCH] Release Preview

---
 package.json                  |  2 +-
 src/App.tsx                   |  4 ++--
 src/components/FormModal.scss |  5 +++++
 src/components/FormModal.tsx  | 15 +++++++++++++--
 4 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FormModal.scss

diff --git a/package.json b/package.json
index 2bf58dc..60d44f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "food-waste-quotes",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": true,
   "scripts": {
     "dev": "yarn inc && yarn config-pkg && vite --port $PORT",
diff --git a/src/App.tsx b/src/App.tsx
index 586d4c5..979c24b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,14 @@ import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import Home from "./views/Home";
 import Admin from "./views/Admin";
 
-import { Version } from "./config";
+import { Version, BuildTime } from "./config";
 
 export default function App() {
   return (
     <Router>
       <div className="App">
         <div className="navbar bg-primary px-4">
-          <div className="brand">
+          <div className="brand" title={`Built at ${BuildTime}`}>
             <Link to="/" className="navbar-brand fs-2">
               Food Waste Quotes
             </Link>
diff --git a/src/components/FormModal.scss b/src/components/FormModal.scss
new file mode 100644
index 0000000..cd82a81
--- /dev/null
+++ b/src/components/FormModal.scss
@@ -0,0 +1,5 @@
+.example {
+  background-color: #f6f8fa;
+  padding: 0.3em 0.6em;
+  border-radius: 0.3em;
+}
diff --git a/src/components/FormModal.tsx b/src/components/FormModal.tsx
index 37a490f..67f07da 100644
--- a/src/components/FormModal.tsx
+++ b/src/components/FormModal.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { Modal } from "react-bootstrap";
 
+import "./FormModal.scss";
+
 export default function FormModal({
   show,
   onHide,
@@ -20,7 +22,16 @@ export default function FormModal({
         <p className="fw-bolder h3">Add Quote</p>
       </Modal.Header>
       <Modal.Body>
-        <p>Add your Quote here</p>
+        <p className="fw-bold h5">Example</p>
+        <p className="example">
+          Methane Produced by this Meal equals to a dog's fart of __PARAM__
+          days!
+        </p>
+        <p className="text-muted fst-italic">
+          __PARAM__ will be replaced by 'count' proportional to amount of food
+          left
+        </p>
+        <hr />
         <label className="form-label fw-bold">Quote</label>
         <textarea
           className="form-control"
@@ -45,7 +56,7 @@ export default function FormModal({
           Cancel
         </button>
         <button
-          className="btn btn-primary"
+          className="btn btn-success"
           onClick={() => {
             onHide();
             onSubmit(quote, lang, count);