Merge pull request #83 from factchain/polish-create-note

polish create note page
factchain · Feb 23, 2024 · 4d66438 · 4d66438
2 parents c00d39f + e9f24e6
commit 4d66438
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 47 deletions.
diff --git a/fc-community-extension/src/pages/createNote.js b/fc-community-extension/src/pages/createNote.js
@@ -3,7 +3,7 @@ import { createSignal, Switch, Match } from 'solid-js';
 import { createFactchainProvider, makeTransactionCall } from '../utils/web3';
 import { logger } from '../utils/logging';
 import { cutText, makeTransactionUrl } from '../utils/constants';
-import { FCHero, FCLoader } from './components';
+import { FCHero, FCLoaderClean } from './components';
 
 import './style.css';
 
@@ -32,55 +32,77 @@ export function FCCreateNote({ postUrl, createNote }) {
     <div>
       <FCHero />
 
-      <h1>Create New Factchain Note</h1>
-      <div>
-        <div style="font-size: 120%">
-          Provide additional context for{' '}
-          <a className="link" href={postUrl}>
-            {cutText(postUrl, 35)}
-          </a>
-        </div>
-        <div>
-          <textarea
-            id="content"
-            disabled={transactionHash() || submitting()}
-            rows="10"
-            cols="60"
-            maxlength="500"
-          ></textarea>
-        </div>
-        <Switch>
-          <Match when={transactionHash()}>
-            <div>
-              <div style="margin-top: 50px; margin-bottom: 20px; font-size: 150%; text-align: center; position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
-                Your note was successfully submitted!
+      <div className="max-w-[400px] mx-auto px-4 py-3">
+        <h1 className="text-2xl font-semibold text-center mb-4">
+          {'Create Factchain Note'}
+        </h1>
+        <div className="space-y-4">
+          <div className="truncate w-fulla text-fcAccent">
+            <a
+              className="link"
+              target="_blank"
+              rel="noopener noreferrer"
+              href={postUrl}
+            >
+              {postUrl}
+            </a>
+          </div>
+          <div>
+            <textarea
+              autoFocus
+              id="content"
+              className="w-full h-[150px] rounded p-4 text-fcGrey"
+              placeholder="Add context to this post. Explain the evidence behind your choices and provide links to outside sources."
+              disabled={transactionHash() || submitting()}
+              maxlength="500"
+            />
+          </div>
+          <Switch>
+            <Match when={transactionHash()}>
+              <div>
+                <div className="py-4 text-center text-xl">
+                  {'Your note was successfully submitted!'}
+                </div>
+                <div className="mt-2 text-center">
+                  View transaction on{' '}
+                  <a
+                    className="link"
+                    href={makeTransactionUrl(transactionHash())}
+                    target="_blank"
+                  >
+                    {'etherscan'}
+                  </a>
+                  .
+                </div>
               </div>
-              <div style="margin-bottom: 10px; font-size: 90%; text-align: center; position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
-                View transaction on{' '}
-                <a
-                  className="link"
-                  href={makeTransactionUrl(transactionHash())}
-                  target="_blank"
-                >
-                  etherscan
-                </a>
-                .
+              <button
+                className="btn p-4 w-full text-lg font-semibold"
+                onclick={() => window.close()}
+              >
+                {'Close'}
+              </button>
+            </Match>
+            <Match when={submitting()}>
+              <div className="flex justify-center">
+                <FCLoaderClean />
               </div>
-            </div>
-          </Match>
-          <Match when={submitting()}>
-            <div>
-              <FCLoader />
-            </div>
-          </Match>
-          <Match when={true}>
-            <div>
-              <button onclick={submit}>Submit note</button>
-            </div>
-          </Match>
-        </Switch>
+            </Match>
+            <Match when={true}>
+              {error() && (
+                <div className="mb-4 bg-red-400/10 text-red-500 font-mono text-base p-4 rounded break-words">
+                  Error: {JSON.stringify(error())}
+                </div>
+              )}
+              <button
+                className="btn p-4 w-full text-lg font-semibold"
+                onclick={submit}
+              >
+                {'Submit note'}
+              </button>
+            </Match>
+          </Switch>
+        </div>
       </div>
-      {error() ? <div>Error: {JSON.stringify(error())}</div> : <div></div>}
     </div>
   );
 }

diff --git a/fc-community-extension/src/pages/rateNotes.js b/fc-community-extension/src/pages/rateNotes.js
@@ -95,6 +95,12 @@ function FCRateNote({ note, rateNote }) {
                 </a>
                 .
               </div>
+              <button
+                className="btn p-4 w-full text-lg font-semibold mt-4"
+                onclick={() => window.close()}
+              >
+                {'Close'}
+              </button>
             </div>
           </Match>
           <Match when={submitting()}>