Move constant inline styles into makeStyles

frontend/src/layouts/MainLayout.tsx

@@ -145,6 +145,13 @@ const useStyles = makeStyles({
     padding: tokens.spacingVerticalS,
     flexShrink: 0,
   },
+  logoutButton: {
+    width: "100%",
+    justifyContent: "flex-start",
+  },
+  logoutButtonCollapsed: {
+    justifyContent: "center",
+  },
   versionText: {
     display: "block",
     color: tokens.colorNeutralForeground4,
@@ -326,7 +333,10 @@ export function MainLayout(): React.JSX.Element {
               icon={<SignOutRegular />}
               onClick={() => void handleLogout()}
               aria-label="Sign out"
-              style={{ width: "100%", justifyContent: collapsed ? "center" : "flex-start" }}
+              className={mergeClasses(
+                styles.logoutButton,
+                collapsed && styles.logoutButtonCollapsed,
+              )}
             >
               {!collapsed && "Sign out"}
             </Button>