From 07ec96513ef5a7065d997ec9534d10a1afc8280c Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Sat, 23 Mar 2024 10:13:38 +1030
Subject: [PATCH] Tweak layout of CM activity charts

---
 src/views/User/ActivityCard.tsx          | 20 +++++++++++---------
 src/views/User/User.styl                 |  2 +-
 src/views/User/UserVoteActionSummary.tsx |  6 +++---
 src/views/User/VoteActivityGraph.tsx     |  5 +++--
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/views/User/ActivityCard.tsx b/src/views/User/ActivityCard.tsx
index 32666527ae..301088297b 100644
--- a/src/views/User/ActivityCard.tsx
+++ b/src/views/User/ActivityCard.tsx
@@ -178,19 +178,21 @@ export function ActivityCard({
                                     ),
                                 )
                                 .map(([report_type, _flag]) => (
-                                    <div className="mod-graph-header" key={report_type}>
-                                        {interpolate(
-                                            pgettext(
-                                                "header for a graph showing breakdown of moderator's vote outcomes",
-                                                "vote outcomes: {{report_type}}",
-                                            ),
-                                            { report_type },
-                                        )}
+                                    <>
+                                        <div className="mod-graph-header" key={report_type}>
+                                            {interpolate(
+                                                pgettext(
+                                                    "header for a graph showing breakdown of moderator's vote outcomes",
+                                                    "vote outcomes: {{report_type}}",
+                                                ),
+                                                { report_type },
+                                            )}
+                                        </div>
                                         <UserVoteActionSummary
                                             user_id={user.id}
                                             report_type={report_type as ReportType}
                                         />
-                                    </div>
+                                    </>
                                 ))}
                         </>
                     )}
diff --git a/src/views/User/User.styl b/src/views/User/User.styl
index 6de82ed6a7..f9c3068fc2 100644
--- a/src/views/User/User.styl
+++ b/src/views/User/User.styl
@@ -50,7 +50,7 @@
     }
 
     .mod-graph-header {
-        margin: 0.5rem 0 5px 0.5rem !important;
+        margin: 0.5rem 0 0.5rem 0.5rem !important;
     }
 
     .vote-activity-graph {
diff --git a/src/views/User/UserVoteActionSummary.tsx b/src/views/User/UserVoteActionSummary.tsx
index 3b2a8d6bee..8d04649f9b 100644
--- a/src/views/User/UserVoteActionSummary.tsx
+++ b/src/views/User/UserVoteActionSummary.tsx
@@ -51,10 +51,10 @@ const VoteSummaryPie = ({ summary_data }: VoteSummaryPieProps) => {
     const chart_theme =
         data.get("theme") === "light" // (Accessible theme TBD - this assumes accessible is dark for now)
             ? {
-                  /* nivo defaults work well with our light theme */
+                  grid: { line: { stroke: "#bbbbbb" } },
               }
             : {
-                  text: { fill: "#FFFFFF" },
+                  text: { fill: "#bbbbbb" },
                   tooltip: { container: { color: "#111111" } },
                   grid: { line: { stroke: "#444444" } },
               };
@@ -68,7 +68,7 @@ const VoteSummaryPie = ({ summary_data }: VoteSummaryPieProps) => {
                 data={chart_data}
                 animate
                 enableArcLabels={false}
-                margin={{ top: 5, right: 100, bottom: 30, left: 100 }}
+                margin={{ top: 20, right: 100, bottom: 30, left: 120 }}
                 theme={chart_theme}
             />
         </div>
diff --git a/src/views/User/VoteActivityGraph.tsx b/src/views/User/VoteActivityGraph.tsx
index bb7c1fda69..4bc88afb30 100644
--- a/src/views/User/VoteActivityGraph.tsx
+++ b/src/views/User/VoteActivityGraph.tsx
@@ -57,10 +57,10 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
     const chart_theme =
         data.get("theme") === "light" // (Accessible theme TBD - this assumes accessible is dark for now)
             ? {
-                  /* nivo defaults work well with our light theme */
+                  grid: { line: { stroke: "#bbbbbb" } },
               }
             : {
-                  text: { fill: "#FFFFFF" },
+                  text: { fill: "#bbbbbb" },
                   tooltip: { container: { color: "#111111" } },
                   grid: { line: { stroke: "#444444" } },
               };
@@ -88,6 +88,7 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
                     type: "time",
                     useUTC: false,
                 }}
+                enableGridX={false}
                 axisLeft={{
                     tickValues: 6,
                 }}