Merge pull request #1186 from oasisprotocol/mz/safariFix

Fix Safari buggy display of block fill

.changelog/1186.bugfix.md

@@ -0,0 +1 @@
+Fix Safari buggy display of block fill

src/app/components/Blocks/index.tsx

@@ -72,9 +72,7 @@ export const Blocks: FC<BlocksProps> = ({
       key: block.hash,
       data: [
         {
-          content: (
-            <VerticalProgressBar variant="determinate" value={(100 * block.gas_used) / blockGasLimit} />
-          ),
+          content: <VerticalProgressBar value={(100 * block.gas_used) / blockGasLimit} />,
           key: 'fill',
         },
         {

src/app/components/ProgressBar/index.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import Box from '@mui/material/Box'
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
+import { styled } from '@mui/material/styles'
+import { COLORS } from 'styles/theme/colors'
+
+type VerticalProgressBarProps = {
+  value: number
+}
+
+const barSize = 36
+
+export const VerticalProgressBar: FC<VerticalProgressBarProps> = ({ value }) => {
+  return (
+    <Box sx={{ width: barSize, height: barSize, transform: 'rotate(-90deg)' }}>
+      <StyledLinearProgress variant="determinate" value={value} />
+    </Box>
+  )
+}
+
+const StyledLinearProgress = styled(LinearProgress)(() => ({
+  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
+    backgroundColor: COLORS.brandDark,
+  },
+  height: barSize,
+  width: barSize,
+}))
+
+export const ProgressBar = styled(LinearProgress)(() => ({
+  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
+    backgroundColor: COLORS.eucalyptus,
+  },
+  borderColor: COLORS.eucalyptus,
+  backgroundColor: COLORS.honeydew,
+  height: '12px',
+  width: '85px',
+}))