From 58935bfb706de6621765f5b2867b03e1a82125a9 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sun, 13 Mar 2022 01:57:39 +0100
Subject: [PATCH] More style changes to buttons

---
 src/actions/livepeer.js       | 28 ++++++++++++++--------------
 src/components/eventButton.js |  4 ++--
 src/style.css                 |  6 +++---
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js
index e0e3cff..c98da4f 100644
--- a/src/actions/livepeer.js
+++ b/src/actions/livepeer.js
@@ -119,7 +119,7 @@ export const getEvents = () => async dispatch => {
             eventTo = "";
             if (eventContainsBond) {
               eventDescription =
-                <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+                <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                   <div className="strokeSmollLeft">
                     <div className="row">
                       <h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
@@ -141,7 +141,7 @@ export const getEvents = () => async dispatch => {
                 </div>
             } else {
               eventDescription =
-                <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+                <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                   <div className="strokeSmollLeft">
                     <div className="row">
                       <h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
@@ -165,7 +165,7 @@ export const getEvents = () => async dispatch => {
             eventType = "Unbond";
             eventColour = unbondColour;
             eventDescription =
-              <div className="row" style={{ justifyContent: 'space-between' }}>
+              <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                 <div className="strokeSmollLeft">
                   <div className="row">
                     <h3 style={{ margin: 0, padding: 0 }}>❌</h3>
@@ -196,7 +196,7 @@ export const getEvents = () => async dispatch => {
             eventType = "Stake";
             eventColour = stakeColour;
             eventDescription =
-              <div className="row" style={{ justifyContent: 'space-between' }}>
+              <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                 <div className="strokeSmollLeft">
                   <div className="row">
                     <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
@@ -219,7 +219,7 @@ export const getEvents = () => async dispatch => {
           if (eventType === "Stake" && eventDescription === "") {
             if (eventFrom === "0x0000000000000000000000000000000000000000") {
               eventDescription =
-                <div className="row" style={{ justifyContent: 'space-between' }}>
+                <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                   <div className="strokeSmollLeft">
                     <div className="row">
                       <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
@@ -239,7 +239,7 @@ export const getEvents = () => async dispatch => {
             } else if (eventFrom === eventTo) {
               eventFrom = "";
               eventDescription =
-                <div className="row" style={{ justifyContent: 'space-between' }}>
+                <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                   <div className="strokeSmollLeft">
                     <div className="row">
                       <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
@@ -258,7 +258,7 @@ export const getEvents = () => async dispatch => {
                 </div>
             } else {
               eventDescription =
-                <div className="row" style={{ justifyContent: 'space-between' }}>
+                <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
                   <div className="strokeSmollLeft">
                     <div className="row">
                       <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
@@ -326,7 +326,7 @@ export const getEvents = () => async dispatch => {
             continue;
           }
           const txt =
-            <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+            <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
@@ -365,7 +365,7 @@ export const getEvents = () => async dispatch => {
             continue;
           }
           const txt =
-            <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+            <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
@@ -405,7 +405,7 @@ export const getEvents = () => async dispatch => {
           const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
           const amount2 = 100 - (eventObj.data.feeShare / 10000);
           const txt =
-            <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+            <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>🔄</h3>
@@ -448,7 +448,7 @@ export const getEvents = () => async dispatch => {
             continue;
           }
           let txt =
-            <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+            <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>💰</h3>
@@ -487,7 +487,7 @@ export const getEvents = () => async dispatch => {
           eventContainsReward = true;
           const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
           let txt =
-            <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
+            <div className="flexContainer" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>💸</h3>
@@ -603,12 +603,12 @@ export const getTickets = () => async dispatch => {
         if (eventObj.name === "WinningTicketRedeemed") {
           const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000;
           const txt =
-            <div className="row">
+            <div className="row" style={{ justifyContent: 'space-between' }}>
               <div className="strokeSmollLeft">
                 <div className="row">
                   <h3 style={{ margin: 0, padding: 0 }}>🎟️</h3>
                 </div>
-                <div className="strokeSmollLeft">
+                <div className="row">
                   <p style={{ fontSize: 'small' }}>
                     winning ticket
                   </p>
diff --git a/src/components/eventButton.js b/src/components/eventButton.js
index 1d76f3b..a469d2b 100644
--- a/src/components/eventButton.js
+++ b/src/components/eventButton.js
@@ -85,9 +85,9 @@ const EventButton = (obj) => {
           {eventCaller}
         </div>
         <div className="row">
-          <p className="row withWrap" style={{ maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
+          <div className="row" style={{ maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
             {obj.eventObj.eventDescription}
-          </p>
+          </div>
         </div>
         <div className="rowAlignLeft">
           {eventFrom}
diff --git a/src/style.css b/src/style.css
index a96bb5c..e4cdc6f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -222,7 +222,7 @@ svg {
   padding: 0;
   margin: auto;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
   flex-direction: row;
   width: auto;
@@ -585,13 +585,13 @@ svg {
   .elipsOnMobile {
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: 30vw;
+    max-width: 10vw;
     text-align: start;
   }
   .elipsOnMobileExtra {
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 10em;
+    width: 10vw;
     text-align: start;
   }
   .mobileNoPadding {