Improve verified checkmark icon, css improvements

src/sass/index.scss

@@ -50,7 +50,7 @@ body {
 
   background-color: var(--bg_color);
   color: var(--fg_color);
-  font-family: $font_0, $font_1, $font_2, $font_3;
+  font-family: $font_0, $font_1;
   font-size: 15px;
   line-height: 1.3;
   margin: 0;
@@ -143,30 +143,50 @@ ul {
 }
 
 .verified-icon {
-  color: var(--icon_text);
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin: 2px 0 3px 3px;
-  padding-top: 3px;
-  height: 11px;
-  width: 14px;
-  font-size: 8px;
   display: inline-block;
-  text-align: center;
-  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;
+
+  .verified-icon-circle {
+    position: absolute;
+    font-size: 15px;
+  }
+
+  .verified-icon-check {
+    position: absolute;
+    font-size: 9px;
+    margin: 5px 3px;
+  }
 
   &.blue {
-    background-color: var(--verified_blue);
+    .verified-icon-circle {
+      color: var(--verified_blue);
+    }
+
+    .verified-icon-check {
+      color: var(--icon_text);
+    }
   }
 
   &.business {
-    color: var(--bg_panel);
-    background-color: var(--verified_business);
+    .verified-icon-circle {
+      color: var(--verified_business);
+    }
+
+    .verified-icon-check {
+      color: var(--bg_panel);
+    }
   }
 
   &.government {
-    color: var(--bg_panel);
-    background-color: var(--verified_government);
+    .verified-icon-circle {
+      color: var(--verified_government);
+    }
+
+    .verified-icon-check {
+      color: var(--bg_panel);
+    }
   }
 }