Minor UI cleanups / fixes (#417)

* Remove elevation from Paper backdrop on UD too * Remove unnecessary space around New content button * Change admin app description to tagline (social preview) * Update dashboard page descriptions and top padding * reduce top padding on all pages by 1 * simplify navbar code * Add hardcoded content and daily API limits * Revert same line title+desc on dashboard * Add AAQ email address to contact us docs --------- Co-authored-by: Suzin You <[email protected]>
IDinsight · Aug 30, 2024 · a26a9a8 · a26a9a8
1 parent a1d1e83
commit a26a9a8
Show file tree

Hide file tree

Showing 14 changed files with 123 additions and 72 deletions.
diff --git a/admin_app/src/app/content/components/PageNavigation.tsx b/admin_app/src/app/content/components/PageNavigation.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Layout } from "@/components/Layout";
+import { appColors } from "@/utils";
 import { ChevronLeft, ChevronRight } from "@mui/icons-material";
 import { IconButton, Typography } from "@mui/material";
 import React from "react";
@@ -19,31 +20,54 @@ export const PageNavigation: React.FC<PageNavigationProps> = ({
     <Layout.FlexBox
       flexDirection={"row"}
       alignItems={"center"}
-      justifyContent={"center"}
+      justifyContent={"space-between"}
+      width={"100%"}
+      flexWrap={"wrap"}
     >
-      <IconButton
-        onClick={() => {
-          page > 1 && setPage(page - 1);
-        }}
-        disabled={page <= 1}
-        sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
+      <Typography
+        variant="body1"
+        color={appColors.darkGrey}
+        width={"45%"}
+        minWidth={"300px"}
       >
-        <ChevronLeft color={page > 1 ? "primary" : "disabled"} />
-      </IconButton>
-      <Layout.Spacer horizontal multiplier={0.5} />
-      <Typography variant="subtitle2">
-        {maxPages === 0 ? 0 : page} of {maxPages}
+        Content limit is 50.{" "}
+        <a
+          href="https://docs.ask-a-question.com/latest/contact_us/"
+          style={{
+            textDecoration: "underline",
+            textDecorationColor: appColors.darkGrey,
+            color: appColors.darkGrey,
+          }}
+        >
+          Contact us
+        </a>{" "}
+        for more.
       </Typography>
-      <Layout.Spacer horizontal multiplier={0.5} />
-      <IconButton
-        onClick={() => {
-          page < maxPages && setPage(page + 1);
-        }}
-        disabled={page >= maxPages}
-        sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
-      >
-        <ChevronRight color={page < maxPages ? "primary" : "disabled"} />
-      </IconButton>
+      <Layout.FlexBox flexDirection={"row"} alignItems={"center"} width={"55%"}>
+        <IconButton
+          onClick={() => {
+            page > 1 && setPage(page - 1);
+          }}
+          disabled={page <= 1}
+          sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
+        >
+          <ChevronLeft color={page > 1 ? "primary" : "disabled"} />
+        </IconButton>
+        <Layout.Spacer horizontal multiplier={0.5} />
+        <Typography variant="subtitle2">
+          {maxPages === 0 ? 0 : page} of {maxPages}
+        </Typography>
+        <Layout.Spacer horizontal multiplier={0.5} />
+        <IconButton
+          onClick={() => {
+            page < maxPages && setPage(page + 1);
+          }}
+          disabled={page >= maxPages}
+          sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
+        >
+          <ChevronRight color={page < maxPages ? "primary" : "disabled"} />
+        </IconButton>
+      </Layout.FlexBox>
     </Layout.FlexBox>
   );
 };
