From a26a9a868bb75932849b3f14b2009bf0d37f88d8 Mon Sep 17 00:00:00 2001 From: amir_emami Date: Fri, 30 Aug 2024 17:48:29 +0530 Subject: [PATCH] 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 <7042047+suzinyou@users.noreply.github.com> --- .../app/content/components/PageNavigation.tsx | 68 +++++++++++++------ admin_app/src/app/content/page.tsx | 16 +++-- .../src/app/dashboard/components/Sidebar.tsx | 2 +- .../components/overview/AreaChart.tsx | 1 + .../dashboard/components/overview/HeatMap.tsx | 5 +- .../components/overview/TopContentTable.tsx | 12 +--- .../components/performance/DetailsDrawer.tsx | 1 + .../components/performance/LineChart.tsx | 5 +- admin_app/src/app/dashboard/page.tsx | 43 +++++++----- admin_app/src/app/integrations/page.tsx | 22 ++++-- admin_app/src/app/layout.tsx | 2 +- admin_app/src/app/urgency-rules/page.tsx | 6 +- admin_app/src/components/NavBar.tsx | 8 +-- docs/contact_us.md | 4 +- 14 files changed, 123 insertions(+), 72 deletions(-) diff --git a/admin_app/src/app/content/components/PageNavigation.tsx b/admin_app/src/app/content/components/PageNavigation.tsx index a2333e5dc..aa9b0b9bd 100644 --- 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 = ({ - { - page > 1 && setPage(page - 1); - }} - disabled={page <= 1} - sx={{ borderRadius: "50%", height: "30px", width: "30px" }} + - 1 ? "primary" : "disabled"} /> - - - - {maxPages === 0 ? 0 : page} of {maxPages} + Content limit is 50.{" "} + + Contact us + {" "} + for more. - - { - page < maxPages && setPage(page + 1); - }} - disabled={page >= maxPages} - sx={{ borderRadius: "50%", height: "30px", width: "30px" }} - > - - + + { + page > 1 && setPage(page - 1); + }} + disabled={page <= 1} + sx={{ borderRadius: "50%", height: "30px", width: "30px" }} + > + 1 ? "primary" : "disabled"} /> + + + + {maxPages === 0 ? 0 : page} of {maxPages} + + + { + page < maxPages && setPage(page + 1); + }} + disabled={page >= maxPages} + sx={{ borderRadius: "50%", height: "30px", width: "30px" }} + > + + + ); }; diff --git a/admin_app/src/app/content/page.tsx b/admin_app/src/app/content/page.tsx index 4c6f27ff7..0749d7ca7 100644 --- a/admin_app/src/app/content/page.tsx +++ b/admin_app/src/app/content/page.tsx @@ -117,7 +117,7 @@ const CardsPage = () => { @@ -271,7 +271,7 @@ const CardsUtilityStrip: React.FC = ({ sx={{ flexDirection: "row", alignSelf: "flex-end", - px: sizes.baseGap, + alignItems: "center", gap: sizes.smallGap, }} > @@ -553,7 +553,15 @@ const CardsGrid = ({ <> {cards.length === 0 ? ( @@ -626,7 +634,7 @@ const CardsGrid = ({ )} - + ); diff --git a/admin_app/src/app/dashboard/components/Sidebar.tsx b/admin_app/src/app/dashboard/components/Sidebar.tsx index 009960b9d..c471f9a8a 100644 --- 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( ({ open, setOpen, setDashboardPage, selectedDashboardPage }, ref) => { return ( - + { 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 index ac8b190d0..3ea29d797 100644 --- 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 index 89aca5118..f1ed181e6 100644 --- 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 - +
Content @@ -161,9 +157,7 @@ const TopContentTable = ({ rows }: { rows: TopContentData[] }) => { {format(new Date(row.last_updated), "yyyy-MM-dd HH:mm")} - - {row.query_count} - + {row.query_count} { 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 index eb3445655..d06ae8fd5 100644 --- 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 index bb12f9be3..e6fb9f759 100644 --- a/admin_app/src/app/dashboard/page.tsx +++ b/admin_app/src/app/dashboard/page.tsx @@ -8,7 +8,6 @@ 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; @@ -16,9 +15,19 @@ type Page = { }; 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 = () => { - setSideBarOpen(false)}> - { - const page = pages.find((p) => p.name === pageName); - if (page) setDashboardPage(page); - }} - selectedDashboardPage={dashboardPage.name} - /> - + { + const page = pages.find((p) => p.name === pageName); + if (page) setDashboardPage(page); + }} + selectedDashboardPage={dashboardPage.name} + /> { {dashboardPage.name} - + {dashboardPage.description} diff --git a/admin_app/src/app/integrations/page.tsx b/admin_app/src/app/integrations/page.tsx index 27cc26098..a847da6f8 100644 --- a/admin_app/src/app/integrations/page.tsx +++ b/admin_app/src/app/integrations/page.tsx @@ -25,7 +25,7 @@ const IntegrationsPage = () => { - + 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. + + Daily API limit is 100.{" "} + + Contact us + {" "} + for more. + { Connections - + Click on the connection of your choice to see instructions on how to use it with AAQ. diff --git a/admin_app/src/app/layout.tsx b/admin_app/src/app/layout.tsx index 9d966376d..6a19bb451 100644 --- 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 index 3b7cb5f29..fab146f13 100644 --- a/admin_app/src/app/urgency-rules/page.tsx +++ b/admin_app/src/app/urgency-rules/page.tsx @@ -172,7 +172,7 @@ const UrgencyRulesPage = () => { { {items.length === 0 ? ( diff --git a/admin_app/src/components/NavBar.tsx b/admin_app/src/components/NavBar.tsx index 7a64fb80f..f907c1414 100644 --- a/admin_app/src/components/NavBar.tsx +++ b/admin_app/src/components/NavBar.tsx @@ -257,11 +257,9 @@ const UserDropdown = () => { {persistedUser} - {settings.map((setting) => ( - - {setting} - - ))} + + Logout + ); diff --git a/docs/contact_us.md b/docs/contact_us.md index a543f8d0b..09c0c18f9 100644 --- a/docs/contact_us.md +++ b/docs/contact_us.md @@ -7,6 +7,7 @@ tanmay
Tanmay Verma
Product Manager
+ AAQ Help and Support: [aaq@idinsight.org](mailto:aaq@idinsight.org)
[tanmay.verma@idinsight.org](mailto:tanmay.verma@idinsight.org)

@@ -41,9 +42,8 @@ Data Scientist
[amir.emami@idinsight.org](mailto:amir.emami@idinsight.org)

- + !!! info "We are part of IDinsight's DSEM team" Read more about DSEM and our work [here](https://www.idinsight.org/methodology/data-science/). -