From 5fbbae3f1b1398194d34ef11e9674c571b028e31 Mon Sep 17 00:00:00 2001
From: Chaejun Lee <chaejunlee@knu.ac.kr>
Date: Wed, 19 Jul 2023 23:29:16 +0900
Subject: [PATCH 1/4] feat(client): add guide to press Esc for closing the
 overlay

---
 packages/vite/src/client/overlay.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 9469dd5149a7e7..49b9aae194a1e4 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -104,6 +104,7 @@ pre::-webkit-scrollbar {
   color: #999;
   border-top: 1px dotted #999;
   padding-top: 13px;
+  line-height: 1.8;
 }
 
 code {
@@ -116,6 +117,21 @@ code {
   text-decoration: underline;
   cursor: pointer;
 }
+
+.keyboard-key {
+  line-height: 1.5;
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background-color: rgb(66, 69 ,76);
+  color: rgb(193, 194, 197);
+  padding: 0.15rem 0.3rem;
+  border-radius: 0.25rem;
+  border-width: 0.0625rem 0.0625rem 0.1875rem;
+  border-style: solid;
+  border-color: rgb(70, 74, 83);
+  border-image: initial;
+}
 </style>
 <div class="backdrop" part="backdrop">
   <div class="window" part="window">
@@ -124,7 +140,7 @@ code {
     <pre class="frame" part="frame"></pre>
     <pre class="stack" part="stack"></pre>
     <div class="tip" part="tip">
-      Click outside or fix the code to dismiss.<br>
+      Click outside, press <span class="keyboard-key">Esc</span> key or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
     </div>

From c129c16ee986e98ceea25ee86c9cea3af5786b14 Mon Sep 17 00:00:00 2001
From: Chaejun Lee <chaejunlee@knu.ac.kr>
Date: Thu, 20 Jul 2023 23:53:24 +0900
Subject: [PATCH 2/4] fix(client): change style of `Esc`

---
 packages/vite/src/client/overlay.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 49b9aae194a1e4..46de6c2f350432 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -118,18 +118,18 @@ code {
   cursor: pointer;
 }
 
-.keyboard-key {
+.kbd {
   line-height: 1.5;
   font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.75rem;
   font-weight: 700;
-  background-color: rgb(66, 69 ,76);
-  color: rgb(193, 194, 197);
+  background-color: rgb(38, 40, 44);
+  color: rgb(166, 167, 171);
   padding: 0.15rem 0.3rem;
   border-radius: 0.25rem;
   border-width: 0.0625rem 0.0625rem 0.1875rem;
   border-style: solid;
-  border-color: rgb(70, 74, 83);
+  border-color: rgb(54, 57, 64);
   border-image: initial;
 }
 </style>
@@ -140,7 +140,7 @@ code {
     <pre class="frame" part="frame"></pre>
     <pre class="stack" part="stack"></pre>
     <div class="tip" part="tip">
-      Click outside, press <span class="keyboard-key">Esc</span> key or fix the code to dismiss.<br>
+      Click outside, press <span class="kbd">Esc</span> key or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
     </div>

From d0a4fa929c7b01fd0aa09196043163021fa76f53 Mon Sep 17 00:00:00 2001
From: Chaejun Lee <chaejunlee@knu.ac.kr>
Date: Thu, 20 Jul 2023 23:55:01 +0900
Subject: [PATCH 3/4] fix(client): apply oxford comma

---
 packages/vite/src/client/overlay.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 46de6c2f350432..1743b7d0272a80 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -140,7 +140,7 @@ code {
     <pre class="frame" part="frame"></pre>
     <pre class="stack" part="stack"></pre>
     <div class="tip" part="tip">
-      Click outside, press <span class="kbd">Esc</span> key or fix the code to dismiss.<br>
+      Click outside, press <span class="kbd">Esc</span> key, or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
     </div>

From 80536a2b3c7ebd8151125518a1803431c8d69738 Mon Sep 17 00:00:00 2001
From: Chaejun Lee <chaejunlee@knu.ac.kr>
Date: Fri, 21 Jul 2023 16:23:30 +0900
Subject: [PATCH 4/4] fix: change to `kbd` tag

---
 packages/vite/src/client/overlay.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 1743b7d0272a80..9951510f916a30 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -118,7 +118,7 @@ code {
   cursor: pointer;
 }
 
-.kbd {
+kbd {
   line-height: 1.5;
   font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.75rem;
@@ -140,7 +140,7 @@ code {
     <pre class="frame" part="frame"></pre>
     <pre class="stack" part="stack"></pre>
     <div class="tip" part="tip">
-      Click outside, press <span class="kbd">Esc</span> key, or fix the code to dismiss.<br>
+      Click outside, press <kbd>Esc</kbd> key, or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
     </div>