Refactored realtime API. Add dot component and colored dots in log.

components/metrics/ActiveUsers.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
+import Dot from 'components/common/Dot';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, token, className }) {
@@ -19,7 +20,7 @@ export default function ActiveUsers({ websiteId, token, className }) {
 
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.dot} />
+      <Dot />
       <div className={styles.text}>
         <div>
           <FormattedMessage