From c6bda331b842b4aa4d425d5b51114f490f1a45fe Mon Sep 17 00:00:00 2001
From: Maciej Witowski <maciej.witowski@protocol.ai>
Date: Fri, 28 Apr 2023 17:01:33 +0200
Subject: [PATCH] Make lotus-fountain UI slightly friendlier

CSS generated by ChatGTP
---
 cmd/lotus-fountain/site/funds.html |  2 +-
 cmd/lotus-fountain/site/index.html |  4 +--
 cmd/lotus-fountain/site/main.css   | 58 +++++++++++++++++++++---------
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/cmd/lotus-fountain/site/funds.html b/cmd/lotus-fountain/site/funds.html
index c6916239f..ae7a4041b 100644
--- a/cmd/lotus-fountain/site/funds.html
+++ b/cmd/lotus-fountain/site/funds.html
@@ -15,7 +15,7 @@
 <div class="Index">
     <div class="Index-nodes">
         <div class="Index-node">
-            [SENDING FUNDS]
+            SENDING FUNDS
         </div>
         <div class="Index-node">
             <form action='/send' method='post' id='funds-form'>
diff --git a/cmd/lotus-fountain/site/index.html b/cmd/lotus-fountain/site/index.html
index 644960225..74e553afe 100644
--- a/cmd/lotus-fountain/site/index.html
+++ b/cmd/lotus-fountain/site/index.html
@@ -8,10 +8,10 @@
 <div class="Index">
     <div class="Index-nodes">
         <div class="Index-node">
-            [LOTUS DEVNET FAUCET]
+            LOTUS DEVNET FAUCET
         </div>
         <div class="Index-node">
-            <a href="funds.html">[Send Funds]</a>
+            <a href="funds.html">Send Funds</a>
         </div>
     </div>
     <div class="Index-footer">
diff --git a/cmd/lotus-fountain/site/main.css b/cmd/lotus-fountain/site/main.css
index bcdb24c2e..e2670d123 100644
--- a/cmd/lotus-fountain/site/main.css
+++ b/cmd/lotus-fountain/site/main.css
@@ -1,7 +1,6 @@
 body {
-    font-family: 'monospace';
-    background: #1f1f1f;
-    color: #f0f0f0;
+    font-family: 'Helvetica Neue', sans-serif;
+    background-color: #f0f0f0;
     padding: 0;
     margin: 0;
 }
@@ -9,21 +8,22 @@ body {
 .Index {
     width: 100vw;
     height: 100vh;
-    background: #1a1a1a;
-    color: #f0f0f0;
-    font-family: monospace;
+    background-color: #f0f0f0;
+    color: #333;
+    font-family: 'Helvetica Neue', sans-serif;
 
     display: grid;
     grid-template-columns: auto 40vw auto;
     grid-template-rows: auto auto auto 3em;
     grid-template-areas:
-            ". . . ."
-            ". main main ."
-            ". . . ."
-            "footer footer footer footer";
+    ". . . ."
+    ". main main ."
+    ". . . ."
+    "footer footer footer footer";
 }
+
 .Index-footer {
-    background: #2a2a2a;
+    background-color: #333;
     grid-area: footer;
 }
 
@@ -34,23 +34,49 @@ body {
 
 .Index-nodes {
     grid-area: main;
-    background: #2a2a2a;
 }
 
 .Index-node {
     margin: 5px;
     padding: 15px;
-    background: #1f1f1f;
+    background-color: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+span {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+}
+
+button {
+    background-color: #4c9aff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 1.2em;
+}
+
+button:hover {
+    background-color: #555;
 }
 
 a:link {
-    color: #50f020;
+    color: #333;
 }
 
 a:visited {
-    color: #50f020;
+    color: #333;
 }
 
 a:hover {
-    color: #30a00a;
+    color: #555;
 }