From 6f9a5e71f15834e0246945859eea09129e9c8811 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 24 Jun 2022 15:26:28 +0200
Subject: [PATCH] fix(ui): small design review fixes

---
 .../DashboardSelectionModal.tsx                | 16 +++++++++++++++-
 .../components/WidgetName/WidgetName.tsx       | 18 ++++++++++++++++--
 .../Session/Layout/Player/Controls.module.css  |  2 +-
 .../components/Session/Tabs/tabs.module.css    |  1 -
 .../app/components/shared/Select/Select.tsx    |  3 ++-
 .../components/ui/Confirmation/Confirmation.js | 10 +++++++++-
 6 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx b/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx
index d1592c3e8..99175e1d8 100644
--- a/frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx
+++ b/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;
\ No newline at end of file
+export default DashboardSelectionModal;
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index 82d4d0816..0c04316cb 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/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">
diff --git a/frontend/app/components/Session/Layout/Player/Controls.module.css b/frontend/app/components/Session/Layout/Player/Controls.module.css
index ec00e8766..8879514dd 100644
--- a/frontend/app/components/Session/Layout/Player/Controls.module.css
+++ b/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;
diff --git a/frontend/app/components/Session/Tabs/tabs.module.css b/frontend/app/components/Session/Tabs/tabs.module.css
index 72e5aa775..55f50749c 100644
--- a/frontend/app/components/Session/Tabs/tabs.module.css
+++ b/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;
 
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index bb0ae76ba..9f59c92d9 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/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>
     )
-  }
\ No newline at end of file
+  }
diff --git a/frontend/app/components/ui/Confirmation/Confirmation.js b/frontend/app/components/ui/Confirmation/Confirmation.js
index 2af9993dc..a2721fd4b 100644
--- a/frontend/app/components/ui/Confirmation/Confirmation.js
+++ b/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);
\ No newline at end of file
+export default confirmable(Confirmation);