From f1cd244cb7aaaef72a512ea066a18491638d5f72 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 18:38:10 +0100
Subject: [PATCH] refactor: extract gradient into common class

---
 src/element/Nip05.css | 38 +++++++++++---------------------------
 src/element/Nip05.js  |  2 +-
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index 7e04b863..6a9250f6 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -16,52 +16,36 @@
     font-weight: bold;
 }
 
-.nip05 .domain[data-domain="snort.social"] {
-    background: var(--snort-gradient);
+.nip05 .text-gradient {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
+    background-color: var(--gray-superlight);
+}
+
+.nip05 .domain[data-domain="snort.social"] {
+    background-image: var(--snort-gradient);
 }
 
 .nip05 .domain[data-domain="nostrplebs.com"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostrpurple.com"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostr.fan"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostrich.zone"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .domain[data-domain="nostriches.net"] {
-    background: var(--nostrplebs-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+    background-image: var(--nostrplebs-gradient);
 }
 
 .nip05 .badge {
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index f7700474..65245dec 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -39,7 +39,7 @@ const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => {
     return (
        <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
          {!isDefaultUser && <div className="nick">{name}</div>}
-         <div className="domain" data-domain={isVerified ? domain : ''}>
+         <div className={`domain ${isVerified ? 'text-gradient' : ''}`} data-domain={isVerified ? domain : ''}>
              {domain}
          </div>
          <span className="badge">