Skip to content

Commit a26a9a8

Browse files
amiraliemamisuzinyou
amiraliemami
and
suzinyou
committed
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>
1 parent a1d1e83 commit a26a9a8

File tree

14 files changed

+123
-72
lines changed

14 files changed

+123
-72
lines changed

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

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import { Layout } from "@/components/Layout";
3+
import { appColors } from "@/utils";
34
import { ChevronLeft, ChevronRight } from "@mui/icons-material";
45
import { IconButton, Typography } from "@mui/material";
56
import React from "react";
@@ -19,31 +20,54 @@ export const PageNavigation: React.FC<PageNavigationProps> = ({
1920
<Layout.FlexBox
2021
flexDirection={"row"}
2122
alignItems={"center"}
22-
justifyContent={"center"}
23+
justifyContent={"space-between"}
24+
width={"100%"}
25+
flexWrap={"wrap"}
2326
>
24-
<IconButton
25-
onClick={() => {
26-
page > 1 && setPage(page - 1);
27-
}}
28-
disabled={page <= 1}
29-
sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
27+
<Typography
28+
variant="body1"
29+
color={appColors.darkGrey}
30+
width={"45%"}
31+
minWidth={"300px"}
3032
>
31-
<ChevronLeft color={page > 1 ? "primary" : "disabled"} />
32-
</IconButton>
33-
<Layout.Spacer horizontal multiplier={0.5} />
34-
<Typography variant="subtitle2">
35-
{maxPages === 0 ? 0 : page} of {maxPages}
33+
Content limit is 50.{" "}
34+
<a
35+
href="https://docs.ask-a-question.com/latest/contact_us/"
36+
style={{
37+
textDecoration: "underline",
38+
textDecorationColor: appColors.darkGrey,
39+
color: appColors.darkGrey,
40+
}}
41+
>
42+
Contact us
43+
</a>{" "}
44+
for more.
3645
</Typography>
37-
<Layout.Spacer horizontal multiplier={0.5} />
38-
<IconButton
39-
onClick={() => {
40-
page < maxPages && setPage(page + 1);
41-
}}
42-
disabled={page >= maxPages}
43-
sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
44-
>
45-
<ChevronRight color={page < maxPages ? "primary" : "disabled"} />
46-
</IconButton>
46+
<Layout.FlexBox flexDirection={"row"} alignItems={"center"} width={"55%"}>
47+
<IconButton
48+
onClick={() => {
49+
page > 1 && setPage(page - 1);
50+
}}
51+
disabled={page <= 1}
52+
sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
53+
>
54+
<ChevronLeft color={page > 1 ? "primary" : "disabled"} />
55+
</IconButton>
56+
<Layout.Spacer horizontal multiplier={0.5} />
57+
<Typography variant="subtitle2">
58+
{maxPages === 0 ? 0 : page} of {maxPages}
59+
</Typography>
60+
<Layout.Spacer horizontal multiplier={0.5} />
61+
<IconButton
62+
onClick={() => {
63+
page < maxPages && setPage(page + 1);
64+
}}
65+
disabled={page >= maxPages}
66+
sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
67+
>
68+
<ChevronRight color={page < maxPages ? "primary" : "disabled"} />
69+
</IconButton>
70+
</Layout.FlexBox>
4771
</Layout.FlexBox>
4872
);
4973
};

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const CardsPage = () => {
117117
<Layout.FlexBox
118118
sx={{
119119
alignItems: "center",
120-
paddingTop: 6,
120+
paddingTop: 5,
121121
paddingInline: 4,
122122
}}
123123
>
@@ -271,7 +271,7 @@ const CardsUtilityStrip: React.FC<CardsUtilityStripProps> = ({
271271
sx={{
272272
flexDirection: "row",
273273
alignSelf: "flex-end",
274-
px: sizes.baseGap,
274+
alignItems: "center",
275275
gap: sizes.smallGap,
276276
}}
277277
>
@@ -553,7 +553,15 @@ const CardsGrid = ({
553553
<>
554554
<Paper
555555
elevation={0}
556-
sx={{ minHeight: "60vh", width: "100%", border: 1, borderColor: "lightgrey" }}
556+
sx={{
557+
display: "flex",
558+
flexDirection: "column",
559+
justifyContent: "space-between",
560+
minHeight: "60vh",
561+
width: "100%",
562+
border: 0.5,
563+
borderColor: "lightgrey",
564+
}}
557565
>
558566
<Grid container>
559567
{cards.length === 0 ? (
@@ -626,7 +634,7 @@ const CardsGrid = ({
626634
)}
627635
</Grid>
628636
</Paper>
629-
<Layout.Spacer multiplier={1} />
637+
<Layout.Spacer multiplier={0.75} />
630638
<PageNavigation page={page} setPage={setPage} maxPages={maxPages} />
631639
</>
632640
);

‎admin_app/src/app/dashboard/components/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SideBarProps>(
8282
({ open, setOpen, setDashboardPage, selectedDashboardPage }, ref) => {
8383
return (
8484
<Drawer open={open} variant="permanent" ref={ref}>
85-
<List sx={{ paddingTop: 13 }}>
85+
<List sx={{ paddingTop: 12 }}>
8686
<Box
8787
sx={{
8888
display: "flex",

‎admin_app/src/app/dashboard/components/overview/AreaChart.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const AreaChart = ({ data }: { data: any }) => {
1313
chart: {
1414
id: "usage-timeseries",
1515
stacked: true,
16+
fontFamily: "Inter",
1617
},
1718
dataLabels: {
1819
enabled: false,

‎admin_app/src/app/dashboard/components/overview/HeatMap.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const HeatMap = ({ data }: { data: any }) => {
1313
id: "usage-heatmap",
1414
width: "100%",
1515
height: "100%",
16+
fontFamily: "Inter",
1617
},
1718
dataLabels: {
1819
enabled: false,
@@ -25,8 +26,8 @@ const HeatMap = ({ data }: { data: any }) => {
2526
floating: false,
2627
style: {
2728
fontSize: "16px",
28-
fontWeight: "bold",
29-
fontFamily: undefined,
29+
fontWeight: 500,
30+
fontFamily: "Inter",
3031
color: "#263238",
3132
},
3233
},

‎admin_app/src/app/dashboard/components/overview/TopContentTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,17 +115,13 @@ const TopContentTable = ({ rows }: { rows: TopContentData[] }) => {
115115
variant="h6"
116116
gutterBottom
117117
component="div"
118-
sx={{ p: 3, py: 2, fontWeight: "bold" }}
118+
sx={{ p: 3, py: 2, fontWeight: 500 }}
119119
>
120120
Most Sent Content
121121
</Typography>
122122
<Box sx={{ mx: 3 }}>
123123
<TableContainer component={Paper}>
124-
<Table
125-
sx={{ minWidth: 700 }}
126-
size="small"
127-
aria-label="top-content-table"
128-
>
124+
<Table sx={{ minWidth: 700 }} size="small" aria-label="top-content-table">
129125
<TableHead>
130126
<TableRow>
131127
<StyledTableCell>Content</StyledTableCell>
@@ -161,9 +157,7 @@ const TopContentTable = ({ rows }: { rows: TopContentData[] }) => {
161157
<StyledTableCell align="right">
162158
{format(new Date(row.last_updated), "yyyy-MM-dd HH:mm")}
163159
</StyledTableCell>
164-
<StyledTableCell align="right">
165-
{row.query_count}
166-
</StyledTableCell>
160+
<StyledTableCell align="right">{row.query_count}</StyledTableCell>
167161
<StyledTableCell align="right" sx={{ width: 500 }}>
168162
<UpvoteDownvoteBarChart
169163
positiveVotes={row.positive_votes}

‎admin_app/src/app/dashboard/components/performance/DetailsDrawer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const ContentLineChart = ({ seriesData }: { seriesData: any }) => {
3131
zoom: {
3232
enabled: false,
3333
},
34+
fontFamily: "Inter",
3435
},
3536
stroke: {
3637
width: 3,

‎admin_app/src/app/dashboard/components/performance/LineChart.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,15 @@ const LineChart = ({
2222
text: `Top content in the last ${timePeriod}`,
2323
align: "left",
2424
style: {
25-
fontSize: "25px",
26-
fontWeight: 400,
25+
fontSize: "18px",
26+
fontWeight: 500,
2727
color: appColors.black,
2828
},
2929
},
3030
chart: {
3131
id: "content-performance-timeseries",
3232
stacked: false,
33+
fontFamily: "Inter",
3334
},
3435
dataLabels: {
3536
enabled: false,

‎admin_app/src/app/dashboard/page.tsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,26 @@ import { Period, drawerWidth } from "./types";
88
import Overview from "@/app/dashboard/components/Overview";
99
import ContentPerformance from "@/app/dashboard/components/ContentPerformance";
1010
import { appColors } from "@/utils";
11-
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
1211

1312
type Page = {
1413
name: PageName;
1514
description: string;
1615
};
1716

1817
const pages: Page[] = [
19-
{ name: "Overview", description: "Overview of the dashboard" },
20-
{ name: "Content Performance", description: "Performance of your content" },
21-
{ name: "Content Gaps", description: "Identify gaps in your content" },
18+
{
19+
name: "Overview",
20+
description: "Overview of user engagement and satisfaction",
21+
},
22+
{
23+
name: "Content Performance",
24+
description: "Track performance of contents and identify areas for improvement",
25+
},
26+
{
27+
name: "Content Gaps",
28+
description:
29+
"Find out what users are asking about to inform creating and updating contents",
30+
},
2231
];
2332

2433
const Dashboard: React.FC = () => {
@@ -66,26 +75,24 @@ const Dashboard: React.FC = () => {
6675
<Box
6776
sx={{
6877
display: "flex",
69-
marginTop: 4,
78+
paddingTop: 5,
7079
flexDirection: "row",
7180
minWidth: "900px",
7281
maxWidth: "1900px",
7382
}}
7483
>
75-
<ClickAwayListener onClickAway={() => setSideBarOpen(false)}>
76-
<Sidebar
77-
open={sideBarOpen}
78-
setOpen={setSideBarOpen}
79-
setDashboardPage={(pageName: PageName) => {
80-
const page = pages.find((p) => p.name === pageName);
81-
if (page) setDashboardPage(page);
82-
}}
83-
selectedDashboardPage={dashboardPage.name}
84-
/>
85-
</ClickAwayListener>
84+
<Sidebar
85+
open={sideBarOpen}
86+
setOpen={setSideBarOpen}
87+
setDashboardPage={(pageName: PageName) => {
88+
const page = pages.find((p) => p.name === pageName);
89+
if (page) setDashboardPage(page);
90+
}}
91+
selectedDashboardPage={dashboardPage.name}
92+
/>
8693
<Box
8794
sx={{
88-
px: 3,
95+
paddingInline: 3,
8996
height: "100%",
9097
flexGrow: 1,
9198
width: `calc(100% - ${sideBarOpen ? drawerWidth : 0}px)`,
@@ -113,7 +120,7 @@ const Dashboard: React.FC = () => {
113120
<Typography variant="h4" color={appColors.primary}>
114121
{dashboardPage.name}
115122
</Typography>
116-
<Typography variant="body1" align="left">
123+
<Typography variant="body1" align="left" color={appColors.darkGrey}>
117124
{dashboardPage.description}
118125
</Typography>
119126
</Box>

‎admin_app/src/app/integrations/page.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const IntegrationsPage = () => {
2525
<Layout.FlexBox sx={{ alignItems: "center" }}>
2626
<Box
2727
sx={{
28-
paddingTop: 6,
28+
paddingTop: 5,
2929
paddingBottom: 10,
3030
paddingInline: 4,
3131
maxWidth: "lg",
@@ -116,13 +116,27 @@ const KeyManagement = ({
116116
<Layout.FlexBox
117117
flexDirection="column"
118118
justifyContent="space-between"
119-
gap={sizes.doubleBaseGap}
119+
gap={sizes.baseGap}
120120
>
121-
<Typography variant="body1">
121+
<Typography variant="body1" color={appColors.darkGrey}>
122122
You will need your API key to interact with AAQ from your chat manager. You
123123
can generate a new key here, but keep in mind that any old key is invalidated
124124
if a new key is created.
125125
</Typography>
126+
<Typography variant="body1" color={appColors.darkGrey}>
127+
Daily API limit is 100.{" "}
128+
<a
129+
href="https://docs.ask-a-question.com/latest/contact_us/"
130+
style={{
131+
textDecoration: "underline",
132+
textDecorationColor: appColors.darkGrey,
133+
color: appColors.darkGrey,
134+
}}
135+
>
136+
Contact us
137+
</a>{" "}
138+
for more.
139+
</Typography>
126140
<Layout.FlexBox
127141
flexDirection="column"
128142
alignItems={"center"}
@@ -191,7 +205,7 @@ const Connections = () => {
191205
<Typography variant="h4" color="primary">
192206
Connections
193207
</Typography>
194-
<Typography variant="body1">
208+
<Typography variant="body1" color={appColors.darkGrey}>
195209
Click on the connection of your choice to see instructions on how to use it with
196210
AAQ.
197211
</Typography>

0 commit comments

Comments
 (0)