[bug] [design] improve link icon and letter spacing

Author: zombieFox

css/link.css

@@ -267,7 +267,7 @@
   color: rgb(var(--black));
 }
 
-.bookmarks-url-light .link-url-text {
+.is-bookmarks-url-light .link-url-text {
   color: rgb(var(--white));
 }
 
@@ -277,36 +277,48 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: color var(--animation-speed-fast) ease-in-out;
 }
 
 .link-display-icon {
   color: rgb(var(--accent));
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: color var(--animation-speed-fast) ease-in-out;
 }
 
-.is-bookmarks-style-block .link-display-letter {
+.link-display-letter,
+.link-display-icon {
   margin: 0;
+}
+
+.is-bookmarks-style-block .link-display-letter {
   font-size: 2em;
   text-align: center;
   max-width: 100%;
 }
 
 .is-bookmarks-style-block .link-display-icon {
-  margin-bottom: 0.25em;
   font-size: 2.5em;
   text-align: center;
   max-width: 100%;
 }
 
 .is-bookmarks-style-list .link-display-letter,
 .is-bookmarks-style-list .link-display-icon {
-  margin: 0 0.5em 0 0;
   font-size: 1.5em;
   flex-shrink: 0;
   max-width: 50%;
 }
 
+.is-bookmarks-show-name.is-bookmarks-style-block .link-display-letter,
+.is-bookmarks-show-name.is-bookmarks-style-block .link-display-icon {
+  margin-bottom: 0.25em;
+}
+
+.is-bookmarks-show-name.is-bookmarks-style-list .link-display-letter,
+.is-bookmarks-show-name.is-bookmarks-style-list .link-display-icon {
+  margin-right: 0.5em
+}
+
 .link-item:hover .link-display-letter,
 .link-item:focus .link-display-letter,
 .link-item:hover .link-display-icon,

js/control.js

@@ -1855,11 +1855,11 @@ var control = (function() {
       var urlText = {
         dark: function() {
           helper.addClass(html, "is-bookmarks-url-dark");
-          helper.removeClass(html, "bookmarks-url-light");
+          helper.removeClass(html, "is-bookmarks-url-light");
         },
         light: function() {
           helper.removeClass(html, "is-bookmarks-url-dark");
-          helper.addClass(html, "bookmarks-url-light");
+          helper.addClass(html, "is-bookmarks-url-light");
         }
       };
       urlText[state.get().link.url.style]();

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.1.7";
+  var current = "3.1.8";
 
   var compare = function(a, b) {
     var pa = a.split(".");