Fix: Small changes to tooltip

src/components/common/Tooltip.tsx

@@ -24,7 +24,12 @@ const PermissionTooltipBase = styled.div`
     display: flex;
     align-items: center;
     flex-direction: column;
-
+    span {
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--secondary-foreground);
+        font-size: 11px;
+    }
     code {
         font-family: 'Fira Mono';
     }
@@ -35,7 +40,7 @@ export function PermissionTooltip(props: Omit<Props, 'content'> & { permission:
 
     return (
         <Tooltip content={<PermissionTooltipBase>
-            <Text id="app.permissions.required" />
+            <span><Text id="app.permissions.required" /></span>
             <code>{ permission }</code>
         </PermissionTooltipBase>} {...tooltipProps} />
     )

src/components/common/messaging/MessageBox.tsx

@@ -64,7 +64,7 @@ const Blocked = styled.div`
 
     svg {
         flex-shrink: 0;
-        margin-right: 8px;
+        margin-inline-end: 8px;
     }
 `;
 

src/pages/settings/panes/Panes.module.scss

@@ -231,7 +231,7 @@
                 flex-shrink: 0;
                 border-radius: 4px;
                 overflow: hidden;
-                margin-right: 4px;
+                margin-inline-end: 4px;
 
                 //TOFIX - Looks wonky on Chromium
                 border: 1px solid black;