Small CardSummary adjustments (#3263)

* Small CardSummary adjustments

* Adj.

* Spacing

packages/page-staking/src/Targets/Summary.tsx

@@ -44,7 +44,7 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
       <section className='ui--media-small'>
         {totalIssuance && (
           <CardSummary
-            label={`${totalStaked?.gtn(0) ? `${t<string>('total staked')}/` : ''}${t<string>('total issuance')}`}
+            label={`${totalStaked?.gtn(0) ? `${t<string>('total staked')} / ` : ''}${t<string>('total issuance')}`}
             progress={progressStake}
           >
             <div>

packages/react-components/src/CardSummary.tsx

@@ -138,7 +138,6 @@ export default React.memo(styled(CardSummary)`
     .isSecondary {
       font-size: 1rem;
       font-weight: 100;
-      margin-top: 0.25rem;
 
       .timer {
         min-width: 8rem;

packages/react-components/src/Progress.tsx

@@ -63,7 +63,7 @@ function Progress ({ className = '', isDisabled, total, value }: Props): React.R
         type='second'
       />
       <div className='inner'>
-        <div>{(angle * 100 / 360).toFixed(1)}%</div>
+        <div>{Math.floor(angle * 100 / 360)}%</div>
       </div>
     </div>
   );
@@ -137,9 +137,8 @@ export default React.memo(styled(Progress)`
 
     div {
       line-height: 1;
-      font-family: sans-serif;
-      font-size: 1rem;
-      font-weight: 500;
+      font-size: 1.25rem;
+      text-shadow: 0 0 2px #f5f4f3;
     }
   }
 `);