Merge pull request #72 from nerdvibe/fix/epoch-style

Fixed ui issues on smaller screens
nerdvibe · Dec 14, 2021 · d16a9fb · d16a9fb
2 parents 28db0bf + d35a178
commit d16a9fb
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 41 deletions.
diff --git a/src/components/UI/epochBar/EpochBar.tsx b/src/components/UI/epochBar/EpochBar.tsx
@@ -54,38 +54,42 @@ const EpochBar = () => {
   return (
     <div className="w-100 h-80">
       <div className="progress-bar-container mx-auto w-100">
-        <Row>
+        <Row className="mx-auto">
           <Col xs={1}>
             <h6 className="light-grey-text">Epoch</h6>
-            <h4>{+epochData.epoch}</h4>
+            <h4 className="">{+epochData.epoch}</h4>
           </Col>
-          <Col xs={10}>
-            <div className="loading w-100 mt-3">
+          <Col xs={10} className="progress-bar-col">
+            <div className="loading w-100">
               <div
                 className="loading-after"
                 style={{ width: `${percentage}%` }}
               ></div>
             </div>
             <Row>
-              <Col xs={6} className="text-left">
-                <strong>{percentage}%</strong>
-                <p>
+              <Col xs={5} className="text-left">
+                <div className="value-text">{percentage}%</div>
+                <p className="value-text">
                   Slot {epochData.slot} of {MAX_SLOT}
                 </p>
               </Col>
-              <Col xs={6} className="align-end">
+              <Col xs={7} className="align-end">
                 {remainingTime && (
-                  <strong>
-                    {remainingTime.days} days {remainingTime.hours} hours{" "}
-                    {remainingTime.minutes} minutes left to the next epoch
-                  </strong>
+                  <div className="value-text">
+                    {!!remainingTime.days && `${remainingTime.days} days`}{" "}
+                    {(!!remainingTime.days || !!remainingTime.hours) &&
+                      `${remainingTime.hours} hours`}{" "}
+                    {!remainingTime.days && `${remainingTime.minutes} minutes`}{" "}
+                    <br />
+                    left to the next epoch
+                  </div>
                 )}
               </Col>
             </Row>
           </Col>
           <Col xs={1} className="pl-0">
             <h6 className="light-grey-text">Epoch</h6>
-            <h4>{+epochData.epoch + 1}</h4>
+            <h4 className="ml-2">{+epochData.epoch + 1}</h4>
           </Col>
         </Row>
       </div>

diff --git a/src/components/stake/StakeStatus.tsx b/src/components/stake/StakeStatus.tsx
@@ -11,8 +11,8 @@ const StakeStatus = ({ currentDelegate, currentDelegateName }: IProps) => {
   const { balance } = useContext(BalanceContext);
   const noDelegate = (
     <>
-      Currently you are not staking for anybody. <br /> Delegate your stake and
-      earn rewards, click{" "}
+      Currently you are not staking for anybody. <br />
+      Click{" "}
       <a
         href={process.env.REACT_APP_HOW_TO_DELEGATE_URL}
         target="_blank"
@@ -33,13 +33,15 @@ const StakeStatus = ({ currentDelegate, currentDelegateName }: IProps) => {
 
   return (
     <div>
-      <h6 className="w-100 light-grey-text">Your stake</h6>
-      <h5 className="full-width-align-left mt-2">
+      <h6 className="w-100 light-grey-text label-text">Your stake</h6>
+      <h5 className="full-width-align-left mt-2 value-text">
         {(balance ? toMINA(+balance.total) : 0).toLocaleString()} MINA
       </h5>
       <div className="mt-2">
-        <h6 className="w-100 light-grey-text">You are staking for</h6>
-        <h5 className="full-width-align-left mt-2 selectable-text truncate-text">
+        <h6 className="w-100 light-grey-text label-text">
+          You are staking for
+        </h6>
+        <h5 className="full-width-align-left mt-2 selectable-text truncate-text value-text">
           {stakeMessage}
         </h5>
       </div>

diff --git a/src/components/stake/stakeTable/StakeTable.tsx b/src/components/stake/stakeTable/StakeTable.tsx
@@ -87,30 +87,26 @@ const StakeTable = ({
     <div className="mx-auto  ">
       <Row>
         <Col xs={12} xl={6}>
-          <div className="block-container min-height-200 center-content">
-            <Row className="w-100">
-              <Col xs={12} className="mb-2">
-                <h3>Staking Info</h3>
-              </Col>
-              <Col xs={12}>
-                <StakeStatus
-                  currentDelegate={currentDelegate}
-                  currentDelegateName={currentDelegateName}
-                />
-              </Col>
-            </Row>
+          <div className="block-container min-height-200 center-content flex-col-left">
+            <div>
+              <h4>Staking Info</h4>
+            </div>
+            <div className="w-100">
+              <StakeStatus
+                currentDelegate={currentDelegate}
+                currentDelegateName={currentDelegateName}
+              />
+            </div>
           </div>
         </Col>
         <Col xs={12} xl={6}>
-          <div className="block-container min-height-200 center-content">
-            <Row className="w-100">
-              <Col xs={12} className="mb-2">
-                <h3>Epoch Info</h3>
-              </Col>
-              <Col xs={12}>
-                <EpochBar />
-              </Col>
-            </Row>
+          <div className="block-container min-height-200 center-content flex-col-left">
+            <div className="w-100">
+              <h4>Epoch Info</h4>
+            </div>
+            <div className="w-100 mt-2">
+              <EpochBar />
+            </div>
           </div>
         </Col>
       </Row>

diff --git a/src/styles/__misc.scss b/src/styles/__misc.scss
@@ -140,6 +140,7 @@ a.github-link {
   box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
   border-radius: 4px;
   overflow: hidden;
+  margin-top: 20px;
 }
 
 .loading-after {
@@ -149,7 +150,7 @@ a.github-link {
   width: 0;
   height: 100%;
   border-radius: 4px;
-  background-color: rgb(249, 208, 108);
+  background-color: #28a745;
 }
 
 .min-height-200{
@@ -176,6 +177,28 @@ a.github-link {
   -o-text-overflow: ellipsis;
 }
 
+.label-text{
+  font-size: medium;
+  margin-bottom: 12px;
+  opacity: .6;
+}
+
+.value-text{    
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 17px;
+}
+
+.progress-bar-col{
+  max-width: 83% !important;
+  padding-left: 25px !important;
+}
+
+.flex-col-left{
+  flex-direction: column;
+  align-items: baseline;
+}
+
 .v-div {
   border-left: 1px solid rgba(0, 0, 0, 0.25);
   height: 50px;
@@ -186,6 +209,7 @@ a.github-link {
 }
 
 .block-container {
+  width: 100%;
   padding: 20px;
   border-radius: 10px;
   background: white;