Update settings style

Author: ajhai

llmstack/client/src/components/Connections.jsx

@@ -116,14 +116,19 @@ function Connections() {
   };
 
   return (
-    <Stack sx={{ margin: "0 10px 60px 10px" }}>
+    <Stack>
       <Typography variant="h6" className="section-header">
         Connections
       </Typography>
       <Button
         startIcon={<AddOutlined />}
         variant="contained"
-        sx={{ textTransform: "none", margin: "10px", marginLeft: "auto" }}
+        sx={{
+          textTransform: "none",
+          margin: "10px",
+          marginLeft: "auto",
+          marginRight: 0,
+        }}
         onClick={() => {
           setConnection(null);
           setOpenConnectionModal(true);

llmstack/client/src/components/Subscription.jsx

@@ -13,12 +13,15 @@ function Subscription(props) {
   const organization = useRecoilValue(organizationState);
 
   return (
-    <Stack>
+    <Stack sx={{ margin: "0 10px 60px 10px" }}>
       <Stack>
-        <Typography variant="h6" className="section-header">
+        <Typography
+          variant="h6"
+          className="section-header"
+          sx={{ marginBottom: "8px" }}
+        >
           Subscription
         </Typography>
-        ;
         <Stack>
           <Paper>
             <Stack>
@@ -75,7 +78,7 @@ function Subscription(props) {
         <Button
           variant="contained"
           sx={{
-            margin: "8px 10px 60px 0",
+            marginTop: "10px",
             display: profileFlags.IS_ORGANIZATION_MEMBER ? "none" : "inherit",
             alignSelf: "end",
           }}

llmstack/client/src/pages/setting.jsx

@@ -346,7 +346,7 @@ const SettingPage = () => {
           </Grid>
 
           <Grid item xs={12} md={6} sx={{ p: 0 }}>
-            <Stack>
+            <Stack sx={{ margin: "0 10px", marginBottom: "60px" }} spacing={4}>
               <Connections />
               {process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
                 "true" && <Subscription user_email={formData.user_email} />}