chore: update demo user

store/seed/10001__user.sql

@@ -10,10 +10,10 @@ INSERT INTO
 VALUES
   (
     101, 
-    'steven@memos.com',
+    'demo@usememos.com',
     'OWNER',
-    'Steven',
+    'Demo Owner',
-    'steven_open_id',
+    'demo_open_id',
     -- raw password: secret
     '$2a$14$ajq8Q7fbtFRQvXpdCq7Jcuy.Rx1h/L4J60Otx.gyNLbAYctGMJ9tK'
   );

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>

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;

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,15 +43,15 @@
           @apply py-2;
 
           > input {
-            @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400;
+            @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80;
+          }
+        }
       }
 
-          &:hover {
+      &.requesting {
         @apply opacity-80;
       }
     }
-      }
-    }
 
     > .action-btns-container {
       .flex(row, flex-end, center);
@@ -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;
     }
   }
 }

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
+          {siteOwner || pageLoadingState.isLoading
-            ? "If you don't have an account, please contact the site owner or login as guest."
+            ? "If you don't have an account, please\ncontact the site owner."
             : "You are registering as the site owner."}
         </p>
       </div>

web/tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
     },
     extend: {
       spacing: {
+        112: "28rem",
         128: "32rem",
         168: "42rem",
         176: "44rem",