media query on step progress

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/package.json

@@ -39,6 +39,7 @@
     "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.13.1",
     "reselect": "^4.0.0",
+    "use-media": "^1.4.0",
     "xstate": "^4.11.0"
   },
   "devDependencies": {

web-app/src/containers/Tutorial/components/Reset.tsx

@@ -25,7 +25,7 @@ const Reset = (props: Props) => {
 
   return (
     <>
-      <Button type="secondary" onClick={() => setModalState('confirm')} disabled={props.disabled}>
+      <Button type="secondary" size="medium" onClick={() => setModalState('confirm')} disabled={props.disabled}>
         Reset
       </Button>
       <Dialog

web-app/src/containers/Tutorial/components/StepProgress.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Progress } from '@alifd/next'
+import useMedia from 'use-media'
 
 const styles = {
   progress: {
@@ -23,19 +24,25 @@ const StepProgress = (props: Props) => {
       {props.current} of {props.max}
     </span>
   )
-  return (
-    <Progress
-      state="success"
-      progressive
-      percent={(props.current / props.max) * 100}
-      shape="line"
-      color="rgb(85, 132, 255)"
-      css={styles.progress}
-      textRender={() => {
-        return Text
-      }}
-    />
-  )
+
+  const isWide = useMedia({ minWidth: '340px' })
+
+  if (isWide) {
+    return (
+      <Progress
+        state="success"
+        progressive
+        percent={(props.current / props.max) * 100}
+        shape="line"
+        color="rgb(85, 132, 255)"
+        css={styles.progress}
+        textRender={() => {
+          return Text
+        }}
+      />
+    )
+  }
+  return <div css={{ marginRight: '0.5rem', fontSize: '80%' }}>{Text}</div>
 }
 
 export default StepProgress

web-app/yarn.lock

@@ -13431,6 +13431,11 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.3.tgz#9f939dfb5740807bbf9dd79cdd4e99d27e827756"
   integrity sha512-DPBPh1i2adCZoIArRlTuKRy7yue7QogtEnfv0AKrWsY+GA+4EKe37zhRDouNnyWMoNQFYZZRF+2dLHsWE4YvJA==
 
+use-media@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
+  integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==
+
 use-sidecar@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"