add sway/mode to waybar; add font awesome to vscode

.config/Code - OSS/User/settings.json

@@ -1,6 +1,6 @@
 {
     "workbench.colorTheme": "Atom One Dark",
-    "editor.fontFamily": "Fira Code",
+    "editor.fontFamily": "'Fira Code', 'Font Awesome 5 Brands', 'Font Awesome 5 Free', 'Font Awesome 5 Free Solid'",
     "editor.minimap.enabled": false,
     "editor.fontLigatures": true,
     "editor.renderControlCharacters": false,

.config/sway/config

@@ -121,7 +121,7 @@ bindsym $mod+a focus parent
 #bindsym $mod+d focus child
 
 # resize window (you can also use the mouse for that)
-mode "resize" {
+mode resize {
         # These bindings trigger as soon as you enter the resize mode
 
         # Pressing left will shrink the window’s width.
@@ -140,11 +140,12 @@ mode "resize" {
         bindsym Right resize grow width 10 px or 10 ppt
 
         # back to normal: Enter or Escape
-        bindsym Return mode "default"
-        bindsym Escape mode "default"
+        bindsym Return mode default
+        bindsym Escape mode default
+        bindsym $mod+r mode default
 }
 
-bindsym $mod+r mode "resize"
+bindsym $mod+r mode resize
 
 # ------------------------------------------------------------------------------
 # Workspaces

.config/waybar/config

@@ -1,7 +1,7 @@
 {
     "layer": "top",
     "position": "top",
-    "modules-left": ["sway/workspaces", "custom/right-arrow-dark"],
+    "modules-left": ["sway/workspaces", "sway/mode", "custom/right-arrow-dark"],
     "modules-center": [
         "custom/left-arrow-dark",
         "clock#1",
@@ -49,6 +49,11 @@
         "all-outputs": false,
         "format": "{name}"
     },
+    "sway/mode": {
+        "format": " {}",
+        "max-length": 50,
+        "tooltip": false
+    },
 
     "disk": {
         "interval": 30,

.config/waybar/style.css

@@ -18,23 +18,29 @@ window#waybar {
 #tray,
 #workspaces {
     padding: 0 10px;
-    background: #2f343f;
+    background: #2F343F;
+}
+
+#mode {
+    color: #4DADD4;
+    padding-right: 10px;
+    background: #2F343F;
 }
 
 #custom-right-arrow-dark,
 #custom-left-arrow-dark {
-    color: #2f343f;
+    color: #2F343F;
 }
 
 #custom-right-arrow-light,
 #custom-left-arrow-light {
     color: #383C4A;
-    background: #2f343f;
+    background: #2F343F;
 }
 
 #workspaces button {
     padding: 0 5px;
-    background: #2f343f;
+    background: #2F343F;
     color: #D3DAE3;
     border: none;
 }