Improve verified checkmark icon, css improvements

src/sass/general.scss

@@ -23,6 +23,7 @@
     font-weight: bold;
     width: 30px;
     height: 30px;
+    padding: 0px 5px 1px 8px;
   }
 
   input {

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);
+    }
   }
 }
 

src/sass/navbar.scss

@@ -59,13 +59,9 @@ nav {
     justify-content: flex-end;
   }
 
-  &.right a {
-    padding-left: 4px;
-
-    &:hover {
-      color: var(--accent_light);
-      text-decoration: unset;
-    }
+  &.right a:hover {
+    color: var(--accent_light);
+    text-decoration: unset;
   }
 }
 
@@ -81,10 +77,11 @@ nav {
   }
 }
 
-.icon-info:before {
+.icon-info {
   margin: 0 -3px;
 }
 
 .icon-cog {
   font-size: 15px;
+  padding-left: 0 !important;
 }

src/sass/search.scss

@@ -13,6 +13,7 @@
 
   button {
     margin: 0 2px 0 0;
+    padding: 0px 1px 1px 4px;
     height: 23px;
     display: flex;
     align-items: center;
@@ -35,7 +36,7 @@
     background-color: var(--bg_elements);
     color: var(--fg_color);
     border: 1px solid var(--accent_border);
-    padding: 1px 6px 2px 6px;
+    padding: 1px 1px 2px 4px;
     font-size: 14px;
     cursor: pointer;
     margin-bottom: 2px;
@@ -56,20 +57,17 @@
   font-weight: initial;
   text-align: left;
 
-  > div {
-    line-height: 1.7em;
-  }
-
   .checkbox-container {
     display: inline;
     padding-right: unset;
-    margin-bottom: unset;
+    margin-bottom: 5px;
     margin-left: 23px;
   }
 
   .checkbox {
     right: unset;
     left: -22px;
+    line-height: 1.6em;
   }
 
   .checkbox-container .checkbox:after {

src/sass/tweet/video.scss

@@ -2,7 +2,7 @@
 @import "_mixins";
 
 video {
-  max-height: 100%;
+  height: 100%;
   width: 100%;
 }
 
@@ -13,6 +13,7 @@ video {
 
 .gallery-video.card-container {
   flex-direction: column;
+  width: 100%;
 }
 
 .video-container {
@@ -20,9 +21,6 @@ video {
   min-width: 200px;
   max-height: 530px;
   margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 
   img {
     max-height: 100%;

src/views/general.nim

@@ -52,8 +52,8 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=21")
-    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=3")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=22")
+    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=4")
 
     if theme.len > 0:
       link(rel="stylesheet", type="text/css", href=(&"/css/themes/{theme}.css"))

src/views/renderutils.nim

@@ -26,7 +26,9 @@ proc icon*(icon: string; text=""; title=""; class=""; href=""): VNode =
 template verifiedIcon*(user: User): untyped {.dirty.} =
   if user.verifiedType != VerifiedType.none:
     let lower = ($user.verifiedType).toLowerAscii()
-    icon "ok", class=(&"verified-icon {lower}"), title=(&"Verified {lower} account")
+    buildHtml(tdiv(class=(&"verified-icon {lower}"))):
+      icon "circle", class="verified-icon-circle", title=(&"Verified {lower} account")
+      icon "ok", class="verified-icon-check", title=(&"Verified {lower} account")
   else:
     text ""