fix: speed test latency

Author: geekdada

src/pages/Index/components/MenuTile.tsx

@@ -3,11 +3,10 @@ import { jsx } from '@emotion/core'
 import styled from '@emotion/styled/macro'
 import css from '@emotion/css/macro'
 import { Card, Heading } from '@sumup/circuit-ui'
-import tw, { TwStyle } from 'twin.macro'
+import tw from 'twin.macro'
 import React, { MouseEventHandler } from 'react'
 
 interface MenuTileProps {
-  style?: TwStyle
   onClick?: MouseEventHandler
   link?: string
 }
@@ -20,14 +19,20 @@ const MenuTile: React.FC<MenuTileProps> = (props) => {
   }
 
   return (
-    <div onClick={handleClick} css={[props.onClick && tw`cursor-pointer`]}>
+    <div
+      onClick={handleClick}
+      css={[
+        props.onClick &&
+          tw`cursor-pointer transform transition-transform duration-100 active:scale-95`,
+      ]}>
       <Card
         css={[
           css`
+            user-select: none;
             min-height: 8rem;
           `,
-          tw`p-4 border-none shadow-sm`,
-          props.style || tw`bg-gray-100`,
+          tw`p-4 border-none shadow-sm bg-gray-100 transition-colors duration-150 ease-in-out`,
+          props.onClick && tw`hover:bg-gray-200 active:bg-gray-200`,
         ]}>
         {props.children}
       </Card>
@@ -37,12 +42,9 @@ const MenuTile: React.FC<MenuTileProps> = (props) => {
 
 export const MenuTileContent = styled.div``
 
-export const MenuTileTitle: React.FC<{ style?: TwStyle; title: string }> = ({
-  style,
-  title,
-}) => {
+export const MenuTileTitle: React.FC<{ title: string }> = ({ title }) => {
   return (
-    <Heading size={'mega'} noMargin css={style || tw`text-gray-800`}>
+    <Heading size={'mega'} noMargin tw="text-gray-800">
       {title}
     </Heading>
   )

src/pages/Index/index.tsx

@@ -184,9 +184,7 @@ const Page: React.FC = () => {
                   {item.component ? (
                     item.component
                   ) : (
-                    <MenuTile
-                      style={item.tintColor}
-                      onClick={() => openLink(item.link)}>
+                    <MenuTile onClick={() => openLink(item.link)}>
                       <MenuTileTitle title={t(`home.${item.title}`)} />
 
                       {item.subTitle && (

src/pages/Index/menu.tsx

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import React from 'react'
-import tw, { TwStyle } from 'twin.macro'
 import gte from 'semver/functions/gte'
 
 import { Profile } from '../../types'
@@ -12,8 +11,6 @@ export interface MenuItem {
   title: string
   subTitle?: string
   link?: string
-  tintColor?: TwStyle
-  textColor?: TwStyle
   component?: JSX.Element
   isEnabled?: (
     platform: Profile['platform'] | void,

src/pages/Policies/components/PolicyGroup.tsx

@@ -102,15 +102,19 @@ const PolicyGroup: React.FC<PolicyGroupProps> = ({
           Object.keys(testResult).forEach((key) => {
             const result = testResult[key]
 
-            latencies[key] = result.receive ?? -1
+            latencies[key] = result.receive
+              ? Number(result.receive.toFixed(0))
+              : -1
           })
           setSelection((res as UrlTestPolicyTestResult).winner)
         } else {
           const testResult = res as SelectPolicyTestResult
           Object.keys(testResult).forEach((key) => {
             const result = testResult[key]
 
-            latencies[key] = result.receive ?? -1
+            latencies[key] = result.receive
+              ? Number(result.receive.toFixed(0))
+              : -1
           })
         }