fix: nip05 domains

src/Element/Nip05.css

@@ -1,7 +1,6 @@
 .nip05 {
   justify-content: flex-start;
   align-items: center;
-    margin: .2em;
 }
 
 .nip05.failed {
@@ -13,6 +12,33 @@
   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;
 }

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">

src/Element/ProfileImage.css

@@ -24,8 +24,8 @@
 
 .pfp .username {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   font-weight: bold;
 }
 

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}
-                  </Link>
                     {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
+                  </Link>
                 </div>
                 <div className="subheader">
                   {subHeader}

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} />;

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);
 }