Merge pull request #10785 from filecoin-project/maciej/fountain-ui

Make lotus-fountain UI slightly friendlier
filecoin-project · May 9, 2023 · 488b796 · 488b796
2 parents 07e5abb + c6bda33
commit 488b796
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git 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
@@ -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
@@ -1,29 +1,29 @@
 body {
-    font-family: 'monospace';
-    background: #1f1f1f;
-    color: #f0f0f0;
+    font-family: 'Helvetica Neue', sans-serif;
+    background-color: #f0f0f0;
     padding: 0;
     margin: 0;
 }
 
 .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;
 }