From 7beee3538c298bbe6385c9f481334c04878822c6 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Wed, 25 Jan 2023 22:41:01 +0100
Subject: [PATCH] fix: nip05 domains

---
 src/Element/Nip05.css        | 40 +++++++++++++++++++++++++++++-------
 src/Element/Nip05.tsx        |  4 ++--
 src/Element/ProfileImage.css |  4 ++--
 src/Element/ProfileImage.tsx |  2 +-
 src/Pages/ProfilePage.tsx    |  4 ++--
 src/index.css                |  1 +
 6 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/Element/Nip05.css b/src/Element/Nip05.css
index 866e62a8..d9d6f0ec 100644
--- a/src/Element/Nip05.css
+++ b/src/Element/Nip05.css
@@ -1,18 +1,44 @@
 .nip05 {
-    justify-content: flex-start;
-    align-items: center;
-    margin: .2em;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .nip05.failed {
-    text-decoration: line-through;
+  text-decoration: line-through;
 }
 
 .nip05 .nick {
-    color: var(--font-secondary-color);
-    font-weight: bold;
+  color: var(--font-secondary-color);
+  font-weight: bold;
+}
+
+.nip05 .domain {
+  color: var(--gray-light);
+  font-weight: bold;
+  margin-left: .2em;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+  background-color: var(--gray-light);
+}
+
+.nip05 .domain[data-domain="snort.social"] {
+  background-image: var(--nostrplebs-gradient);
+}
+
+.nip05 .domain[data-domain="nostrplebs.com"] {
+  background-image: var(--nostrplebs-gradient);
+}
+
+.nip05 .domain[data-domain="nostrpurple.com"] {
+  background-image: var(--nostrplebs-gradient);
+}
+
+.nip05 .domain[data-domain="nostr.fan"] {
+  background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .badge {
-     margin: .1em .2em;
+   margin: .1em .2em;
 }
diff --git a/src/Element/Nip05.tsx b/src/Element/Nip05.tsx
index ef508137..0d4ac65a 100644
--- a/src/Element/Nip05.tsx
+++ b/src/Element/Nip05.tsx
@@ -60,10 +60,10 @@ const Nip05 = (props: Nip05Params) => {
     <div className={`flex nip05${couldNotVerify ? " failed" : ""}`} onClick={(ev) => ev.stopPropagation()}>
       {!isDefaultUser && (
         <div className="nick">
-          `@${name}`}
+          {`@${name}`}
         </div>
       )}
-      <span className="domain">
+      <span className="domain" data-domain={domain?.toLowerCase()}>
         {domain}
       </span>
       <span className="badge">
diff --git a/src/Element/ProfileImage.css b/src/Element/ProfileImage.css
index 718f9342..65ff650e 100644
--- a/src/Element/ProfileImage.css
+++ b/src/Element/ProfileImage.css
@@ -24,8 +24,8 @@
 
 .pfp .username {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   font-weight: bold;
 }
 
diff --git a/src/Element/ProfileImage.tsx b/src/Element/ProfileImage.tsx
index 32412aa8..542e6d6d 100644
--- a/src/Element/ProfileImage.tsx
+++ b/src/Element/ProfileImage.tsx
@@ -35,8 +35,8 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
                 <div className="username">
                   <Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
                     {name}
+                    {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                   </Link>
-                  {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                 </div>
                 <div className="subheader">
                   {subHeader}
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index d92101fa..c84ddd61 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -106,10 +106,10 @@ export default function ProfilePage() {
             case ProfileTab.Follows: {
                 if (isMe) {
                     return (
-                        <>
+                        <div className="main-content">
                             <h4>Following {follows.length}</h4>
                             {follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)}
-                        </>
+                        </div>
                     );
                 } else {
                     return <FollowsList pubkey={id} />;
diff --git a/src/index.css b/src/index.css
index e0153880..526ea45b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,6 +25,7 @@
   --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
   --snort-gradient: linear-gradient(180deg, #FFC7B7 0%, #4F1B73 100%);
   --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
+  --snort-text-gradient: linear-gradient(to bottom right, #8B5CF6, #0284C7);
   --strike-army-gradient: linear-gradient(to bottom right, #CCFF00, #a1c900);
 }