Make chat bar buttons have a consistent size (#927)

Co-authored-by: V <vendicated@riseup.net>

src/plugins/invisibleChat/index.tsx

@@ -85,7 +85,7 @@ function ChatBarIcon() {
                         onMouseLeave={onMouseLeave}
                         innerClassName={ButtonWrapperClasses.button}
                         onClick={() => buildEncModal()}
-                        style={{ marginRight: "2px" }}
+                        style={{ padding: "0 4px" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg

src/plugins/sendTimestamps/styles.css

@@ -43,7 +43,7 @@
 }
 
 .vc-st-button {
-    margin-right: 4px;
+    padding: 0 8px;
 }
 
 .vc-st-button svg {

src/plugins/silentMessageToggle.tsx

@@ -53,7 +53,7 @@ function SilentMessageToggle(chatBoxProps: {
                         size=""
                         look={ButtonLooks.BLANK}
                         innerClassName={ButtonWrapperClasses.button}
-                        style={{ margin: "0px 8px" }}
+                        style={{ padding: "0 8px" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg

src/plugins/silentTyping.tsx

@@ -57,7 +57,7 @@ function SilentTypingToggle(chatBoxProps: {
                         size=""
                         look={ButtonLooks.BLANK}
                         innerClassName={ButtonWrapperClasses.button}
-                        style={{ margin: "0 8px 0" }}
+                        style={{ padding: "0 8px" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">