From 2c00caf2094c7deea66e4f0de732b26a5584c8b5 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Fri, 22 Apr 2022 19:11:09 +0200
Subject: [PATCH] better radio buttons

---
 src/components/MonthlyGraphs.js | 52 ++++++++++++++++++++++-----------
 src/pages/MonthlyStats.js       | 34 ++++++++++++++-------
 2 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/components/MonthlyGraphs.js b/src/components/MonthlyGraphs.js
index 6567d5c..64797f9 100644
--- a/src/components/MonthlyGraphs.js
+++ b/src/components/MonthlyGraphs.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { VictoryPie } from 'victory';
-import { RadioGroup, Radio } from "@mantine/core";
+import { SegmentedControl } from "@mantine/core";
 
 const MonthlyGraphs = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
-  const [activeGraph, setGraph] = useState(1);
+  const [activeGraph, setGraph] = useState(2);
 
   let totalGraphs = 0;
 
@@ -381,24 +381,42 @@ const MonthlyGraphs = (obj) => {
     thisColour = "orange";
   }
 
+  let dataRow = [];
+  if (totalGraphs && stakeObj) {
+    dataRow.push({ label: 'Stake', value: '1' });
+  }
+  if (totalGraphs && earningsObj) {
+    dataRow.push({ label: 'Earnings', value: '2' });
+  }
+  if (totalGraphs && broadcasterObj) {
+    dataRow.push({ label: 'Broadcasters', value: '3' });
+  }
+
   return (
     <div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0 }}>
-      <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
+      <div className="row" style={{ margin: 0 }}>
         {totalGraphs > 1 ?
-          <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
-            <RadioGroup
-              value={activeGraph}
-              onChange={setGraph}
-              spacing="lg"
-              size="lg"
-              color={thisColour}
-              required
-            >
-              {(totalGraphs && stakeObj) ? <Radio value="1" label="Stake" /> : null}
-              {(totalGraphs && earningsObj) ? <Radio value="2" label="Earnings" /> : null}
-              {(totalGraphs && broadcasterObj) ? <Radio value="3" label="Broadcasters" /> : null}
-            </RadioGroup>
-          </div>
+          <SegmentedControl
+            styles={{
+              root: { backgroundColor: 'rgba(103, 103, 103, 0.6)' },
+              label: { color: 'black' },
+              labelActive: { color: 'black' },
+              input: { color: 'black' },
+              control: { color: 'black' },
+              controlActive: {},
+              active: { color: 'black' },
+              disabled: {},
+            }}
+            value={activeGraph}
+            onChange={setGraph}
+            radius="md"
+            spacing="lg"
+            size="lg"
+            transitionDuration={200}
+            transitionTimingFunction="linear"
+            color={thisColour}
+            data={dataRow}
+          />
           : null}
       </div>
       <div className="row" style={{ marginTop: '1em', marginBottom: '1em', minHeight: '70vh', height: '100%' }}>
diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js
index 2f3cb4d..1648de4 100644
--- a/src/pages/MonthlyStats.js
+++ b/src/pages/MonthlyStats.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import MonthlyFactoids from '../components/MonthlyFactoids';
 import MonthlyGraphs from '../components/MonthlyGraphs';
 import MonthlyOrchestrators from '../components/MonthlyOrchestrators';
-import { RadioGroup, Radio } from "@mantine/core";
+import { SegmentedControl } from "@mantine/core";
 
 const MonthlyStats = (obj) => {
-  const [activePage, setPage] = useState(0);
+  const [activePage, setPage] = useState(1);
 
   let thisColour;
   if (activePage == 1) {
@@ -18,20 +18,32 @@ const MonthlyStats = (obj) => {
 
   return (
     <div className="stroke" key={obj.seed + "menu"}>
-      <div className="verticalDivider" />
-      <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
-        <RadioGroup
+      <div className="row" style={{ margin: '0' }}>
+        <SegmentedControl
+          styles={{
+            root: { backgroundColor: 'rgba(103, 103, 103, 0.6)' },
+            label: { color: 'black' },
+            labelActive: { color: 'black' },
+            input: { color: 'black' },
+            control: { color: 'black' },
+            controlActive: {},
+            active: { color: 'black' },
+            disabled: {},
+          }}
           value={activePage}
           onChange={setPage}
+          radius="md"
           spacing="lg"
           size="lg"
+          transitionDuration={200}
+          transitionTimingFunction="linear"
           color={thisColour}
-          required
-        >
-          <Radio value="1" label="Summary" />
-          <Radio value="2" label="Graphs" />
-          <Radio value="3" label="Orchestrators" />
-        </RadioGroup>
+          data={[
+            { label: 'Summary', value: '1' },
+            { label: 'Graphs', value: '2' },
+            { label: 'Orchestrators', value: '3' }
+          ]}
+        />
       </div>
       <div className="verticalDivider" />
       <div className="row">