From 6d6c7b7881f25a8b6ae7b504ffef3a5b693ffd87 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Fri, 15 Sep 2023 14:57:03 +0800
Subject: [PATCH] website: Fix CSS style.

---
 autocorrect-website/index.html        | 2 ++
 autocorrect-website/src/AppEditor.tsx | 6 +++---
 autocorrect-website/src/app.tsx       | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/autocorrect-website/index.html b/autocorrect-website/index.html
index d5d9f73d..f10392a6 100644
--- a/autocorrect-website/index.html
+++ b/autocorrect-website/index.html
@@ -6,6 +6,8 @@
   <title>AutoCorrect</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="manifest" href="/manifest.webmanifest">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#030712">
   <link rel="alternate icon" type="image/png"
     href="https://user-images.githubusercontent.com/5518/194691346-13856309-266b-4bf6-b505-5a8b15d0c02e.png" />
 </head>
diff --git a/autocorrect-website/src/AppEditor.tsx b/autocorrect-website/src/AppEditor.tsx
index ba883d34..a5682650 100644
--- a/autocorrect-website/src/AppEditor.tsx
+++ b/autocorrect-website/src/AppEditor.tsx
@@ -192,13 +192,13 @@ export const AppEditor = () => {
         <select
           onChange={onChangeFileType}
           value={fileType}
-          className="min-w-[250px]"
+          className="w-[180px] sm:w-[250px]"
         >
           <FileTypeOptions />
         </select>
 
-        <div className="flex flex-wrap items-center justify-between space-y-6 lg:flex-nowrap lg:space-x-6 lg:space-y-0">
-          <span className="message">{message}</span>
+        <div className="flex items-center justify-between space-x-3">
+          <span className="hidden message sm:block">{message}</span>
           <div className="flex gap-3">
             <button onClick={reloadExample}>Reset</button>
             <button className="btn-primary" onClick={formatText}>
diff --git a/autocorrect-website/src/app.tsx b/autocorrect-website/src/app.tsx
index 6e903dee..eb7a3c2d 100644
--- a/autocorrect-website/src/app.tsx
+++ b/autocorrect-website/src/app.tsx
@@ -20,6 +20,7 @@ const ExternalIcon = () => {
       viewBox="0 0 24 24"
       width="12"
       height="12"
+      className="fill-gray-400"
     >
       <path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path>
     </svg>