nip05 ready for light mode

src/element/Nip05.css

@@ -2,15 +2,15 @@
     justify-content: flex-start;
     align-items: center;
     font-size: 14px;
-    margin: .2em 0;
+    margin: .2em;
 }
 
 .nip05 .nick {
-    color: #999;
+    color: var(--gray-light);
 }
 
 .nip05 .domain {
-    color: #DDD;
+    color: var(--gray-superlight);
 }
 
 .nip05 .badge {

src/element/Nip05.js

@@ -37,7 +37,7 @@ const Nip05 = ({ nip05, pubkey }) => {
          {isVerified && (
            <span className="badge">
              <FontAwesomeIcon
-               color={"green"}
+               color={"var(--success)"}
                icon={faCheck}
                size="xs"
              />
@@ -46,7 +46,7 @@ const Nip05 = ({ nip05, pubkey }) => {
          {couldNotVerify && (
            <span className="error">
              <FontAwesomeIcon
-               color={"red"}
+               color={"var(--error)"}
                icon={faTriangleExclamation}
                size="xs"
              />

src/element/Note.css

@@ -53,7 +53,8 @@
 }
 
 .indented .active {
-    margin-left: -3px;
+    background-color: var(--gray-tertiary);
+    margin-left: -5px;
     border-left: 3px solid var(--highlight);
 }
 

src/index.css

@@ -23,6 +23,8 @@
      --gray: #ccc;
      --gray-secondary: #ddd;
      --gray-tertiary: #eee;
+     --gray-superlight: #333;
+     --gray-light: #555;
   }
 }
 

src/pages/ProfilePage.js

@@ -33,12 +33,12 @@ export default function ProfilePage() {
                     <div className="f-grow">
                         <h2>{user?.display_name || user?.name}</h2>
                         <Copy text={params.id} />
+                        {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                     </div>
                     <div>
                         {isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
                     </div>
                 </div>
-                {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                 <p>{extractLinks([user?.about])}</p>
 
                 {user?.website && (