From eb197bb8998d706e76016be203c66e898d251000 Mon Sep 17 00:00:00 2001
From: dimden <firefox78888@gmail.com>
Date: Sun, 21 Aug 2022 02:23:36 +0300
Subject: [PATCH] some design changes

---
 layouts/home/script.js          | 13 +++++---
 layouts/home/style.css          | 25 ++++++++++++---
 layouts/notifications/script.js | 13 +++++---
 layouts/notifications/style.css | 25 +++++++++++++--
 layouts/profile/script.js       | 13 +++++---
 layouts/profile/style.css       | 15 +++++++--
 layouts/search/script.js        | 11 +++++--
 layouts/search/style.css        | 26 +++++++++++++---
 layouts/tweet/script.js         | 55 +++++++++++++++++++++++----------
 layouts/tweet/style.css         | 25 ++++++++++++---
 manifest.json                   |  2 +-
 11 files changed, 173 insertions(+), 50 deletions(-)

diff --git a/layouts/home/script.js b/layouts/home/script.js
index 36f53954..53aa9500 100644
--- a/layouts/home/script.js
+++ b/layouts/home/script.js
@@ -276,7 +276,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -312,13 +312,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ''}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" target="_blank" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -569,6 +569,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -622,6 +623,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
         } else {
             let tweetData;
@@ -637,6 +639,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
             t.retweeted = false;
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             delete t.newTweetId;
         }