diff --git a/admin_app/src/app/content/page.tsx b/admin_app/src/app/content/page.tsx
@@ -117,7 +117,7 @@ const CardsPage = () => {
           <Layout.FlexBox
             sx={{
               alignItems: "center",
-              paddingTop: 6,
+              paddingTop: 5,
               paddingInline: 4,
             }}
           >
@@ -271,7 +271,7 @@ const CardsUtilityStrip: React.FC<CardsUtilityStripProps> = ({
         sx={{
           flexDirection: "row",
           alignSelf: "flex-end",
-          px: sizes.baseGap,
+          alignItems: "center",
           gap: sizes.smallGap,
         }}
       >
@@ -553,7 +553,15 @@ const CardsGrid = ({
     <>
       <Paper
         elevation={0}
-        sx={{ minHeight: "60vh", width: "100%", border: 1, borderColor: "lightgrey" }}
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          minHeight: "60vh",
+          width: "100%",
+          border: 0.5,
+          borderColor: "lightgrey",
+        }}
       >
         <Grid container>
           {cards.length === 0 ? (
@@ -626,7 +634,7 @@ const CardsGrid = ({
           )}
         </Grid>
       </Paper>
-      <Layout.Spacer multiplier={1} />
+      <Layout.Spacer multiplier={0.75} />
       <PageNavigation page={page} setPage={setPage} maxPages={maxPages} />
     </>
   );

diff --git a/admin_app/src/app/dashboard/components/Sidebar.tsx b/admin_app/src/app/dashboard/components/Sidebar.tsx
@@ -82,7 +82,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SideBarProps>(
   ({ open, setOpen, setDashboardPage, selectedDashboardPage }, ref) => {
     return (
       <Drawer open={open} variant="permanent" ref={ref}>
-        <List sx={{ paddingTop: 13 }}>
+        <List sx={{ paddingTop: 12 }}>
           <Box
             sx={{
               display: "flex",

diff --git a/admin_app/src/app/dashboard/components/overview/AreaChart.tsx b/admin_app/src/app/dashboard/components/overview/AreaChart.tsx
@@ -13,6 +13,7 @@ const AreaChart = ({ data }: { data: any }) => {
     chart: {
       id: "usage-timeseries",
       stacked: true,
+      fontFamily: "Inter",
     },
     dataLabels: {
       enabled: false,

diff --git a/admin_app/src/app/dashboard/components/overview/HeatMap.tsx b/admin_app/src/app/dashboard/components/overview/HeatMap.tsx
@@ -13,6 +13,7 @@ const HeatMap = ({ data }: { data: any }) => {
       id: "usage-heatmap",
       width: "100%",
       height: "100%",
+      fontFamily: "Inter",
     },
     dataLabels: {
       enabled: false,
@@ -25,8 +26,8 @@ const HeatMap = ({ data }: { data: any }) => {
       floating: false,
       style: {
         fontSize: "16px",
-        fontWeight: "bold",
-        fontFamily: undefined,
+        fontWeight: 500,
+        fontFamily: "Inter",
         color: "#263238",
       },
     },

diff --git a/admin_app/src/app/dashboard/components/overview/TopContentTable.tsx b/admin_app/src/app/dashboard/components/overview/TopContentTable.tsx
@@ -115,17 +115,13 @@ const TopContentTable = ({ rows }: { rows: TopContentData[] }) => {
         variant="h6"
         gutterBottom
         component="div"
-        sx={{ p: 3, py: 2, fontWeight: "bold" }}
+        sx={{ p: 3, py: 2, fontWeight: 500 }}
       >
         Most Sent Content
       </Typography>
       <Box sx={{ mx: 3 }}>
         <TableContainer component={Paper}>
-          <Table
-            sx={{ minWidth: 700 }}
-            size="small"
-            aria-label="top-content-table"
-          >
+          <Table sx={{ minWidth: 700 }} size="small" aria-label="top-content-table">
             <TableHead>
               <TableRow>
                 <StyledTableCell>Content</StyledTableCell>
@@ -161,9 +157,7 @@ const TopContentTable = ({ rows }: { rows: TopContentData[] }) => {
                   <StyledTableCell align="right">
                     {format(new Date(row.last_updated), "yyyy-MM-dd HH:mm")}
                   </StyledTableCell>
-                  <StyledTableCell align="right">
-                    {row.query_count}
-                  </StyledTableCell>
+                  <StyledTableCell align="right">{row.query_count}</StyledTableCell>
                   <StyledTableCell align="right" sx={{ width: 500 }}>
                     <UpvoteDownvoteBarChart
                       positiveVotes={row.positive_votes}

diff --git a/admin_app/src/app/dashboard/components/performance/DetailsDrawer.tsx b/admin_app/src/app/dashboard/components/performance/DetailsDrawer.tsx
@@ -31,6 +31,7 @@ const ContentLineChart = ({ seriesData }: { seriesData: any }) => {
       zoom: {
         enabled: false,
       },
+      fontFamily: "Inter",
     },
     stroke: {
       width: 3,

diff --git a/admin_app/src/app/dashboard/components/performance/LineChart.tsx b/admin_app/src/app/dashboard/components/performance/LineChart.tsx
@@ -22,14 +22,15 @@ const LineChart = ({
       text: `Top content in the last ${timePeriod}`,
       align: "left",
       style: {
-        fontSize: "25px",
-        fontWeight: 400,
+        fontSize: "18px",
+        fontWeight: 500,
         color: appColors.black,
       },
     },
     chart: {
       id: "content-performance-timeseries",
       stacked: false,
+      fontFamily: "Inter",
     },
     dataLabels: {
       enabled: false,

diff --git a/admin_app/src/app/dashboard/page.tsx b/admin_app/src/app/dashboard/page.tsx
@@ -8,17 +8,26 @@ import { Period, drawerWidth } from "./types";
 import Overview from "@/app/dashboard/components/Overview";
 import ContentPerformance from "@/app/dashboard/components/ContentPerformance";
 import { appColors } from "@/utils";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
 
 type Page = {
   name: PageName;
   description: string;
 };
 
 const pages: Page[] = [
-  { name: "Overview", description: "Overview of the dashboard" },
-  { name: "Content Performance", description: "Performance of your content" },
-  { name: "Content Gaps", description: "Identify gaps in your content" },
+  {
+    name: "Overview",
+    description: "Overview of user engagement and satisfaction",
+  },
+  {
+    name: "Content Performance",
+    description: "Track performance of contents  and identify areas for improvement",
+  },
+  {
+    name: "Content Gaps",
+    description:
+      "Find out what users are asking about to inform creating and updating contents",
+  },
 ];
 
 const Dashboard: React.FC = () => {
@@ -66,26 +75,24 @@ const Dashboard: React.FC = () => {
     <Box
       sx={{
         display: "flex",
-        marginTop: 4,
+        paddingTop: 5,
         flexDirection: "row",
         minWidth: "900px",
         maxWidth: "1900px",
       }}
     >
-      <ClickAwayListener onClickAway={() => setSideBarOpen(false)}>
-        <Sidebar
-          open={sideBarOpen}
-          setOpen={setSideBarOpen}
-          setDashboardPage={(pageName: PageName) => {
-            const page = pages.find((p) => p.name === pageName);
-            if (page) setDashboardPage(page);
-          }}
-          selectedDashboardPage={dashboardPage.name}
-        />
-      </ClickAwayListener>
+      <Sidebar
+        open={sideBarOpen}
+        setOpen={setSideBarOpen}
+        setDashboardPage={(pageName: PageName) => {
+          const page = pages.find((p) => p.name === pageName);
+          if (page) setDashboardPage(page);
+        }}
+        selectedDashboardPage={dashboardPage.name}
+      />
       <Box
         sx={{
-          px: 3,
+          paddingInline: 3,
           height: "100%",
           flexGrow: 1,
           width: `calc(100% - ${sideBarOpen ? drawerWidth : 0}px)`,
@@ -113,7 +120,7 @@ const Dashboard: React.FC = () => {
             <Typography variant="h4" color={appColors.primary}>
               {dashboardPage.name}
             </Typography>
-            <Typography variant="body1" align="left">
+            <Typography variant="body1" align="left" color={appColors.darkGrey}>
               {dashboardPage.description}
             </Typography>
           </Box>

diff --git a/admin_app/src/app/integrations/page.tsx b/admin_app/src/app/integrations/page.tsx
@@ -25,7 +25,7 @@ const IntegrationsPage = () => {
     <Layout.FlexBox sx={{ alignItems: "center" }}>
       <Box
         sx={{
-          paddingTop: 6,
+          paddingTop: 5,
           paddingBottom: 10,
           paddingInline: 4,
           maxWidth: "lg",
@@ -116,13 +116,27 @@ const KeyManagement = ({
       <Layout.FlexBox
         flexDirection="column"
         justifyContent="space-between"
-        gap={sizes.doubleBaseGap}
+        gap={sizes.baseGap}
       >
-        <Typography variant="body1">
+        <Typography variant="body1" color={appColors.darkGrey}>
           You will need your API key to interact with AAQ from your chat manager. You
           can generate a new key here, but keep in mind that any old key is invalidated
           if a new key is created.
         </Typography>
+        <Typography variant="body1" color={appColors.darkGrey}>
+          Daily API limit is 100.{" "}
+          <a
+            href="https://docs.ask-a-question.com/latest/contact_us/"
+            style={{
+              textDecoration: "underline",
+              textDecorationColor: appColors.darkGrey,
+              color: appColors.darkGrey,
+            }}
+          >
+            Contact us
+          </a>{" "}
+          for more.
+        </Typography>
         <Layout.FlexBox
           flexDirection="column"
           alignItems={"center"}
@@ -191,7 +205,7 @@ const Connections = () => {
       <Typography variant="h4" color="primary">
         Connections
       </Typography>
-      <Typography variant="body1">
+      <Typography variant="body1" color={appColors.darkGrey}>
         Click on the connection of your choice to see instructions on how to use it with
         AAQ.
       </Typography>

diff --git a/admin_app/src/app/layout.tsx b/admin_app/src/app/layout.tsx
@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Ask A Question",
-  description: "Admin application to manage content and glean insights",
+  description: "Trustworthy answers for communities. Actionable insights for you.",
 };
 
 export default function RootLayout({

diff --git a/admin_app/src/app/urgency-rules/page.tsx b/admin_app/src/app/urgency-rules/page.tsx
@@ -172,7 +172,7 @@ const UrgencyRulesPage = () => {
         <Layout.FlexBox
           sx={{
             alignItems: "center",
-            paddingTop: 6,
+            paddingTop: 5,
             paddingInline: 4,
             gap: sizes.baseGap,
             height: "95vh",
@@ -226,13 +226,15 @@ const UrgencyRulesPage = () => {
             </Layout.FlexBox>
             <Layout.Spacer />
             <Paper
-              elevation={2}
+              elevation={0}
               sx={{
                 paddingTop: 1,
                 paddingBottom: 10,
                 paddingInline: 3,
                 height: "65vh",
                 overflowY: "auto",
+                border: 0.5,
+                borderColor: "lightgrey",
               }}
             >
               {items.length === 0 ? (

diff --git a/admin_app/src/components/NavBar.tsx b/admin_app/src/components/NavBar.tsx
@@ -257,11 +257,9 @@ const UserDropdown = () => {
         <MenuItem disabled>
           <Typography textAlign="center">{persistedUser}</Typography>
         </MenuItem>
-        {settings.map((setting) => (
-          <MenuItem key={setting} onClick={logout}>
-            <Typography textAlign="center">{setting}</Typography>
-          </MenuItem>
-        ))}
+        <MenuItem key={"logout"} onClick={logout}>
+          <Typography textAlign="center">Logout</Typography>
+        </MenuItem>
       </Menu>
     </Box>
   );