Tweak layout of CM activity charts

online-go · Mar 22, 2024 · 07ec965 · 07ec965
1 parent dab9f2d
commit 07ec965
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
                 }}