From 5c94e2ece5a7f606f0b1a26255778a7e1837215e Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 1 Apr 2021 12:12:39 +0300
Subject: [PATCH] Add esc button

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/app.scss              |  5 ---
 .../components/layout/page-layout.scss        | 40 +++++++++++++++++--
 .../components/layout/page-layout.tsx         | 11 +++++
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 43f3f9ccd9..50cb9c1e38 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -220,11 +220,6 @@ a {
   }
 }
 
-// Margins
-.marginTop40 {
-  margin-top: 40px;
-}
-
 // app's common loading indicator, displaying on the route transitions
 #loading {
   position: absolute;
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index 6ae399627a..96af1a78e4 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -90,16 +90,50 @@
   }
 
   > .contentRegion {
+    display: flex;
     overflow: auto;
 
     > .content {
       width: var(--width);
       padding: 60px 40px 80px;
     }
-  }
 
-  p {
-    line-height: 140%;
+    > .toolsRegion {
+      .fixedTools {
+        position: fixed;
+        top: 60px;
+
+        .closeBtn {
+          width: 35px;
+          height: 35px;
+          display: grid;
+          place-items: center;
+          border: 2px solid var(--textColorDimmed);
+          border-radius: 50%;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #72767d4d;
+          }
+
+          &:active {
+            transform: translateY(1px);
+          }
+
+          .Icon {
+            color: var(--textColorSecondary);
+          }
+        }
+
+        .esc {
+          text-align: center;
+          margin-top: 4px;
+          font-weight: 600;
+          font-size: 14px;
+          color: var(--textColorDimmed);
+        }
+      }
+    }
   }
 
   a {
diff --git a/src/renderer/components/layout/page-layout.tsx b/src/renderer/components/layout/page-layout.tsx
index 99d0ef3711..784d4ccf7c 100644
--- a/src/renderer/components/layout/page-layout.tsx
+++ b/src/renderer/components/layout/page-layout.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
+import { Icon } from "../icon";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -74,6 +75,16 @@ export class PageLayout extends React.Component<PageLayoutProps> {
           <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
             {children}
           </div>
+          <div className="toolsRegion">
+            <div className="fixedTools">
+              <div className="closeBtn" role="button" aria-label="Close">
+                <Icon material="close"/>
+              </div>
+              <div className="esc" aria-hidden="true">
+                ESC
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     );