From 223ce5a2374e3bf6b5489e0e4eadfe4e64c311d0 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sun, 8 May 2022 17:54:12 +0200
Subject: [PATCH] Spacing for round info popup

---
 backend/src/models/Round.js   |  4 ----
 src/components/RoundViewer.js | 26 ++++++++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/backend/src/models/Round.js b/backend/src/models/Round.js
index 8acf016..e2483f5 100644
--- a/backend/src/models/Round.js
+++ b/backend/src/models/Round.js
@@ -17,10 +17,6 @@ const RoundSchema = new mongoose.Schema({
     type: Number,
     required: true
   },
-  lengthBlocks: {
-    type: Number,
-    required: false
-  },
   startBlock: {
     type: Number,
     required: false
diff --git a/src/components/RoundViewer.js b/src/components/RoundViewer.js
index 95ce7a1..d996135 100644
--- a/src/components/RoundViewer.js
+++ b/src/components/RoundViewer.js
@@ -49,46 +49,52 @@ const Round = (obj) => {
                 Round {obj.round.number}
               </p>
             </div>
+            <div className="smallVerticalDivider"/>
             {
               obj.round.mintableTokens && obj.round.mintableTokens > 0 ?
-                <div className="row">
-                  <p className="darkText" style={{ overflowWrap: 'break-word' }}>
+                <div className="rowAlignLeft">
+                  <p className="darkText" style={{ overflowWrap: 'break-word', textAlign: 'left' }}>
                     Has {parseFloat(obj.round.mintableTokens).toFixed(2)} mintable tokens
                   </p>
                 </div> : null
             }
+            <div className="smallVerticalDivider"/>
             {
               obj.round.volumeEth && obj.round.volumeUsd && obj.round.volumeEth > 0 && obj.round.volumeUsd > 0 ?
-                <div className="row">
-                  <p className="darkText" style={{ overflowWrap: 'break-word' }}>
+                <div className="rowAlignLeft">
+                  <p className="darkText" style={{ overflowWrap: 'break-word', textAlign: 'left' }}>
                     A volume of {parseFloat(obj.round.volumeEth).toFixed(2)} Eth ({parseFloat(obj.round.volumeUsd).toFixed(2)}$)
                   </p>
                 </div> : null
             }
+            <div className="smallVerticalDivider"/>
             {
               obj.round.totalSupply && obj.round.totalActiveStake && obj.round.totalSupply > 0 && obj.round.totalActiveStake > 0 ?
-                <div className="row">
-                  <p className="darkText" style={{ overflowWrap: 'break-word' }}>
+                <div className="rowAlignLeft">
+                  <p className="darkText" style={{ overflowWrap: 'break-word', textAlign: 'left' }}>
                     A total supply of {parseFloat(obj.round.totalSupply).toFixed(2)} LPT, of which {parseFloat(obj.round.totalActiveStake).toFixed(2)} is staked ({(parseFloat(obj.round.participationRate) * 100).toFixed(2)}%)
                   </p>
                 </div> : null
             }
+            <div className="smallVerticalDivider"/>
             {
               obj.round.newStake && obj.round.newStake > 0 ?
-                <div className="row">
-                  <p className="darkText" style={{ overflowWrap: 'break-word' }}>
+                <div className="rowAlignLeft">
+                  <p className="darkText" style={{ overflowWrap: 'break-word', textAlign: 'left' }}>
                     {parseFloat(obj.round.newStake).toFixed(2)} LPT new stake
                   </p>
                 </div> : null
             }
+            <div className="smallVerticalDivider"/>
             {
               obj.round.movedStake && obj.round.movedStake > 0 ?
-                <div className="row">
-                  <p className="darkText" style={{ overflowWrap: 'break-word' }}>
+                <div className="rowAlignLeft">
+                  <p className="darkText" style={{ overflowWrap: 'break-word', textAlign: 'left' }}>
                     {parseFloat(obj.round.movedStake).toFixed(2)} LPT stake moved around
                   </p>
                 </div> : null
             }
+            <div className="smallVerticalDivider"/>
           </div>
 
         </Popover>