Circular progress (#3257)

packages/page-poll/src/index.tsx

@@ -134,11 +134,11 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
                     ? <div className='result' />
                     : (
                       <div className='result'>
+                        <FormatBalance value={totals[index]} />
                         <Progress
                           total={DIV}
                           value={progress[index]}
                         />
-                        <FormatBalance value={totals[index]} />
                       </div>
                     )
                   }
@@ -260,11 +260,20 @@ export default React.memo(styled(PollApp)`
   }
 
   .result {
-    margin: 2.2rem 0 0 0;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    margin: 0;
     text-align: right;
 
+    .ui--FormatBalance {
+      font-size: 1.2rem;
+      font-weight: 100;
+      line-height: 1;
+    }
+
     .ui--Progress {
-      margin-bottom: 0.5rem;
+      margin: 0.75rem;
     }
   }
 `);

packages/page-settings/src/I18n/index.tsx

@@ -216,34 +216,38 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
       <header>
         <Columar>
           <Column>
-            <Dropdown
-              isFull
-              label={t<string>('the language to display translations for')}
-              onChange={setLng}
-              options={keys}
-              value={lng}
-            />
+            <div>
+              <Dropdown
+                isFull
+                label={t<string>('the language to display translations for')}
+                onChange={setLng}
+                options={keys}
+                value={lng}
+              />
+              {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })}
+            </div>
             <Progress
               color='auto'
               total={modProgress[1]}
               value={modProgress[0]}
             />
-            {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })}
           </Column>
           <Column>
-            <Dropdown
-              isFull
-              label={t<string>('the module to display strings for')}
-              onChange={setRecord}
-              options={modules}
-              value={record}
-            />
+            <div>
+              <Dropdown
+                isFull
+                label={t<string>('the module to display strings for')}
+                onChange={setRecord}
+                options={modules}
+                value={record}
+              />
+              {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
+            </div>
             <Progress
               color='auto'
               total={allProgress[record]?.[1]}
               value={allProgress[record]?.[0]}
             />
-            {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
           </Column>
         </Columar>
       </header>
@@ -284,8 +288,17 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
 }
 
 export default React.memo(styled(Translate)`
-  .ui--Progress:last-child {
-    margin: 0.25rem;
+  .ui--Column {
+    display: flex;
+
+    > div:first-child {
+      flex: 1;
+      text-align: right;
+    }
+  }
+
+  .ui--Progress {
+    margin: 0 0 0 0.25rem;
   }
 
   .toggleWrapper {

packages/react-components/src/CardSummary.tsx

@@ -79,8 +79,8 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
             </>
           )
         }
-        {progress && <Progress {...progress} />}
       </Labelled>
+      {progress && <Progress {...progress} />}
     </article>
   );
 }
@@ -102,10 +102,10 @@ export default React.memo(styled(CardSummary)`
   }
 
   .ui--Progress {
-    margin: 0.2rem 0 -0.5rem;
+    margin: 0.5rem 0 0 0.75rem;
   }
 
-  > div {
+  > .ui--Labelled {
     font-size: 1.75rem;
     font-weight: 100;
     position: relative;

packages/react-components/src/Progress.tsx

@@ -28,21 +28,88 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac
     return null;
   }
 
+  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 style={{ width: `${width}%` }} />
+      <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='inner'>
+        <div>{width.toFixed(1)}%</div>
+      </div>
     </div>
   );
 }
 
 export default React.memo(styled(Progress)`
   background: rgba(0, 0, 0, 0.05);
-  border-radius: 0.25rem;
-  margin: 1em 0 2.5em;
-  overflow: hidden;
+  border-radius: 100%;
+  height: 4.5rem;
+  position: relative;
+  width: 4.5rem;
 
-  > div {
-    height: 0.25rem;
-    min-width: 0;
+  .clip {
+    bottom: 0;
+    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    div {
+      border-radius: 100%;
+      bottom: 0;
+      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+      left: 0;
+      position: absolute;
+      right: 0;
+      transform: rotate(0);
+      top: 0;
+      zoom: 1;
+    }
+  }
+
+  .clip+.clip {
+    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+
+    div {
+      clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+    }
+  }
+
+  .inner {
+    align-items: center;
+    background: rgba(245, 244, 243, 87.5%);
+    border-radius: 100%;
+    bottom: 0.375rem;
+    display: flex;
+    justify-content: center;
+    left: 0.375rem;
+    position: absolute;
+    right: 0.375rem;
+    top: 0.375rem;
+
+    div {
+      line-height: 1;
+      font-family: sans-serif;
+      font-size: 1rem;
+      font-weight: 500;
+    }
   }
 `);

packages/react-components/src/Spinner.tsx

@@ -47,7 +47,6 @@ export default React.memo(styled(Spinner)`
 
     img {
       margin: 0 auto;
-      opacity: 1;
     }
   }
 

packages/react-components/src/styles/index.ts

@@ -71,10 +71,6 @@ export default createGlobalStyle<Props>`
       border-bottom-color: ${getHighlight};
     }
 
-    .ui--Progress > div {
-      background-color: ${getHighlight} !important;
-    }
-
     .ui.negative.button,
     .ui.buttons .negative.button {
       background: #666 !important;

packages/react-components/src/styles/theme.ts

@@ -54,10 +54,6 @@ export default css`
       }
     }
 
-    .ui--Progress > div {
-      background-color: ${colorBtnDefault};
-    }
-
     .ui.modal > .header:not(.ui) {
       border-bottom-color: ${colorBtnDefault};
     }