Add experimental info message

Author: rnijveld

nts-pool-management/assets/components.css

@@ -57,7 +57,8 @@ a.btn {
 
 highlight-actions {
     display: flex;
-    justify-content: center;
+    justify-content: start;
+    margin-bottom: var(--space-md);
 
     & > * {
         margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;
@@ -113,7 +114,7 @@ section > p {
     margin-bottom: var(--space-sm);
 }
 
-section.contained {
+.contained {
     max-width: 80ch;
 }
 
@@ -253,6 +254,12 @@ dialog .dialog-actions {
     border-color: var(--error)
 }
 
+.info {
+    color: color-mix(in lab, var(--info), var(--black) 50%);
+    background-color: color-mix(in lab, var(--info), var(--white) 70%);
+    border-color: var(--info)
+}
+
 details.toast > summary,
 aside {
     padding: var(--space-sm) var(--space-md);
@@ -321,3 +328,7 @@ table {
         background-color: var(--white);
     }
 }
+
+.nowrap {
+    white-space: nowrap;
+}

nts-pool-management/assets/main.css

@@ -15,6 +15,7 @@ header {
   background-color: var(--background-alt);
   padding: var(--space-md) var(--space-md);
   display: flex;
+  flex-wrap: wrap;
   width: 100vw;
   flex: 0;
 }
@@ -67,7 +68,7 @@ nav {
       border-bottom: 4px solid var(--primary);
     }
   }
-  
+
   li {
     list-style: none;
   }

nts-pool-management/assets/variables.css

@@ -13,6 +13,7 @@
   --black: #000000;
   --error: #ce4242;
   --success: #74ce42;
+  --info: #99b6d5;
   --link: #0a57f0;
 
   /* spacing */

nts-pool-management/templates/layout.html.j2

@@ -47,7 +47,9 @@
         </div>
       </nav>
       <header>
+
         {% block header %}{% endblock %}
+
       </header>
       {% if let Some((msg_type, msg)) = app.flash_message %}
         <details class="toast {{ msg_type }}" open>
@@ -57,6 +59,12 @@
         </details>
       {% endif %}
       <main>
+      <aside class="info experimental contained">
+          The NTS pool is experimental. Please help us by leaving your feedback and reporting problems
+          at <a href="https://github.com/pendulum-project/nts-pool/discussions">our discussion forum</a>,
+          <a href="https://github.com/pendulum-project/nts-pool/issues">our issue tracker</a>, or via
+          <a href="mailto:[email protected]" class="nowrap">[email protected]</a>.
+        </aside>
         {% block content %}{% endblock %}
       </main>
       <footer>