Rework Progress component (#3211)

* Reowkr Progress component

* Toggle colors

* Sligh cursor adjustment

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

@@ -284,7 +284,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
 }
 
 export default React.memo(styled(Translate)`
-  .ui.progress:last-child {
+  .ui--Progress:last-child {
     margin: 0.25rem;
   }
 

packages/react-components/src/CardSummary.tsx

@@ -8,12 +8,11 @@ import styled from 'styled-components';
 import { UInt } from '@polkadot/types';
 import { formatNumber, isUndefined } from '@polkadot/util';
 
-import Progress, { Colors as ProgressColors } from './Progress';
+import Progress from './Progress';
 import Labelled from './Labelled';
 import { BlockToTime } from '@polkadot/react-query';
 
 interface ProgressProps {
-  color?: ProgressColors;
   hideValue?: boolean;
   isPercent?: boolean;
   total?: BN | UInt;
@@ -102,6 +101,10 @@ export default React.memo(styled(CardSummary)`
     opacity: 1;
   }
 
+  .ui--Progress {
+    margin: 0.2rem 0 -0.5rem;
+  }
+
   > div {
     font-size: 1.75rem;
     font-weight: 100;
@@ -125,11 +128,6 @@ export default React.memo(styled(CardSummary)`
       font-size: 0.95rem;
     }
 
-    .progress {
-      margin: 0.2rem 0 -0.5rem !important;
-      background: rgba(0,0,0,0.05);
-    }
-
     .isSecondary {
       font-size: 1.1rem;
       font-weight: normal;

packages/react-components/src/Progress.tsx

@@ -4,56 +4,45 @@
 
 import BN from 'bn.js';
 import React from 'react';
-import SUIProgress from 'semantic-ui-react/dist/commonjs/modules/Progress/Progress';
+import styled from 'styled-components';
 import { UInt } from '@polkadot/types';
 import { bnToBn, isBn, isUndefined } from '@polkadot/util';
 
-import { classes } from './util';
-
-type BaseColors = 'blue' | 'green' | 'red' | 'orange';
-export type Colors = 'auto' | 'autoReverse' | BaseColors;
-
 interface Props {
-  color?: Colors;
   className?: string;
   percent?: BN | number;
   total?: UInt | BN | number;
   value?: UInt | BN | number;
 }
 
-function Progress ({ className = '', color = 'blue', percent, total, value }: Props): React.ReactElement<Props> | null {
+function Progress ({ className = '', percent, total, value }: Props): React.ReactElement<Props> | null {
   const _total = bnToBn(total);
   const _value = bnToBn(value);
-  const calculated = _total.gtn(0)
+  const width = _total.gtn(0)
     ? (100.0 * _value.toNumber() / _total.toNumber())
     : isBn(percent)
       ? percent.toNumber()
       : percent;
 
-  if (isUndefined(calculated) || calculated < 0) {
+  if (isUndefined(width) || width < 0) {
     return null;
   }
 
-  const rainbow = (color === 'auto' || color === 'autoReverse')
-    ? (calculated > 66.6)
-      ? color === 'auto'
-        ? 'green'
-        : 'red'
-      : (calculated > 33.3)
-        ? 'orange'
-        : color === 'auto'
-          ? 'red'
-          : 'green'
-    : color;
-
   return (
-    <SUIProgress
-      className={classes('ui--Progress', className)}
-      color={rainbow}
-      percent={calculated}
-      size='tiny'
-    />
+    <div className={`ui--Progress ${className}`}>
+      <div style={{ width: `${width}%` }} />
+    </div>
   );
 }
 
-export default React.memo(Progress);
+export default React.memo(styled(Progress)`
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  margin: 1em 0 2.5em;
+  overflow: hidden;
+
+  > div {
+    height: 0.25rem;
+    min-width: 0;
+  }
+`);

packages/react-components/src/Toggle.tsx

@@ -53,28 +53,27 @@ export default React.memo(styled(Toggle)`
   }
 
   .ui--Toggle-Slider {
+    background: #e4e5e6;
     border-radius: 1.5rem;
     display: inline-block;
+    height: 1.5rem;
     position: relative;
-    cursor: pointer;
-    background-color: #eee;
     width: 3rem;
-    height: 1.5rem;
 
     &::before {
-      border: 0.125rem solid #eee;
+      background: white;
+      border: 0.125rem solid #e4e5e6;
       border-radius: 50%;
-      position: absolute;
       content: "";
       height: 1.5rem;
-      width: 1.5rem;
       left: 0;
+      position: absolute;
       top: 0rem;
-      background-color: white;
+      width: 1.5rem;
     }
   }
 
-  &.not(.isDisabled) .ui--Toggle-Slider {
+  &:not(.isDisabled) {
     cursor: pointer;
   }
 

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

@@ -71,7 +71,7 @@ export default createGlobalStyle<Props>`
       border-bottom-color: ${getHighlight};
     }
 
-    .ui.blue.progress > .bar {
+    .ui--Progress > div {
       background-color: ${getHighlight} !important;
     }
 

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

@@ -136,16 +136,6 @@ export default css`
     display: flex !important;
   }
 
-  .ui.progress {
-    &.tiny {
-      font-size: .5rem;
-    }
-
-    .bar {
-      min-width: 0 !important;
-    }
-  }
-
   .ui.secondary.vertical.menu > .item {
     margin: 0;
   }

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

@@ -33,7 +33,6 @@ export default css`
 
     .ui--Button {
       background-color: ${colorBtnDefault};
-      // box-shadow: 0 0 0 1px ${colorBtnShadow};
       color: ${colorBtnText};
 
       &.active,
@@ -45,7 +44,6 @@ export default css`
       }
 
       &:hover {
-        // box-shadow: 0 0 0 1px ${colorBtnText};
         filter: brightness(110%);
       }
 
@@ -56,12 +54,12 @@ export default css`
       }
     }
 
-    .ui.blue.progress .bar {
-      background-color: ${colorBtnHighlight};
+    .ui--Progress > div {
+      background-color: ${colorBtnDefault};
     }
 
     .ui.modal > .header:not(.ui) {
-      border-bottom-color: ${colorBtnHighlight};
+      border-bottom-color: ${colorBtnDefault};
     }
   }
 `;

packages/react-components/src/types.ts

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { WithTranslation } from 'react-i18next';
-import { ButtonProps as SUIButtonProps } from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
@@ -57,7 +56,6 @@ export interface TxButtonProps extends TxProps {
   accountNonce?: Index;
   className?: string;
   icon?: IconName;
-  iconSize?: SUIButtonProps['size'];
   isBasic?: boolean;
   isDisabled?: boolean;
   isIcon?: boolean;
@@ -71,7 +69,6 @@ export interface TxButtonProps extends TxProps {
   onStart?: VoidFn;
   onSuccess?: TxCallback;
   onUpdate?: TxCallback;
-  size?: SUIButtonProps['size'];
   tooltip?: string;
   withSpinner?: boolean;
 }