Improve verified badges

public/style.css

@@ -109,6 +109,16 @@ a:hover {
     color: #f8f8f2;
 }
 
+.verified-icon {
+    color: #fff;
+    background-color: #1da1f2;
+    border-radius: 50%;
+    display: inline-block;
+    text-align: center;
+    margin-left: 4px;
+    width: 18px;
+}
+
 .status-el .media-heading .heading-right {
     display: flex;
     flex-shrink: 0;
@@ -391,6 +401,10 @@ nav {
     text-overflow: ellipsis;
 }
 
+.profile-card-name span {
+    width: 22px;
+}
+
 .profile-card-username {
     font-size: 14px;
 }

src/formatters.nim

@@ -69,13 +69,12 @@ proc getGifSrc*(tweet: Tweet): string =
 proc getGifThumb*(tweet: Tweet): string =
   fmt"https://pbs.twimg.com/tweet_video_thumb/{tweet.gif}.jpg"
 
-proc formatName(profile: Profile): string =
-  result = profile.fullname
+proc formatName*(profile: Profile): string =
+  result = xmltree.escape(profile.fullname)
   if profile.verified:
-    result &= " 🔹"
+    result &= htmlgen.span("✔", class="verified-icon")
   elif profile.protected:
     result &= " 🔒"
-  result = xmltree.escape(result)
 
 proc linkUser*(profile: Profile; h: string; username=true; class=""): string =
   let text =

src/parser.nim

@@ -17,10 +17,10 @@ proc selectText(node: XmlNode; selector: string): string =
 
 proc parseProfile*(node: XmlNode): Profile =
   let profile = node.querySelector(".profile-card")
-  result.fullname = profile.selectText(".fullname")
+  result.fullname = profile.selectText(".fullname").strip()
   result.username = profile.selectText(".username").strip(chars={'@', ' '})
   result.description = profile.selectText(".bio")
-  result.verified = profile.selectText("li.verified").len > 0
+  result.verified = profile.selectText(".Icon.Icon--verified").len > 0
   result.protected = profile.selectText(".Icon.Icon--protected").len > 0
   result.userpic = profile.selectAttr(".ProfileCard-avatarImage", "src").getUserpic()
   result.banner = profile.selectAttr("svg > image", "xlink:href").replace("600x200", "1500x500")