@@ -752,6 +755,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -760,6 +764,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }
diff --git a/layouts/home/style.css b/layouts/home/style.css
index b3229195..7da33c35 100644
--- a/layouts/home/style.css
+++ b/layouts/home/style.css
@@ -150,9 +150,20 @@ body {
     outline: none;
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
 .tweet:hover {
     background-color: var(--darker-background-color)
 }
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
 
 .tweet-avatar-link {
     float: left;
@@ -229,7 +240,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -241,7 +252,7 @@ span.tweet-body-text {
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .tweet-body-quote {
@@ -930,11 +941,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;
diff --git a/layouts/notifications/script.js b/layouts/notifications/script.js
index 0f65013a..df0246d9 100644
--- a/layouts/notifications/script.js
+++ b/layouts/notifications/script.js
@@ -86,7 +86,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1" target="_blank">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -116,13 +116,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ``}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -361,6 +361,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -406,6 +407,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Unretweet';
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
@@ -422,6 +424,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             t.retweeted = false;
             delete t.newTweetId;
@@ -537,6 +540,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -545,6 +549,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }
diff --git a/layouts/notifications/style.css b/layouts/notifications/style.css
index 17c33015..8afa799e 100644
--- a/layouts/notifications/style.css
+++ b/layouts/notifications/style.css
@@ -155,6 +155,19 @@ body {
     background-color: var(--darker-background-color)
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
+
+
 .tweet-avatar-link {
     float: left;
     margin-right: 10px
@@ -230,7 +243,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -731,11 +744,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;
diff --git a/layouts/profile/script.js b/layouts/profile/script.js
index f84ec503..e9f80503 100644
--- a/layouts/profile/script.js
+++ b/layouts/profile/script.js
@@ -979,7 +979,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -1015,13 +1015,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ''}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" target="_blank" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -1280,6 +1280,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -1329,6 +1330,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Unretweet';
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
@@ -1345,6 +1347,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             t.retweeted = false;
             delete t.newTweetId;
@@ -1461,6 +1464,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -1469,6 +1473,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }
diff --git a/layouts/profile/style.css b/layouts/profile/style.css
index 991ba741..21775e03 100644
--- a/layouts/profile/style.css
+++ b/layouts/profile/style.css
@@ -128,9 +128,20 @@ body {
     outline: none;
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
 .tweet:hover {
     background-color: var(--darker-background-color)
 }
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
 
 .tweet-avatar-link {
     float: left;
@@ -164,7 +175,7 @@ body {
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .tweet-header-name,
@@ -216,7 +227,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
diff --git a/layouts/search/script.js b/layouts/search/script.js
index 5fc4e301..663b90c6 100644
--- a/layouts/search/script.js
+++ b/layouts/search/script.js
@@ -224,13 +224,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ``}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -472,6 +472,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -517,6 +518,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Unretweet';
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
@@ -533,6 +535,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             t.retweeted = false;
             delete t.newTweetId;
@@ -648,6 +651,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -656,6 +660,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }
diff --git a/layouts/search/style.css b/layouts/search/style.css
index c91c1682..052b3cb4 100644
--- a/layouts/search/style.css
+++ b/layouts/search/style.css
@@ -162,9 +162,21 @@ body {
     outline: none;
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
 .tweet:hover {
     background-color: var(--darker-background-color)
 }
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
+
 
 .tweet-avatar-link {
     float: left;
@@ -241,7 +253,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -449,7 +461,7 @@ span.tweet-body-text {
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .tweet-media-element,
@@ -758,11 +770,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;
diff --git a/layouts/tweet/script.js b/layouts/tweet/script.js
index 89a00363..47bd4ed1 100644
--- a/layouts/tweet/script.js
+++ b/layouts/tweet/script.js
@@ -613,7 +613,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         });
     }
     tweet.tabIndex = -1;
-    tweet.className = `tweet tweet-id-${t.id_str} ${options.mainTweet ? 'tweet-main' : ''}`;
+    tweet.className = `tweet tweet-id-${t.id_str} ${options.mainTweet ? 'tweet-main' : 'tweet-replying'}`;
     if(!activeTweet) {
         tweet.classList.add('tweet-active');
         activeTweet = tweet;
@@ -676,10 +676,10 @@ async function appendTweet(t, timelineContainer, options = {}) {
         </div>
         <a ${options.mainTweet ? 'hidden' : ''} class="tweet-time" data-timestamp="${new Date(t.created_at).getTime()}" title="${new Date(t.created_at).toLocaleString()}" href="https://twitter.com/${t.user.screen_name}/status/${t.id_str}">${timeElapsed(new Date(t.created_at).getTime())}</a>
         <div class="tweet-body ${options.mainTweet ? 'tweet-body-main' : ''}">
-            <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
+            <span class="tweet-body-text ${(t.full_text && t.full_text.length > 100) || !options.mainTweet ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -734,10 +734,10 @@ async function appendTweet(t, timelineContainer, options = {}) {
                 <div class="tweet-footer-favorites"></div>
             </div>
             ` : ''}
-            <a ${!options.mainTweet ? 'hidden' : ''} class="tweet-date" title="${new Date(t.created_at).toLocaleString()}" href="https://twitter.com/${t.user.screen_name}/status/${t.id_str}"><br>${new Date(t.created_at).toLocaleString()} ・ ${t.source.split('>')[1].split('<')[0]}</a>
+            <a ${!options.mainTweet ? 'hidden' : ''} class="tweet-date" title="${new Date(t.created_at).toLocaleString()}" href="https://twitter.com/${t.user.screen_name}/status/${t.id_str}"><br>${new Date(t.created_at).toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' }).toLowerCase()} - ${new Date(t.created_at).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })}  ・ ${t.source.split('>')[1].split('<')[0]}</a>
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${options.mainTweet ? '' : t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${options.mainTweet ? '' : t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${options.mainTweet ? '' : t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${options.mainTweet ? '' : t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span><br>
@@ -746,7 +746,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
                         <span class="tweet-interact-retweet-menu-retweeters">See retweeters</span><br>
                     ` : ''}
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${options.mainTweet ? '' : t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${options.mainTweet ? '' : t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -1097,8 +1097,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
-        if(!options.mainTweet) tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
-        else tweetFooterReplies.innerText = parseInt(tweetFooterReplies.innerText) + 1;
+        if(!options.mainTweet) {
+            tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
+            tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
+        } else {
+            tweetFooterReplies.dataset.val = parseInt(tweetFooterReplies.innerText) + 1;
+            tweetFooterReplies.innerText = parseInt(tweetFooterReplies.innerText) + 1;
+        }
         tweetData._ARTIFICIAL = true;
         if(tweet.getElementsByClassName('tweet-self-thread-div')[0]) tweet.getElementsByClassName('tweet-self-thread-div')[0].hidden = false;
         tweetReplyButton.disabled = false;
@@ -1148,8 +1153,12 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
-            if(!options.mainTweet) tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
-            else tweetFooterRetweets.innerText = Number(parseInt(tweetFooterRetweets.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) + 1).toLocaleString().replace(/\s/g, ',');
+            if(!options.mainTweet) {
+                tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
+                tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
+            } else {
+                tweetFooterRetweets.innerText = Number(parseInt(tweetFooterRetweets.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) + 1).toLocaleString().replace(/\s/g, ',');
+            }
         } else {
             let tweetData;
             try {
@@ -1164,8 +1173,12 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
             t.retweeted = false;
-            if(!options.mainTweet) tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
-            else tweetFooterRetweets.innerText = Number(parseInt(tweetFooterRetweets.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) - 1).toLocaleString().replace(/\s/g, ',');
+            if(!options.mainTweet) {
+                tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
+                tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
+            } else {
+                tweetFooterRetweets.innerText = Number(parseInt(tweetFooterRetweets.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) - 1).toLocaleString().replace(/\s/g, ',');
+            }
             delete t.newTweetId;
         }
     });
@@ -1325,8 +1338,12 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
-            if(!options.mainTweet) tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
-            else tweetFooterFavorites.innerText = Number(parseInt(tweetFooterFavorites.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) - 1).toLocaleString().replace(/\s/g, ',');
+            if(!options.mainTweet) {
+                tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
+                tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
+            } else {
+                tweetFooterFavorites.innerText = Number(parseInt(tweetFooterFavorites.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) - 1).toLocaleString().replace(/\s/g, ',');
+            }
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
             API.favoriteTweet({
@@ -1334,8 +1351,12 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
-            if(!options.mainTweet) tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
-            else tweetFooterFavorites.innerText = Number(parseInt(tweetFooterFavorites.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) + 1).toLocaleString().replace(/\s/g, ',');
+            if(!options.mainTweet) {
+                tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
+                tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
+            } else {
+                tweetFooterFavorites.innerText = Number(parseInt(tweetFooterFavorites.innerText.replace(/\s/g, '').replace(/,/g, '').replace(/\./g, '')) + 1).toLocaleString().replace(/\s/g, ',');
+            }
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }
     });
diff --git a/layouts/tweet/style.css b/layouts/tweet/style.css
index 9da9652d..6ea2fef5 100644
--- a/layouts/tweet/style.css
+++ b/layouts/tweet/style.css
@@ -163,6 +163,17 @@ body {
     background-color: var(--darker-background-color);
     cursor: pointer
 }
+.tweet:not(.tweet-main) .tweet-interact-reply[data-val="0"],
+.tweet:not(.tweet-main) .tweet-interact-retweet[data-val="0"],
+.tweet:not(.tweet-main) .tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
+.tweet:not(.tweet-main):hover .tweet-interact-reply[data-val="0"],
+.tweet:not(.tweet-main):hover .tweet-interact-retweet[data-val="0"],
+.tweet:not(.tweet-main):hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
 
 .tweet-avatar-link {
     float: left;
@@ -239,7 +250,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -910,7 +921,7 @@ a:hover,
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .new-tweet-media-img-alt {
@@ -937,11 +948,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;
diff --git a/manifest.json b/manifest.json
index ee10985d..959e85e1 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Old Twitter Layout (2022)",
   "description": "A new extension that returns old Twitter's look.",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "manifest_version": 3,
   "homepage_url": "https://github.com/dimdenGD/OldTwitter",
   "background": {