Add messages for devices.

components/messages.js

@@ -105,6 +105,10 @@ export const labels = defineMessages({
   uniqueVisitors: { id: 'label.unique-visitors', defaultMessage: 'Unique visitors' },
   bounceRate: { id: 'label.bounce-rate', defaultMessage: 'Bounce rate' },
   averageVisitTime: { id: 'label.average-visit-time', defaultMessage: 'Average visit time' },
+  desktop: { id: 'label.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'label.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'label.mobile', defaultMessage: 'Mobile' },
 });
 
 export const messages = defineMessages({

components/metrics/DataTable.js

@@ -90,16 +90,13 @@ const AnimatedRow = ({
     <div className={styles.row}>
       <div className={styles.label}>{label}</div>
       <div className={styles.value} onClick={onClick}>
-        <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
+        <animated.div className={styles.value}>{props.y?.to(format)}</animated.div>
       </div>
       {showPercentage && (
         <div className={styles.percent}>
-          <animated.div
+          <animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
-            className={styles.bar}
-            style={{ width: props.width.interpolate(n => `${n}%`) }}
-          />
           <animated.span className={styles.percentValue}>
-            {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+            {props.width.to(n => `${n.toFixed(0)}%`)}
           </animated.span>
         </div>
       )}

components/metrics/DevicesTable.js

@@ -1,23 +1,27 @@
 import MetricsTable from './MetricsTable';
-import { useIntl, FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
-import { getDeviceMessage } from 'components/messages';
 import FilterLink from 'components/common/FilterLink';
+import { labels } from 'components/messages';
 
 export default function DevicesTable({ websiteId, ...props }) {
   const { formatMessage } = useIntl();
 
   function renderLink({ x: device }) {
     return (
-      <FilterLink id="device" value={device} label={formatMessage(getDeviceMessage(device))} />
+      <FilterLink
+        id="device"
+        value={device}
+        label={formatMessage(labels[device] || labels.unknown)}
+      />
     );
   }
 
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
+      title={formatMessage(labels.devices)}
       type="device"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      metric={formatMessage(labels.visitors)}
       websiteId={websiteId}
       renderLabel={renderLink}
     />

components/metrics/MetricCard.js

@@ -15,7 +15,7 @@ const MetricCard = ({
 
   return (
     <div className={styles.card}>
-      <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
+      <animated.div className={styles.value}>{props.x.to(x => format(x))}</animated.div>
       <div className={styles.label}>
         {label}
         {~~change !== 0 && !hideComparison && (
@@ -30,7 +30,7 @@ const MetricCard = ({
                 : styles.positive
             } ${change >= 0 ? styles.plusSign : ''}`}
           >
-            {changeProps.x.interpolate(x => format(x))}
+            {changeProps.x.to(x => format(x))}
           </animated.span>
         )}
       </div>

components/metrics/MetricCard.module.css

@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   font-weight: 700;
-  gap: 5px;
+  gap: 10px;
   white-space: nowrap;
   min-height: 30px;
 }
@@ -28,17 +28,17 @@
   font-size: 12px;
   padding: 0 5px;
   border-radius: 5px;
-  margin-left: 4px;
-  border: 1px solid var(--base200);
   color: var(--base500);
 }
 
 .change.positive {
-  color: var(--green500);
+  color: var(--green700);
+  background: var(--green100);
 }
 
 .change.negative {
-  color: var(--red500);
+  color: var(--red700);
+  background: var(--red100);
 }
 
 .change.plusSign::before {