fix(ui): fix button focusing and nocontent icon size

frontend/.prettierrc

@@ -1,6 +1,6 @@
 {
-  "tabWidth": 4,
+  "tabWidth": 2,
   "useTabs": false,
-  "printWidth": 150,
+  "printWidth": 100,
   "singleQuote": true
 }

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -24,8 +24,8 @@ function DashboardList() {
             show={lenth === 0}
             title={
               <div className="flex flex-col items-center justify-center">
-                <Icon name="no-dashboard" size={170} color="figmaColors-accent-secondary" />
+                <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
-                <div className="mt-6 text-xl">You haven't created any dashboards yet</div>
+                <div className="mt-3 text-xl">You haven't created any dashboards yet</div>
               </div>
             }   
         >

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -30,8 +30,8 @@ function MetricsList({ siteId }: { siteId: string }) {
             show={lenth === 0}
             title={
                 <div className="flex flex-col items-center justify-center">
-                    <Icon name="no-metrics" size={170} color="figmaColors-accent-secondary" />
+                    <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
-                    <div className="mt-6 text-xl">You haven't created any metrics yet</div>
+                    <div className="mt-3 text-xl">You haven't created any metrics yet</div>
                 </div>
             }   
         >

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -8,7 +8,6 @@ import {
   selectStorageListNow,
 } from 'Player/store';
 import LiveTag from 'Shared/LiveTag';
-import { session as sessionRoute, withSiteId } from 'App/routes';
 import {
   toggleTimetravel,
   jumpToLive,
@@ -31,7 +30,7 @@ import {
   EXCEPTIONS,
   INSPECTOR,
 } from 'Duck/components/player';
-import { ReduxTime, AssistDuration } from './Time';
+import { AssistDuration } from './Time';
 import Timeline from './Timeline';
 import ControlButton from './ControlButton';
 import PlayerControls from './components/PlayerControls'
@@ -121,7 +120,6 @@ function getStorageName(type) {
   toggleBottomBlock,
 })
 export default class Controls extends React.Component {
-
   componentDidMount() {
     document.addEventListener('keydown', this.onKeyDown);
   }
@@ -318,6 +316,7 @@ export default class Controls extends React.Component {
                   toggleSkip={toggleSkip}
                   playButton={this.renderPlayBtn()}
                   controlIcon={this.controlIcon}
+                  ref={this.speedRef}
                 />
               )}
 

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React from 'react';
 import { Tooltip } from 'react-tippy';
 import { ReduxTime } from '../Time';
 import { Icon } from 'UI';
 import cn from 'classnames';
 // @ts-ignore
-import styles from '../controls.module.css'
+import styles from '../controls.module.css';
 
 interface Props {
   live: boolean;
@@ -16,22 +16,51 @@ interface Props {
   forthTenSeconds: () => void;
   toggleSpeed: () => void;
   toggleSkip: () => void;
-  controlIcon: (icon: string, size: number, action: () => void, isBackwards: boolean, additionalClasses: string) => JSX.Element;
+  controlIcon: (
+    icon: string,
+    size: number,
+    action: () => void,
+    isBackwards: boolean,
+    additionalClasses: string
+  ) => JSX.Element;
 }
 
 function PlayerControls(props: Props) {
-  const { 
+  const {
-    live, 
+    live,
-    skip, 
+    skip,
-    speed, 
+    speed,
-    disabled, 
+    disabled,
-    playButton, 
+    playButton,
-    backTenSeconds, 
+    backTenSeconds,
-    forthTenSeconds, 
+    forthTenSeconds,
-    toggleSpeed, 
+    toggleSpeed,
-    toggleSkip, 
+    toggleSkip,
-    controlIcon 
+    controlIcon,
   } = props;
+
+  const speedRef = React.useRef(null);
+  const arrowBackRef = React.useRef(null);
+  const arrowForwardRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const handleKeyboard = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight') {
+        arrowForwardRef.current.focus();
+      }
+      if (e.key === 'ArrowLeft') {
+        arrowBackRef.current.focus();
+      }
+      if (e.key === 'ArrowDown') {
+        speedRef.current.focus();
+      }
+      if (e.key === 'ArrowUp') {
+        speedRef.current.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyboard);
+    return () => document.removeEventListener('keydown', handleKeyboard);
+  }, [speedRef, arrowBackRef, arrowForwardRef]);
   return (
     <div className="flex items-center">
       {playButton}
@@ -47,46 +76,41 @@ function PlayerControls(props: Props) {
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
-        <Tooltip
+        <Tooltip title="Rewind 10s" delay={0} position="top">
-          title='Rewind 10s'
+          <button ref={arrowBackRef} className="h-full focus:border focus:border-blue">
-          delay={0}
+            {controlIcon(
-          position="top"
+              'skip-forward-fill',
-        >
+              18,
-          {controlIcon(
+              backTenSeconds,
-            "skip-forward-fill",
+              true,
-            18,
+              'hover:bg-active-blue-border color-main h-full flex items-center'
-            backTenSeconds,
+            )}
-            true,
+          </button>
-            'hover:bg-active-blue-border color-main h-full flex items-center'
-          )}
         </Tooltip>
-        <div className='p-1 border-l border-r bg-active-blue-border border-active-blue-border'>10s</div>
+        <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
+          10s
+        </div>
         {/* @ts-ignore */}
-        <Tooltip
+        <Tooltip title="Forward 10s" delay={0} position="top">
-          title='Forward 10s'
+          <button ref={arrowForwardRef} className="h-full focus:border focus:border-blue">
-          delay={0}
+            {controlIcon(
-          position="top"
+              'skip-forward-fill',
-        >
+              18,
-          {controlIcon(
+              forthTenSeconds,
-            "skip-forward-fill",
+              false,
-            18,
+              'hover:bg-active-blue-border color-main h-full flex items-center'
-            forthTenSeconds,
+            )}
-            false,
+          </button>
-            'hover:bg-active-blue-border color-main h-full flex items-center'
-          )}
         </Tooltip>
       </div>
 
-      {!live &&
+      {!live && (
-        <div className='flex items-center mx-4'>
+        <div className="flex items-center mx-4">
           {/* @ts-ignore */}
-          <Tooltip
+          <Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
-            title='Playback speed'
-            delay={0}
-            position="top"
-          >
             <button
-              className={styles.speedButton}
+              ref={speedRef}
+              className={cn(styles.speedButton, 'focus:border focus:border-blue')}
               onClick={toggleSpeed}
               data-disabled={disabled}
             >
@@ -95,7 +119,11 @@ function PlayerControls(props: Props) {
           </Tooltip>
 
           <button
-            className={cn(styles.skipIntervalButton, { [styles.withCheckIcon]: skip, [styles.active]: skip }, 'ml-4')}
+            className={cn(
+              styles.skipIntervalButton,
+              { [styles.withCheckIcon]: skip, [styles.active]: skip },
+              'ml-4'
+            )}
             onClick={toggleSkip}
             data-disabled={disabled}
           >
@@ -103,9 +131,9 @@ function PlayerControls(props: Props) {
             {'Skip Inactivity'}
           </button>
         </div>
-      }
+      )}
     </div>
-  )
+  );
 }
 
 export default PlayerControls;