From f1f4c335e9ab3bbda3a81ccca80e8d1ede926060 Mon Sep 17 00:00:00 2001
From: Shiba <44804845+DeepDoge@users.noreply.github.com>
Date: Sat, 30 Apr 2022 12:49:14 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20New=20UI=20and=20Madiator=20Find?=
 =?UTF-8?q?er=20Features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/popup/popup.css | 85 +++++++++++++++------------------------------
 src/popup/popup.tsx | 33 +++++++++++-------
 2 files changed, 49 insertions(+), 69 deletions(-)

diff --git a/src/popup/popup.css b/src/popup/popup.css
index 2089cb9..a26fbe9 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -52,11 +52,29 @@ p {
 
 header {
     display: grid;
+    gap: .5em;
+    padding: .75em;
     position: sticky;
     top: 0;
-    justify-content: end;
-    background: rgba(19, 19, 19, 0.95);
-    padding: .5em .2em;
+    background: rgba(19, 19, 19, 0.5);
+}
+
+main {
+    display: grid;
+    gap: 2em;
+    padding: 1.5em 0.5em;
+}
+
+section {
+    display: grid;
+    justify-items: center;
+    gap: .75em;
+}
+
+#popup {
+    width: 35em;
+    max-width: 100%;
+    overflow: hidden;
 }
 
 .button {
@@ -105,10 +123,13 @@ header {
     font-size: 1.5em;
 }
 
-.popup {
-    width: 35em;
-    max-width: 100%;
-    overflow: hidden;
+.options {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
+    justify-content: center;
+    gap: .25em;
+    padding: 0 1.5em;
 }
 
 .overlay {
@@ -126,54 +147,4 @@ header {
     inset: 0;
     background-color: #0e1117;
     opacity: .75;
-}
-
-.profile {
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    gap: .25em;
-    font-size: 1.5em;
-}
-
-.profile .name {
-    display: inline-flex;
-    gap: .5em;
-    place-items: center;
-    max-width: min(10em, 100%);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: bold;
-    color: currentColor;
-}
-
-.profile .name::before {
-    content: '';
-    display: inline-block;
-    width: 1ch;
-    aspect-ratio: 1/1;
-    background: var(--color-gradient-0);
-    border-radius: 100000%;
-}
-
-main {
-    display: grid;
-    gap: 2em;
-    padding: 1.5em 0.5em;
-}
-
-section {
-    display: grid;
-    justify-items: center;
-    gap: .75em;
-}
-
-.options {
-    display: grid;
-    width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
-    justify-content: center;
-    gap: .25em;
-    padding: 0 1.5em;
 }
\ No newline at end of file
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 9357fab..ebe8f92 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -31,23 +31,32 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
     }
   }
 
-  return <div className='popup'>
-    <header>
-      <div className='profile'>
-        {publicKey
-          ? <span><b>Using As:</b> <a onClick={() => updateRoute('profile')} className='name link'>{nickname}</a></span>
-          : <a className='button filled' onClick={() => updateRoute('profile')} href="#profile">Your Profile</a>}
-      </div>
-    </header>
+  return <div id='popup'>
+
+    {
+      publicKey
+        ? <header>
+          <section>
+            <label>{nickname}</label>
+            <p>{friendlyPublicKey(publicKey)}</p>
+            <span><b>Score: {params.profile?.score ?? '...'}</b> - <a target='_blank' href="https://finder.madiator.com/leaderboard" class="filled">🔗Leaderboard</a></span>
+          </section>
+          <section>
+            {
+              popupRoute === 'profile'
+                ? <a onClick={() => updateRoute('')} className="button filled">⇐ Back</a>
+                : <a className='button filled' onClick={() => updateRoute('profile')} href="#profile">Profile Settings</a>
+            }
+          </section>
+        </header>
+        : <header><a className='button filled' onClick={() => updateRoute('profile')} href="#profile">Your Profile</a>
+        </header>
+    }
     {
       popupRoute === 'profile' ?
         publicKey ?
           <main>
-            <a onClick={() => updateRoute('')} className="go-back link">⇐ Back</a>
             <section>
-              <label>{nickname}</label>
-              <p>{friendlyPublicKey(publicKey)}</p>
-              <span><b>Score: {params.profile?.score ?? '...'}</b> - <a target='_blank' href="https://finder.madiator.com/leaderboard" class="filled">🔗Leaderboard</a></span>
               <div className='options'>
                 <a onClick={() => startAsyncOperation(generateProfileAndSetNickname()).then(() => renderPopup())} className={`button active`}>
                   Change Nickname