From 3fdc5bb2b1665aab415225f8b543b74af9c78629 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Fri, 20 May 2022 06:48:55 +0800
Subject: [PATCH] chore: update demo user

---
 store/seed/10001__user.sql             |  6 +++---
 web/src/components/AboutSiteDialog.tsx |  2 +-
 web/src/less/about-site-dialog.less    |  2 +-
 web/src/less/signin.less               | 14 +++++++-------
 web/src/pages/Signin.tsx               | 18 +++++++++---------
 web/tailwind.config.js                 |  1 +
 6 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/store/seed/10001__user.sql b/store/seed/10001__user.sql
index efd53675..5557dad1 100644
--- a/store/seed/10001__user.sql
+++ b/store/seed/10001__user.sql
@@ -10,10 +10,10 @@ INSERT INTO
 VALUES
   (
     101, 
-    'steven@memos.com',
+    'demo@usememos.com',
     'OWNER',
-    'Steven',
-    'steven_open_id',
+    'Demo Owner',
+    'demo_open_id',
     -- raw password: secret
     '$2a$14$ajq8Q7fbtFRQvXpdCq7Jcuy.Rx1h/L4J60Otx.gyNLbAYctGMJ9tK'
   );
diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index 30a14e08..934349df 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -38,7 +38,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
       </div>
       <div className="dialog-content-container">
         <p>
-          Memos is an <i>open source</i>, <i>self-hosted</i> knowledge base that works with local SQLite.
+          Memos is an <i>open source</i>, <i>self-hosted</i> knowledge base that works with a SQLite db file.
         </p>
         <br />
         <p>
diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less
index 6f65fadd..92c1522c 100644
--- a/web/src/less/about-site-dialog.less
+++ b/web/src/less/about-site-dialog.less
@@ -2,7 +2,7 @@
 
 .about-site-dialog {
   > .dialog-container {
-    @apply w-96;
+    @apply w-112;
 
     > .dialog-content-container {
       @apply leading-relaxed;
diff --git a/web/src/less/signin.less b/web/src/less/signin.less
index 08ab0dc9..926ade62 100644
--- a/web/src/less/signin.less
+++ b/web/src/less/signin.less
@@ -19,7 +19,7 @@
       }
 
       > .slogan-text {
-        @apply mt-2 text-sm text-gray-600;
+        @apply mt-2 text-sm text-gray-700;
       }
     }
 
@@ -43,14 +43,14 @@
           @apply py-2;
 
           > input {
-            @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400;
-          }
-
-          &:hover {
-            @apply opacity-80;
+            @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80;
           }
         }
       }
+
+      &.requesting {
+        @apply opacity-80;
+      }
     }
 
     > .action-btns-container {
@@ -71,7 +71,7 @@
     }
 
     > .tip-text {
-      @apply w-full text-sm mt-4 text-gray-500 text-right;
+      @apply w-full text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
     }
   }
 }
diff --git a/web/src/pages/Signin.tsx b/web/src/pages/Signin.tsx
index 8123c89a..f15bf21d 100644
--- a/web/src/pages/Signin.tsx
+++ b/web/src/pages/Signin.tsx
@@ -26,7 +26,7 @@ const Signin: React.FC<Props> = () => {
     api.getSystemStatus().then((status) => {
       setSiteOwner(status.owner);
       if (status.profile.mode === "dev") {
-        setEmail("steven@memos.com");
+        setEmail("demo@usememos.com");
         setPassword("secret");
       }
       pageLoadingState.setFinish();
@@ -110,28 +110,28 @@ const Signin: React.FC<Props> = () => {
   };
 
   return (
-    <div className={`page-wrapper signin ${pageLoadingState.isLoading ? "hidden" : ""}`}>
+    <div className="page-wrapper signin">
       <div className="page-container">
         <div className="page-header-container">
           <p className="title-text">
             <span className="icon-text">✍️</span> Memos
           </p>
           <p className="slogan-text">
-            An <i>open source</i>, <i>self-hosted</i> knowledge base that works with local SQLite.
+            An <i>open source</i>, <i>self-hosted</i> knowledge base that works with a SQLite db file.
           </p>
         </div>
-        <div className="page-content-container">
+        <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
           <div className="form-item-container input-form-container">
-            <span className={"normal-text " + (email === "" ? "" : "not-null")}>Email</span>
+            <span className={`normal-tex ${email ? "not-null" : ""}`}>Email</span>
             <input type="email" value={email} onChange={handleEmailInputChanged} />
           </div>
           <div className="form-item-container input-form-container">
-            <span className={"normal-text " + (password === "" ? "" : "not-null")}>Password</span>
+            <span className={`normal-text ${password ? "not-null" : ""}`}>Password</span>
             <input type="password" value={password} onChange={handlePasswordInputChanged} />
           </div>
         </div>
         <div className="action-btns-container">
-          {siteOwner ? (
+          {siteOwner || pageLoadingState.isLoading ? (
             <button
               className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
               onClick={() => handleSigninBtnsClick()}
@@ -148,8 +148,8 @@ const Signin: React.FC<Props> = () => {
           )}
         </div>
         <p className="tip-text">
-          {siteOwner
-            ? "If you don't have an account, please contact the site owner or login as guest."
+          {siteOwner || pageLoadingState.isLoading
+            ? "If you don't have an account, please\ncontact the site owner."
             : "You are registering as the site owner."}
         </p>
       </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 5279c358..abec876a 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
     },
     extend: {
       spacing: {
+        112: "28rem",
         128: "32rem",
         168: "42rem",
         176: "44rem",