UI bug fixes and aesthetic updates (#492)

Major fixes
- MAJOR PATCH: Disallowed editing of usernames as discussed
- MAJOR BUGFIX: Adding existing user to workspace did not actually use the selected role!

Layouts
- `Layout.tsx` files updated to properly treat page contents as children so that we could correctly use `height:"100%"` in the pages instead of having to use things like `height: "96vh"`
- BUGFIX: Content cards overflow when sidebar is open is fixed
- UD page now also always fills the screen and doesn't scroll (only rules scroll)
- Updated Workspace Management page to match UD page styles. Made the edit name button into an IconButton.
- - Many modals have been cleaned up and standardised.

Fabs and buttons
- Content test sidebar fabs updated and repositioned to inline with page nav
- UD rules page test sidebar tab is updated and repositioned
- Search bar and tag filter and add buttons cleaned up and made sleeker

Navbar resizing fixes
- BUGFIX: On smaller windows, nav bar items overflowed the screen and could not be seen (since the introduction of the workspace button). 
  - Large navbar now switches to small navbar earlier.
  - Large navbar items always stay single-line now too.
  - AAQ logo disappear on small navbar if the screen is too small to show the logo AND workspace button

Other bug fixes
- BUGFIX: Integrations page wording changed to "Workspace API Key" instead of the legacy "Your"
- BUGFIX: Clicking "Edit" on a card no longer opens the card preview modal first

Author: amiraliemami

admin_app/src/app/content/components/ChatSideBar.tsx

@@ -133,7 +133,7 @@ const ChatSideBar = ({
         flexDirection: "column",
         padding: 3,
         paddingTop: 4,
-        height: "94vh",
+        height: "100%",
       }}
     >
       <Box
@@ -149,8 +149,14 @@ const ChatSideBar = ({
       </Box>
       <Box
         sx={{
-          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
           flexGrow: 1,
+          flexShrink: 1,
+          height: 0,
+          minHeight: "200px",
+          padding: 2,
+          overflowY: "auto",
         }}
       >
         {messages.map((message, index) => (

admin_app/src/app/content/components/ContentCard.tsx

@@ -7,6 +7,9 @@ import React from "react";
 import { Layout } from "../../../components/Layout";
 import { Tag } from "@/app/content/page";
 
+const CARD_HEIGHT = 210;
+const CARD_MIN_WIDTH = 280;
+
 const ContentCard = ({
   title,
   text,
@@ -42,12 +45,12 @@ const ContentCard = ({
         sx={[
           {
             cursor: "pointer",
-            m: sizes.smallGap,
             p: sizes.baseGap,
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
-            maxHeight: "250px",
+            height: CARD_HEIGHT,
+            minWidth: CARD_MIN_WIDTH,
           },
           appStyles.hoverShadow,
           appStyles.shadow,
@@ -108,6 +111,7 @@ const ContentCard = ({
             disabled={!editAccess}
             component={Link}
             href={`/content/edit?content_id=${content_id}`}
+            onClick={(event) => event.stopPropagation()}
           >
             <Edit fontSize="small" />
             <Layout.Spacer horizontal multiplier={0.3} />
@@ -151,4 +155,4 @@ const ContentCard = ({
   );
 };
 
-export default ContentCard;
+export { ContentCard, CARD_HEIGHT, CARD_MIN_WIDTH };

admin_app/src/app/content/components/PageNavigation.tsx

@@ -15,9 +15,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({ searchTerm, setSearchTerm
       <TextField
         sx={{
           backgroundColor: appColors.white,
-          borderRadius: "5px",
         }}
         variant="outlined"
+        size="small"
         placeholder="Search"
         value={searchTerm}
         onChange={(e) => {

admin_app/src/app/content/components/SearchBar.tsx

@@ -79,7 +79,7 @@ const AddEditContentPage = () => {
           flexDirection: "row",
           justifyContent: "center",
           alignItems: "center",
-          height: "100vh",
+          height: "100%",
           width: "100%",
         }}
       >
@@ -90,34 +90,35 @@ const AddEditContentPage = () => {
   return (
     <FullAccessComponent>
       <Layout.FlexBox
-        flexDirection={"column"}
-        sx={{ p: sizes.doubleBaseGap, marginTop: 5 }}
+        sx={{
+          flexDirection: "column",
+          marginTop: 2,
+          marginBottom: 1,
+          p: sizes.doubleBaseGap,
+          gap: sizes.baseGap,
+        }}
       >
         <Header
           content_id={content_id}
           onBack={() =>
             isSaved ? router.push("/content") : setOpenDiscardChangesModal(true)
           }
         />
-        <Layout.FlexBox flexDirection={"column"}>
-          <Layout.Spacer multiplier={2} />
-          <ContentBox
-            content={content}
-            setContent={setContent}
-            getTagList={() => {
-              return getTagList(token!);
-            }}
-            addTag={(tag: string) => {
-              return createTag(tag, token!);
-            }}
-            deleteTag={(tag_id: number) => {
-              return deleteTag(tag_id, token!);
-            }}
-            isSaved={isSaved}
-            setIsSaved={setIsSaved}
-          />
-          <Layout.Spacer multiplier={1} />
-        </Layout.FlexBox>
+        <ContentBox
+          content={content}
+          setContent={setContent}
+          getTagList={() => {
+            return getTagList(token!);
+          }}
+          addTag={(tag: string) => {
+            return createTag(tag, token!);
+          }}
+          deleteTag={(tag_id: number) => {
+            return deleteTag(tag_id, token!);
+          }}
+          isSaved={isSaved}
+          setIsSaved={setIsSaved}
+        />
       </Layout.FlexBox>
       <DiscardChangesModal
         open={openDiscardChangesModal}

admin_app/src/app/content/edit/page.tsx

@@ -10,8 +10,10 @@ export default function RootLayout({
 }>) {
   return (
     <ProtectedComponent>
-      <NavBar />
-      <Box paddingTop={"60px"}>{children}</Box>
+      <Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+        <NavBar />
+        <Box sx={{ flexGrow: 1, overflow: "auto", paddingTop: "60px" }}>{children}</Box>
+      </Box>
     </ProtectedComponent>
   );
 }