From 5624e6560cf9e95dd2918ce47d75f28f5ea907f0 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 13:16:01 +0100
Subject: [PATCH] feat: add avatar borders with color gradients to partner
 nip05 providers

---
 src/element/Nip05.css     | 54 +++++++++++++++++++++++++++++++++++++--
 src/element/Nip05.js      |  3 +--
 src/index.css             |  4 ++-
 src/pages/ProfilePage.css |  8 ++++--
 src/pages/ProfilePage.js  | 15 ++++++++++-
 5 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index f80f464..5152149 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -7,13 +7,63 @@
 
 .nip05 .nick {
     color: var(--gray-light);
+    font-weight: bold;
+    margin-right: .2em;
 }
 
 .nip05 .domain {
     color: var(--gray-superlight);
+    font-weight: bold;
+}
+
+.nip05 .domain[data-domain="snort.social"] {
+    background: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrplebs.com"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrpurple.com"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostr.fan"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostrich.zone"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+}
+
+.nip05 .domain[data-domain="nostriches.net"] {
+    background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
 }
 
 .nip05 .badge {
-     margin-left: .2em;
-     margin-top: .1em;
+     margin: .1em .2em;
 }
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index 8434703..20f46bb 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -30,8 +30,7 @@ const Nip05 = ({ nip05, pubkey }) => {
     return (
        <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
          {!isDefaultUser && <div className="nick">{name}</div>}
-         <div className="domain">
-             {!isDefaultUser && '@'}
+         <div className="domain" data-domain={domain}>
              {domain}
          </div>
          <span className="badge">
diff --git a/src/index.css b/src/index.css
index 9161c16..665fa47 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,8 @@
     --gray: #333;
     --gray-secondary: #222;
     --gray-tertiary: #444;
-    --highlight: #A9E000;
+    --highlight-light: #E8FF52;
+    --highlight: #CCFF00;
     --error: #FF6053;
     --success: #2AD544;
 }
@@ -19,6 +20,7 @@
   :root {
      --font-color: #000;
      --bg-color: #FFF;
+     --highlight-light: #FFC852;
      --highlight: #FF9B00;
      --modal-bg-color: rgba(240, 240, 240, 0.8);
      --gray: #CCC;
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 4663870..2f88db9 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -23,10 +23,14 @@
 }
 
 .profile .avatar {
-    width: 256px;
+    border-radius: 50%;
     height: 256px;
+    width: 256px;
+    border: 4px solid transparent;
+    background-origin: border-box;
+    background-clip: content-box, border-box;
     background-size: cover;
-    border-radius: 100%;
+    box-sizing: border-box;
 }
 
 .profile .details {
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 1182043..7d13797 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -26,6 +26,15 @@ const ProfileTab = {
     Follows: 3
 };
 
+const gradients = {
+  "snort.social": "linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success))",
+  "nostrplebs.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
+  "nostrpurple.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
+  "nostr.fan": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
+  "nostrich.zone": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
+  "nostriches.net": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
+}
+
 export default function ProfilePage() {
     const params = useParams();
     const navigate = useNavigate();
@@ -37,6 +46,10 @@ export default function ProfilePage() {
     const [showLnQr, setShowLnQr] = useState(false);
     const [tab, setTab] = useState(ProfileTab.Notes);
     const about = extractHashtags(extractLinks([user?.about]))
+    const nip05domain = user?.nip05 && user?.nip05.split('@').slice(-1)
+    const gradient = nip05domain && gradients[nip05domain]
+    const avatarUrl = `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})`
+    const backgroundImage = gradient ? `${avatarUrl}, ${gradient}` :  avatarUrl
 
     useEffect(() => {
         setTab(ProfileTab.Notes);
@@ -106,7 +119,7 @@ export default function ProfilePage() {
         <>
             <div className="profile flex">
                 <div className="avatar-wrapper">
-                    <div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
+                    <div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
                     </div>
                 </div>
                 <div className="f-grow details">