Update spacing

Author: ajhai

llmstack/client/src/components/Connections.jsx

@@ -116,7 +116,7 @@ function Connections() {
   };
 
   return (
-    <Stack sx={{ margin: "10px", marginBottom: "60px" }}>
+    <Stack sx={{ margin: "0 10px 60px 10px" }}>
       <Typography variant="h6" className="section-header">
         Connections
       </Typography>

llmstack/client/src/components/Subscription.jsx

@@ -74,9 +74,8 @@ function Subscription(props) {
       {!profileFlags.IS_ORGANIZATION_MEMBER && (
         <Button
           variant="contained"
-          style={{
-            marginTop: "8px",
-            marginRight: "10px",
+          sx={{
+            margin: "8px 10px 60px 0",
             display: profileFlags.IS_ORGANIZATION_MEMBER ? "none" : "inherit",
             alignSelf: "end",
           }}

llmstack/client/src/components/SubscriptionUpdateModal.jsx

@@ -48,7 +48,11 @@ const SubscriptionUpdateModal = ({ open, handleCloseCb }) => {
         <Typography variant="body1">
           Choose a subscription plan to upgrade to. To compare the features of
           each plan, please visit our{" "}
-          <a href="https://www.trypromptly.com/#pricing" target="_blank">
+          <a
+            href="https://www.trypromptly.com/#pricing"
+            target="_blank"
+            rel="noreferrer"
+          >
             pricing page
           </a>
           .

llmstack/client/src/components/apps/AppRunHistoryTimeline.jsx

@@ -167,7 +167,7 @@ const FilterBar = ({ apps, sessions, users, onFilter }) => {
       direction="row"
       spacing={1}
       sx={{
-        padding: "10px",
+        padding: "10px 0",
       }}
     >
       <Autocomplete

llmstack/client/src/components/datasource/AddDataSourceModal.jsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  Typography,
 } from "@mui/material";
 import { useRecoilValue, useRecoilState } from "recoil";
 import { dataSourcesState, dataSourceTypesState } from "../../data/atoms";

llmstack/client/src/pages/AppStudio.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from "react";
 import { useTour } from "@reactour/tour";
 import { useCookies } from "react-cookie";
-import { Box, Container, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { AppList } from "../components/apps/AppList";
 import { SharedAppList } from "../components/apps/SharedAppList";
-import "../index.css";
 import AppTemplatesContainer from "../components/apps/AppTemplatesContainer";
+import "../index.css";
 
 const AppStudioPage = () => {
   const { steps, setSteps, setIsOpen } = useTour();
@@ -60,15 +60,8 @@ const AppStudioPage = () => {
   });
 
   return (
-    <Container
-      maxWidth="md"
-      style={{ minWidth: "100%", padding: 5 }}
-      ref={containerRef}
-    >
-      <Box
-        style={{ marginTop: "5px", marginBottom: "20px" }}
-        className="app-template-list"
-      >
+    <Box ref={containerRef} sx={{ m: 1 }}>
+      <Box sx={{ marginBottom: "20px" }} className="app-template-list">
         <Typography variant="h5" className="section-header">
           App Templates
           <br />
@@ -100,7 +93,7 @@ const AppStudioPage = () => {
         </Typography>
         <SharedAppList />
       </Box>
-    </Container>
+    </Box>
   );
 };
 

llmstack/client/src/pages/setting.jsx

@@ -21,7 +21,7 @@ import { enqueueSnackbar } from "notistack";
 import Connections from "../components/Connections";
 import Subscription from "../components/Subscription";
 import { fetchData, patchData } from "./dataUtil";
-import { organizationState, profileFlagsState } from "../data/atoms";
+import { profileFlagsState } from "../data/atoms";
 import { useRecoilValue } from "recoil";
 import "../index.css";
 import ThemedJsonForm from "../components/ThemedJsonForm";
@@ -144,7 +144,6 @@ const SettingPage = () => {
   const [loading, setLoading] = useState(true);
   const [updateKeys, setUpdateKeys] = useState(new Set());
   const profileFlags = useRecoilValue(profileFlagsState);
-  const organization = useRecoilValue(organizationState);
   const formRef = createRef();
 
   useEffect(() => {
@@ -227,9 +226,9 @@ const SettingPage = () => {
       {loading ? (
         <CircularProgress />
       ) : (
-        <Grid container>
+        <Grid container sx={{ m: 1 }}>
           <Grid item xs={12} md={6}>
-            <Stack spacing={2} sx={{ textAlign: "left", margin: "10px" }}>
+            <Stack spacing={2} sx={{ textAlign: "left" }}>
               <Typography variant="h6" className="section-header">
                 Settings
               </Typography>
@@ -346,7 +345,7 @@ const SettingPage = () => {
             </Stack>
           </Grid>
 
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} md={6} sx={{ p: 0 }}>
             <Stack>
               <Connections />
               {process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===