Show filled-in 'like' icon when tweet is liked

internal/webserver/static/icons/like_filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path></g></svg>

internal/webserver/static/styles.css

@@ -120,6 +120,7 @@ ul.inline-dotted-list li:last-child:after {
 
 .display-name {
     font-weight: bold;
+    white-space: nowrap;
 }
 .handle {
     color: var(--color-twitter-text-gray);
@@ -551,11 +552,11 @@ ul.dropdown-items {
     background-color: var(--color-twitter-off-white);
     outline: 1px solid var(--color-outline-gray);
     border-radius: 0.3em;
-    visibility: hidden;
+    display: none;
     z-index: 1; /* otherwise in quote-tweets, the dropdown button from quoting-tweet is on top of it */
 }
 .dropdown-button:focus + .dropdown-items, .dropdown-items:hover {
-    visibility: visible;
+    display: block;
 }
 .tombstone {
     outline: 1px solid var(--color-outline-gray);
@@ -573,3 +574,6 @@ ul.dropdown-items {
 .tweet video {
     max-height: 25em;
 }
+.like-icon.liked, .like-icon:hover {
+    filter: invert(20%) sepia(97%) saturate(4383%) hue-rotate(321deg) brightness(101%) contrast(95%);
+}

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -117,7 +117,11 @@
           <span>{{$main_tweet.NumRetweets}}</span>
         </div>
         <div class="interaction-stat">
-          <img class="svg-icon" src="/static/icons/like.svg" />
+          {{if $main_tweet.IsLikedByCurrentUser}}
+            <img class="svg-icon like-icon liked" src="/static/icons/like_filled.svg" />
+          {{else}}
+            <img class="svg-icon like-icon" src="/static/icons/like.svg" />
+          {{end}}
           <span>{{$main_tweet.NumLikes}}</span>
         </div>
         <div class="dummy"></div>