fix(ui): small design review fixes

frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx

@@ -26,6 +26,20 @@ function DashboardSelectionModal(props: Props) {
         }
     }
 
+    React.useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                closeHandler();
+            }
+        }
+
+        document.addEventListener('keydown', handleEsc, false);
+
+        return () => {
+            document.removeEventListener('keydown', handleEsc, false);
+        }
+    }, [])
+
     return useObserver(() => (
         <Modal size="small" open={ show }>
             <Modal.Header className="flex items-center justify-between">
@@ -64,4 +78,4 @@ function DashboardSelectionModal(props: Props) {
     ));
 }
 
-export default DashboardSelectionModal;
+export default DashboardSelectionModal;

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, KeyboardEventHandler } from 'react';
 import { Icon } from 'UI';
 import cn from 'classnames';
 import { Tooltip } from 'react-tippy';
@@ -34,7 +34,21 @@ function WidgetName(props: Props) {
     setName(props.name)
   }, [props.name])
 
-  // const { name } = props;
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        onBlur()
+      }
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        setEditing(false)
+      }
+    }
+    document.addEventListener('keypress', handler, false)
+
+    return () => {
+      document.removeEventListener('keypress', handler, false)
+    }
+  }, [])
 
   return (
     <div className="flex items-center">

frontend/app/components/Session/Layout/Player/Controls.module.css

@@ -27,7 +27,7 @@
 
 .skipIntervalButton {
   transition: all 0.2s;
-  font-size: 12px;
+  font-size: 14px;
   padding: 0 10px;
   height: 30px;
   border-radius: 3px;

frontend/app/components/Session/Tabs/tabs.module.css

@@ -15,7 +15,6 @@
     cursor: pointer;
     transition: all 0.2s;
     color: $gray-darkest;
-    border-bottom: solid thin transparent;
     font-weight: 500;
     white-space: nowrap;
 

frontend/app/components/shared/Select/Select.tsx

@@ -25,6 +25,7 @@ export default function({ placeholder='Select', name = '', onChange, right = fal
             transition: 'all 0.3s',
             backgroundColor: state.isFocused ? colors['active-blue'] : 'transparent',
             color: state.isFocused ? colors.teal : 'black',
+            fontSize: '14px',
             '&:hover': {
                 transition: 'all 0.2s',
                 backgroundColor: colors['active-blue'],
@@ -166,4 +167,4 @@ const CustomValueContainer = ({ children, ...rest }: any) => {
         {!conditional && ` and ${selectedCount - 1} others`}
       </ValueContainer>
     )
-  }
+  }

frontend/app/components/ui/Confirmation/Confirmation.js

@@ -11,6 +11,14 @@ const Confirmation = ({
   cancelButton = "Cancel",
   confirmButton = "Proceed",
 }) => {
+  React.useEffect(() => {
+    const handleEsc = (e) => (e.key === 'Escape' || e.key === 'Esc') && proceed(false);
+    document.addEventListener('keydown', handleEsc, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleEsc, false);
+    }
+  }, [])
   return (
     <Modal
       open={show}
@@ -38,4 +46,4 @@ const Confirmation = ({
   )
 }
  
-export default confirmable(Confirmation);
+export default confirmable(Confirmation);