Adjust Progress hl (#3258)

* Highlight background on progress outer

* Adjust

* Sizing

packages/react-components/src/CardSummary.tsx

@@ -102,7 +102,7 @@ export default React.memo(styled(CardSummary)`
   }
 
   .ui--Progress {
-    margin: 0.5rem 0 0 0.75rem;
+    margin: 0.5rem 0.125rem 0.125rem 0.75rem;
   }
 
   > .ui--Labelled {

packages/react-components/src/Progress.tsx

@@ -15,6 +15,24 @@ interface Props {
   value?: UInt | BN | number;
 }
 
+interface RotateProps {
+  angle: string;
+  type: 'first' | 'second';
+}
+
+function DivClip ({ angle, type }: RotateProps): React.ReactElement<RotateProps> {
+  return (
+    <div className={`clip ${type}`}>
+      <div
+        className='ui--highlight--bg'
+        style={{ transform: `rotate(${angle}deg)` }}
+      />
+    </div>
+  );
+}
+
+const Clip = React.memo(DivClip);
+
 function Progress ({ className = '', percent, total, value }: Props): React.ReactElement<Props> | null {
   const _total = bnToBn(total);
   const _value = bnToBn(value);
@@ -29,27 +47,26 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
   }
 
   const angle = width * 360 / 100;
-  const firstHalfAngle = angle <= 180
-    ? angle
-    : 180;
-  const secondHalfAngle = angle <= 180
-    ? 0
-    : angle - 180;
 
   return (
     <div className={`ui--Progress ${className}`}>
-      <div className='clip'>
-        <div
-          className='ui--highlight--bg'
-          style={{ transform: `rotate(${firstHalfAngle}deg)` }}
-        />
-      </div>
-      <div className='clip'>
-        <div
-          className='ui--highlight--bg'
-          style={{ transform: `rotate(${secondHalfAngle}deg)` }}
-        />
-      </div>
+      <div className='background ui--highlight--bg' />
+      <Clip
+        angle={
+          angle <= 180
+            ? angle.toFixed(1)
+            : '180'
+        }
+        type='first'
+      />
+      <Clip
+        angle={
+          angle <= 180
+            ? '0'
+            : (angle - 180).toFixed(1)
+        }
+        type='second'
+      />
       <div className='inner'>
         <div>{width.toFixed(1)}%</div>
       </div>
@@ -58,24 +75,29 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
 }
 
 export default React.memo(styled(Progress)`
-  background: rgba(0, 0, 0, 0.05);
   border-radius: 100%;
   height: 4.5rem;
+  overflow: hidden;
   position: relative;
   width: 4.5rem;
 
+  .background,
   .clip {
     bottom: 0;
-    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
+  }
 
+  .background {
+    opacity: 0.125;
+  }
+
+  .clip {
     div {
       border-radius: 100%;
       bottom: 0;
-      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
       left: 0;
       position: absolute;
       right: 0;
@@ -85,7 +107,15 @@ export default React.memo(styled(Progress)`
     }
   }
 
-  .clip+.clip {
+  .clip.first {
+    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+
+    div {
+      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+    }
+  }
+
+  .clip.second {
     clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 
     div {

packages/react-components/src/Spinner.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from './translate';
-import spinnerSrc from './Spinner-2.png';
+import spinnerSrc from './Spinner.png';
 
 interface Props {
   className?: string;
@@ -46,6 +46,7 @@ export default React.memo(styled(Spinner)`
     right: 0;
 
     img {
+      border: 1 px solid white;
       margin: 0 auto;
     }
   }
@@ -53,7 +54,6 @@ export default React.memo(styled(Spinner)`
   img {
     border: 1px solid transparent;
     border-radius: 10rem;
-    opacity: 0.75;
   }
 
   .text {