Merge pull request #81 from factchain/polishes

bunch of visual polishes

fc-community-extension/config/webpack.config.js

@@ -14,7 +14,7 @@ const config = (env, argv) =>
       rateNotes: PATHS.src + '/pages/rateNotes.js',
       mintXNote: PATHS.src + '/pages/mintXNote.js',
       mintFactchainNote: PATHS.src + '/pages/mintFactchainNote.js',
-      components: PATHS.src + '/pages/components.js',
+      components: PATHS.src + '/pages/components/index.js',
       defaultContentScript: PATHS.src + '/defaultContentScript.js',
       statusContentScript: PATHS.src + '/statusContentScript.js',
       subscribeContentScript: PATHS.src + '/subscribeContentScript.js',

fc-community-extension/src/pages/components/FCEmptyState.js

@@ -0,0 +1,26 @@
+const IconNotebook = ({ size, ...p }) => {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      height={size}
+      width={size}
+      {...p}
+    >
+      <path d="M4.98 4a.5.5 0 00-.39.188L1.54 8H6a.5.5 0 01.5.5 1.5 1.5 0 103 0A.5.5 0 0110 8h4.46l-3.05-3.812A.5.5 0 0011.02 4H4.98zm9.954 5H10.45a2.5 2.5 0 01-4.9 0H1.066l.32 2.562a.5.5 0 00.497.438h12.234a.5.5 0 00.496-.438L14.933 9zM3.809 3.563A1.5 1.5 0 014.981 3h6.038a1.5 1.5 0 011.172.563l3.7 4.625a.5.5 0 01.105.374l-.39 3.124A1.5 1.5 0 0114.117 13H1.883a1.5 1.5 0 01-1.489-1.314l-.39-3.124a.5.5 0 01.106-.374l3.7-4.625z" />
+    </svg>
+  );
+};
+
+const FCEmptyState = ({ text }) => {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center">
+      <div className="flex flex-col gap-4 rounded-2xl bg-neutral-950/30 items-center p-8">
+        <IconNotebook className="opacity-10" size={64} />
+        <div className="text-sm opacity-60">{text}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FCEmptyState;

fc-community-extension/src/pages/components/FCNote.js

@@ -0,0 +1,42 @@
+import { elipseText } from '../../utils/constants';
+
+const FCNote = (props) => {
+  // assuming `postUrl` looks like: https://x.com/foo/status/<id>
+  const postId = props.postUrl.split('/').slice(-1)[0];
+  return (
+    <a
+      href={props.postUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="bg-fcGrey/70 rounded-md p-2 text-xs space-y-2 shadow block hover:bg-fcGrey/90"
+    >
+      <div className="flex items-center gap-2">
+        <div className="shrink-0 w-[24px] h-[24px] rounded-full bg-pink-400/30"></div>
+        <div className="truncate">
+          <strong>{elipseText(props.creator, 10)}</strong>
+          <span className="opacity-70">{' - '}</span>
+          <span className="italic">{postId}</span>
+        </div>
+      </div>
+      <div className="flex items-start gap-2">
+        <div className="opacity-90 line-clamp-4 flex-grow">{props.content}</div>
+        <div className="shrink-0 flex flex-col gap-1 items-center">
+          <div className="w-[32px] h-[32px] bg-pink-400/30 rounded"></div>
+          <div className="flex items-center gap-1">
+            {/* TODO proper note + dynamic image based on note */}
+            <strong>{'4.9'}</strong>
+            <span>
+              <img
+                className="w-[16px] h-[16px]"
+                alt="star-awesome"
+                src="/ui/icons/star-awesome.png"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default FCNote;

fc-community-extension/src/pages/components.js → fc-community-extension/src/pages/components/index.js

@@ -25,34 +25,17 @@ export function FCContainer({ children }) {
 
 export function FCHeader({ title }) {
   return (
-    <div className="py-4 text-center relative">
+    <div className="py-4 text-center relative select-none">
       <div className="text-2xl text-fcAccent font-semibold">{title}</div>
       <div class="absolute inset-y-0 right-0 flex items-center justify-center pr-4">
-        <button className="text-fcAccent">
-          <SettingsIcon size={24} />
+        <button
+          className="text-fcAccent opacity-50"
+          disabled
+          title="Coming soon!"
+        >
+          <img src="/ui/icons/menu.png" />
         </button>
       </div>
     </div>
   );
 }
-
-// yeah baptiste i know it's not the same icon
-// as in the design but i'm out of time lol
-export function SettingsIcon({ size = 16 }) {
-  return (
-    <svg
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-      height={size}
-      width={size}
-    >
-      <path d="M20 7h-9M14 17H5" />
-      <path d="M20 17 A3 3 0 0 1 17 20 A3 3 0 0 1 14 17 A3 3 0 0 1 20 17 z" />
-      <path d="M10 7 A3 3 0 0 1 7 10 A3 3 0 0 1 4 7 A3 3 0 0 1 10 7 z" />
-    </svg>
-  );
-}

fc-community-extension/src/pages/createNote.js

@@ -36,7 +36,9 @@ export function FCCreateNote({ postUrl, createNote }) {
       <div>
         <div style="font-size: 120%">
           Provide additional context for{' '}
-          <a href={postUrl}>{cutText(postUrl, 35)}</a>
+          <a className="link" href={postUrl}>
+            {cutText(postUrl, 35)}
+          </a>
         </div>
         <div>
           <textarea
@@ -55,7 +57,11 @@ export function FCCreateNote({ postUrl, createNote }) {
               </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 href={makeTransactionUrl(transactionHash())} target="_blank">
+                <a
+                  className="link"
+                  href={makeTransactionUrl(transactionHash())}
+                  target="_blank"
+                >
                   etherscan
                 </a>
                 .

fc-community-extension/src/pages/mintFactchainNote.js

@@ -74,7 +74,7 @@ export function FCMintFactchainNote({
             </div>
             <div style="margin-bottom: 10px; font-size: 150%; text-align: center; position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
               Head over to{' '}
-              <a href={openseaUrl()} target="_blank">
+              <a className="link" href={openseaUrl()} target="_blank">
                 OpenSea
               </a>{' '}
               to buy one for yourself!
@@ -86,14 +86,18 @@ export function FCMintFactchainNote({
             </div>
             <div style="margin-bottom: 10px; font-size: 110%; text-align: center; position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
               Check it out on{' '}
-              <a href={openseaUrl()} target="_blank">
+              <a className="link" href={openseaUrl()} target="_blank">
                 OpenSea
               </a>
               .
             </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 href={makeTransactionUrl(transactionHash())} target="_blank">
+              <a
+                className="link"
+                href={makeTransactionUrl(transactionHash())}
+                target="_blank"
+              >
                 etherscan
               </a>
               .

fc-community-extension/src/pages/mintXNote.js

@@ -62,14 +62,18 @@ export function FCMintXNote({ noteUrl, content, mintXNote, contractAddress }) {
             </div>
             <div style="margin-bottom: 10px; font-size: 110%; text-align: center; position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
               Check it out on{' '}
-              <a href={openseaUrl()} target="_blank">
+              <a className="link" href={openseaUrl()} target="_blank">
                 OpenSea
               </a>
               .
             </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 href={makeTransactionUrl(transactionHash())} target="_blank">
+              <a
+                className="link"
+                href={makeTransactionUrl(transactionHash())}
+                target="_blank"
+              >
                 etherscan
               </a>
               .

fc-community-extension/src/pages/popup.js

@@ -2,12 +2,33 @@ import { render } from 'solid-js/web';
 import { createSignal, Switch, Match, createResource } from 'solid-js';
 import { createFactchainProvider } from '../utils/web3';
 import { FCHero, FCLoader, FCContainer, FCHeader } from './components';
+import FCNote from './components/FCNote';
+import FCEmptyState from './components/FCEmptyState';
 import { getNotes } from '../utils/backend';
 import { ethers } from 'ethers';
 import { cutText, elipseText } from '../utils/constants';
 
 import './style.css';
 
+const FCNetworks = () => (
+  <div className="grid grid-cols-[80px_80px_80px] gap-4 justify-center">
+    <img title="X" className="w-[80px] h-[80px]" src="/logos/x.png" />
+    <img
+      title="Warpcast"
+      className="w-[80px] h-[80px]"
+      src="/logos/warpcast.png"
+    />
+    <img
+      title="Lens protocol"
+      className="w-[80px] h-[80px]"
+      src="/logos/lens.png"
+    />
+    <div className="-mt-2 col-span-2 col-start-2 text-fcAccent text-center text-sm">
+      {'Coming soon!'}
+    </div>
+  </div>
+);
+
 function FCProfile(props) {
   function StatCard(props) {
     return (
@@ -20,8 +41,8 @@ function FCProfile(props) {
 
   return (
     <FCContainer>
-      <div className="space-y-8 min-h-full flex flex-col">
-        <div className="flex-grow space-y-8">
+      <div className="space-y-4 min-h-full flex flex-col">
+        <div className="flex-grow space-y-4">
           <div className="flex items-center w-5/6 mx-auto bg-neutral-950/30 py-2 px-4 rounded gap-4 shadow-md border border-neutral-950/40">
             <div className="rounded-full w-[40px] h-[40px] bg-neutral-400/30 shadow"></div>
             <div className="flex-grow">
@@ -31,11 +52,12 @@ function FCProfile(props) {
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-between bg-neutral-400/10 rounded-2xl px-10 py-6">
+          <div className="flex items-center justify-between bg-neutral-400/10 rounded-2xl px-10 py-6 shadow">
             <StatCard name="Notes" value={props.numberNotes} />
             <StatCard name="Ratings" value={props.numberRatings} />
             <StatCard name="Earnings" value={props.earnings} />
           </div>
+          {props.loggedIn && <FCNetworks />}
         </div>
         <button
           className="w-full p-4 font-semibold text-base btn"
@@ -50,26 +72,6 @@ function FCProfile(props) {
 
 function FCNotes(props) {
   const [notes] = createResource(() => getNotes(props.queryparams));
-
-  function FCNote({ postUrl, content, creator }) {
-    return (
-      <div
-        key={postUrl}
-        style="background-color: #393E46; padding: 10px; border-radius: 10px;"
-      >
-        <div>
-          <a href={postUrl} target="_blank">
-            {cutText(postUrl, 35)}
-          </a>
-        </div>
-        <div>{cutText(content, 115)}</div>
-        <div style="display: flex; justify-content: flex-end; font-style: italic;">
-          -- {creator}
-        </div>
-      </div>
-    );
-  }
-
   return (
     <FCContainer>
       <Switch>
@@ -82,18 +84,25 @@ function FCNotes(props) {
           </div>
         </Match>
         <Match when={notes() !== undefined}>
-          <div className="space-y-2">
-            <For each={notes()}>
-              {(note) => (
-                <FCNote
-                  key={note.postUrl}
-                  postUrl={note.postUrl}
-                  creator={note.creatorAddress}
-                  content={note.content}
-                />
-              )}
-            </For>
-          </div>
+          <Switch>
+            <Match when={notes().length > 0}>
+              <div className="space-y-4">
+                <For each={notes()}>
+                  {(note) => (
+                    <FCNote
+                      key={note.postUrl}
+                      postUrl={note.postUrl}
+                      creator={note.creatorAddress}
+                      content={note.content}
+                    />
+                  )}
+                </For>
+              </div>
+            </Match>
+            <Match when={notes().length === 0}>
+              <FCEmptyState text={props.emptyText} />
+            </Match>
+          </Switch>
         </Match>
         <Match when={true}>
           <div style="position: relative; top:50%; left: 50%; transform: translate(-50%, -50%);">
@@ -190,7 +199,7 @@ function FCPopup({ provider }) {
   provider.getAddress().then(setAddress);
 
   return (
-    <div className="h-[575px] w-[375px] flex flex-col">
+    <div className="h-[600px] w-[375px] flex flex-col">
       <Switch>
         <Match when={selectedTab() === 'Profile'}>
           <FCHero />
@@ -210,6 +219,7 @@ function FCPopup({ provider }) {
             loggedIn={loggedIn()}
             queryparams={{ creatorAddress: address() }}
             connectWallet={changeConnectionState}
+            emptyText="You don't have any notes yet."
           />
         </Match>
         <Match when={selectedTab() === 'Ratings'}>
@@ -218,6 +228,7 @@ function FCPopup({ provider }) {
             loggedIn={loggedIn()}
             queryparams={{ awaitingRatingBy: address() }}
             connectWallet={changeConnectionState}
+            emptyText="No ratings to do yet."
           />
         </Match>
       </Switch>

fc-community-extension/src/pages/rateNotes.js

@@ -60,7 +60,11 @@ function FCRateNote({ note, rateNote }) {
               </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 href={makeTransactionUrl(transactionHash())} target="_blank">
+                <a
+                  className="link"
+                  href={makeTransactionUrl(transactionHash())}
+                  target="_blank"
+                >
                   etherscan
                 </a>
                 .

fc-community-extension/src/pages/style.css

@@ -56,10 +56,7 @@ body {
   cursor: pointer;
 }
 
-a:link {
-  color: #00adb5;
-}
-a:visited {
+a.link:visited {
   color: #00adb5;
 }