chore: update style issues from feedback

components/ChatView/Header.tsx

@@ -22,11 +22,18 @@ const Header = (props: Props) => {
         className || ""
       } sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white z-1`}
     >
-      <div className="ml-2 flex justify-center items-center">
+      <div className="ml-2 flex justify-start items-center">
         <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
           <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
         </label>
         <span className="w-auto text-left block lg:hidden">{title}</span>
+        <a
+          className="ml-1 w-10 h-10 p-1 rounded-lg hidden lg:flex flex-row justify-center items-center hover:bg-gray-100"
+          href="https://github.com/bytebase/sqlchat"
+          target="_blank"
+        >
+          <Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
+        </a>
       </div>
       <span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
       <div className="mr-2 sm:mr-4 relative flex flex-row justify-end items-center">

components/ChatView/MessageView.tsx

@@ -23,7 +23,7 @@ const MessageView = (props: Props) => {
     >
       {isCurrentUser ? (
         <>
-          <div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre-wrap">
+          <div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg whitespace-pre-wrap">
             {message.content}
           </div>
           <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center ml-2 shrink-0">
@@ -36,7 +36,7 @@ const MessageView = (props: Props) => {
             <Icon.AiOutlineRobot className="w-6 h-6" />
           </div>
           <ReactMarkdown
-            className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
+            className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral"
             remarkPlugins={[remarkGfm]}
             components={{
               pre({ node, className, children, ...props }) {

components/ClearDataConfirmModal.tsx

@@ -25,7 +25,7 @@ const ClearDataConfirmModal = (props: Props) => {
           <Icon.IoMdClose className="w-5 h-auto" />
         </button>
         <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
-          <p className="text-gray-500">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
+          <p className="text-gray-500">SQL Chat saves all your data in your local browser. Are you sure to clear all of them?</p>
         </div>
         <div className="modal-action">
           <button className="btn btn-outline" onClick={close}>

components/ConnectionSidebar.tsx

@@ -125,6 +125,14 @@ const ConnectionSidebar = () => {
               </button>
             </div>
             <div className="w-full flex flex-col justify-end items-center">
+              <a
+                className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex lg:hidden flex-row justify-center items-center hover:bg-gray-100"
+                href="https://github.com/bytebase/sqlchat"
+                data-tip="GitHub"
+                target="_blank"
+              >
+                <Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
+              </a>
               <button
                 className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
                 data-tip="Setting"
@@ -132,14 +140,6 @@ const ConnectionSidebar = () => {
               >
                 <Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
               </button>
-              <a
-                className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
-                href="https://github.com/bytebase/sqlchat"
-                data-tip="GitHub"
-                target="_blank"
-              >
-                <Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
-              </a>
             </div>
           </div>
           <div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>

components/CreateConnectionModal.tsx

@@ -96,19 +96,19 @@ const CreateConnectionModal = (props: Props) => {
             />
           </div>
           <div className="w-full flex flex-col">
-            <label className="block text-sm font-medium text-gray-700 mb-1">Admin Username</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
             <input
               type="text"
-              placeholder="Connect admin username"
+              placeholder="Connect username"
               className="input input-bordered w-full"
               onChange={(e) => setPartialConnection({ username: e.target.value })}
             />
           </div>
           <div className="w-full flex flex-col">
-            <label className="block text-sm font-medium text-gray-700 mb-1">Admin Password</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
             <input
               type="text"
-              placeholder="Connect admin password"
+              placeholder="Connect password"
               className="input input-bordered w-full"
               onChange={(e) => setPartialConnection({ password: e.target.value })}
             />

components/EmptyView.tsx

@@ -43,7 +43,7 @@ const EmptyView = (props: Props) => {
 
   return (
     <div className={`${className || ""} w-full h-full flex flex-col justify-start items-center`}>
-      <p className=" text-5xl font-medium leading-loose mb-8">SQLChat</p>
+      <p className=" text-5xl font-medium leading-loose mb-8">SQL Chat</p>
       <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
         <div className="w-full flex flex-col justify-start items-center">
           <Icon.BsSun className="w-8 h-auto opacity-80" />
@@ -51,7 +51,7 @@ const EmptyView = (props: Props) => {
           {examples.map((example) => (
             <div
               key={example}
-              className="w-full rounded-lg px-4 py-3 text-sm mb-4 leading-6 cursor-pointer bg-gray-50 hover:bg-gray-100"
+              className="w-full rounded-lg px-4 py-3 text-sm mb-4 cursor-pointer bg-gray-50 hover:bg-gray-100"
               onClick={() => handleExampleClick(example)}
             >
               {`"${example}"`} →

components/MessageLoader.tsx

@@ -7,7 +7,7 @@ const MessageLoader = () => {
       <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
         <Icon.AiOutlineRobot className="w-6 h-6" />
       </div>
-      <div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow">
+      <div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg">
         <ThreeDots wrapperClass="opacity-80" width="24" height="24" color="" />
       </div>
     </div>

components/SettingModal.tsx

@@ -43,7 +43,6 @@ const SettingModal = (props: Props) => {
                     Clear
                   </button>
                 </h4>
-                <p className="text-gray-500 text-sm">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
               </div>
             </div>
           </div>

store/chat.ts

@@ -8,7 +8,7 @@ const getDefaultChat = (): Chat => {
   return {
     id: generateUUID(),
     assistantId: "sql-assistant",
-    title: "SQL Chat " + dayjs().format("LTS"),
+    title: dayjs().format("LTS"),
     createdAt: Date.now(),
   };
 };