From 584346951a04cd41395bd55bd1aeaff4860e7df9 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sat, 16 Apr 2022 22:28:39 +0200
Subject: [PATCH] Layout improvements

---
 src/components/WinnerMonth.js | 35 +++++++++++++++++++++++++++++------
 src/pages/tickets.js          |  4 ++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/WinnerMonth.js b/src/components/WinnerMonth.js
index 52254c3..6f0507a 100644
--- a/src/components/WinnerMonth.js
+++ b/src/components/WinnerMonth.js
@@ -21,12 +21,12 @@ const WinnerMonth = (obj) => {
         if (now - thisScore.timestamp < 360000) {
           wasInCache = true;
         }
-        if (!thisScores){
+        if (!thisScores) {
           setThisScores(thisScore);
         }
       }
     }
-    if (!wasInCache){
+    if (!wasInCache) {
       dispatch(getOrchestratorScores(obj.year, obj.month));
     }
   }, [livepeer.orchScores]);
@@ -57,14 +57,14 @@ const WinnerMonth = (obj) => {
           if (thisAddr.name) {
             return thisAddr.name;
           } else {
-            return address;
+            return (address.substring(0, 10) + "..");
           }
           break;
         }
       }
     }
 
-    return address;
+    return (address.substring(0, 10) + "..");
   }
 
   let pieList = [];
@@ -77,7 +77,7 @@ const WinnerMonth = (obj) => {
       otherSum += thisTicket.sum;
     } else {
       pieList.push({
-        address: getName(thisTicket.address).substring(0, 24),
+        address: getName(thisTicket.address),
         sum: thisTicket.sum
       });
     }
@@ -91,7 +91,30 @@ const WinnerMonth = (obj) => {
   return (
     <div className="stroke">
       <div className="row">
-        <VictoryPie padding={100} data={pieList} x="address" y="sum" colorScale="qualitative" />
+        <VictoryPie padding={100} data={pieList} x="address" y="sum"
+          colorScale={[
+            "#003f5c",
+            "#2f4b7c",
+            "#665191",
+            "#ff7c43",
+            "#ffa600",
+            "#5c3446",
+            "#83424e",
+            "#a6544e",
+            "#c16d46",
+            "#d18d3c",
+            "#d3b136",
+            "#c5d843",
+            "#a3ff69",
+          ]}
+          style={{
+            data: {
+              fillOpacity: 0.9, stroke: "#636363", strokeWidth: 2
+            },
+            labels: {
+              fontSize: 10, zIndex: 999
+            }
+          }} />
       </div>
       <div className="flexContainer forceWrap">
         {
diff --git a/src/pages/tickets.js b/src/pages/tickets.js
index b024d84..551fada 100644
--- a/src/pages/tickets.js
+++ b/src/pages/tickets.js
@@ -163,11 +163,11 @@ const Tickets = (obj) => {
                           styles={{
                             item: { padding: 0 },
                             itemOpened: { padding: 0 },
-                            itemTitle: { padding: 0 },
+                            itemTitle: { padding: 0, paddingTop: '1em', paddingBottom: '1em' },
                             control: { padding: 0 },
                             label: { padding: 0 },
                             icon: { padding: 0 },
-                            content: { padding: 0 },
+                            content: { padding: 0, paddingTop: '1em', paddingBottom: '1em' },
                             contentInner: { padding: 0 },
                           }}>
                           {