Make <ProgressBar /> relevant again

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_common.scss

@@ -696,3 +696,24 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         }
     }
 }
+
+@define-mixin ProgressBarColour $colour {
+    color: $colour;
+    &::-moz-progress-bar {
+        background-color: $colour;
+    }
+    &::-webkit-progress-value {
+        background-color: $colour;
+    }
+}
+
+@define-mixin ProgressBarBorderRadius $radius {
+    border-radius: $radius;
+    &::-moz-progress-bar {
+        border-radius: $radius;
+    }
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+        border-radius: $radius;
+    }
+}

res/css/views/auth/_PassphraseField.scss

@@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
 $PassphraseStrengthMedium: $username-variant5-color;
 $PassphraseStrengthLow: $notice-primary-color;
 
-@define-mixin ProgressBarColour $colour {
-    color: $colour;
-    &::-moz-progress-bar {
-        background-color: $colour;
-    }
-    &::-webkit-progress-value {
-        background-color: $colour;
-    }
-}
-
 progress.mx_PassphraseField_progress {
     appearance: none;
     width: 100%;
@@ -36,14 +26,7 @@ progress.mx_PassphraseField_progress {
     position: absolute;
     top: -12px;
 
-    border-radius: 2px;
+    @mixin ProgressBarBorderRadius "2px";
-    &::-moz-progress-bar {
-        border-radius: 2px;
-    }
-    &::-webkit-progress-bar,
-    &::-webkit-progress-value {
-        border-radius: 2px;
-    }
 
     @mixin ProgressBarColour $PassphraseStrengthLow;
     &[value="2"], &[value="3"] {

res/css/views/elements/_ProgressBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ProgressBar {
+progress.mx_ProgressBar {
-    height: 5px;
+    height: 4px;
-    border: 1px solid $progressbar-color;
+    width: 60px;
-}
+    border-radius: 10px;
+    overflow: hidden;
+    appearance: none;
+    border: 0;
 
-.mx_ProgressBar_fill {
+    @mixin ProgressBarBorderRadius "10px";
-    height: 100%;
+    @mixin ProgressBarColour $accent-color;
-    background-color: $progressbar-color;
+    ::-webkit-progress-value {
+        transition: width 1s;
+    }
+    ::-moz-progress-bar {
+        transition: padding-bottom 1s;
+        padding-bottom: var(--value);
+        transform-origin: 0 0;
+        transform: rotate(-90deg) translateX(-15px);
+        padding-left: 15px;
+
+        height: 0;
+    }
 }

src/components/views/elements/ProgressBar.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'ProgressBar',
-    propTypes: {
-        value: PropTypes.number,
-        max: PropTypes.number,
-    },
-
-    render: function() {
-        // Would use an HTML5 progress tag but if that doesn't animate if you
-        // use the HTML attributes rather than styles
-        const progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%",
-        };
-        return (
-            <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
-        );
-    },
-});

src/components/views/elements/ProgressBar.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+interface IProps {
+    value: number;
+    max: number;
+}
+
+const ProgressBar: React.FC<IProps> = ({value, max}) => {
+    return <progress className="mx_ProgressBar" max={max} value={value} />;
+};
+
+export default ProgressBar;