Merge pull request #47 from storytold/bflat-nav-styling

navbar styling, link fixes and login/signup page fixes

packages/fakeyou/src/AppNew.scss

@@ -62,6 +62,11 @@ $headings-font-family: "Merriweather", serif;
     cursor: pointer;
   }
 
+  .btn:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
   /*p {
     a:link, 
     a:visited {
@@ -204,13 +209,13 @@ $headings-font-family: "Merriweather", serif;
     backdrop-filter: blur(5px);
     border-bottom: 1px solid;
     border-color: rgba(255, 255, 255, 0.06);
+  }
 
-    .top-bar-text {
-      color: rgba($white, 0.7);
-      font-size: 12px;
-      font-weight: 400;
-      transition: 0.2s;
-    }
+  .top-bar-text {
+    color: rgba($white, 0.7);
+    font-size: 14px;
+    font-weight: 400;
+    transition: 0.2s;
   }
 
   .dropdown-divider-white {
@@ -428,5 +433,9 @@ $headings-font-family: "Merriweather", serif;
         }
       }
     }
+
+    .top-bar-text {
+      font-size: 12px;
+    }
   }
 }

packages/fakeyou/src/scss/site-refresh.scss

@@ -492,6 +492,10 @@ styles with important tags:
   .alert {
     font-size: 14px;
   }
+
+  .rounded-circle {
+    border-radius: 50px;
+  }
 }
 
 @media (min-width: 992px) {

packages/fakeyou/src/v2/view/NewTopNavFc.tsx

@@ -16,6 +16,7 @@ import {
   faTrophy,
   faUpload,
   faUser,
+  faSignOutAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import { faPatreon } from "@fortawesome/free-brands-svg-icons";
 import { t } from "i18next";
@@ -238,28 +239,26 @@ function NewTopNavFc(props: Props) {
   const logoutHandler = async () => {
     await Logout();
     props.querySessionCallback();
-    history.push('/');
-  }
+    history.push("/");
+  };
 
   const loggedIn = props.sessionWrapper.isLoggedIn();
 
   let userOrLoginButton = (
     <>
-      <Link
-        data-bs-toggle="offcanvas"
-        className="nav-login me-3"
-        to="/login"
-      >
-        Login
+      <Link to="/login">
+        <span className="nav-login me-4" data-bs-toggle="offcanvas">
+          Login
+        </span>
       </Link>
     </>
   );
 
-  let signupOrLogOutButton =  (
+  let signupOrLogOutButton = (
     <>
-      <Link data-bs-toggle="offcanvas" to="/signup">
-        <button type="button" className="btn btn-primary btn-lg">
-          Sign up
+      <Link to="/signup">
+        <button className="btn btn-primary" data-bs-toggle="offcanvas">
+          Sign Up
         </button>
       </Link>
     </>
@@ -271,36 +270,34 @@ function NewTopNavFc(props: Props) {
     let gravatar = <span />;
 
     if (displayName === undefined) {
-      displayName = 'My Account';
+      displayName = "My Account";
     }
 
     if (gravatarHash !== undefined) {
-      gravatar = <Gravatar email_hash={gravatarHash} size={15} />
+      gravatar = <Gravatar email_hash={gravatarHash} size={15} />;
     }
 
     let url = `/profile/${displayName}`;
     userOrLoginButton = (
       <>
-        <Link
-          className="nav-login me-3"
-          to={url}
-          >
-          {gravatar}&nbsp; {displayName}
+        <Link className="btn btn-secondary me-3" to={url}>
+          <span data-bs-toggle="offcanvas">
+            {gravatar}&nbsp; {displayName}
+          </span>
         </Link>
-
       </>
     );
 
     signupOrLogOutButton = (
       <>
-        <button 
-          type="button" 
-          className="btn btn-primary btn-lg"
+        <button
+          type="button"
+          className="btn btn-destructive d-flex gap-2 align-items-center"
           onClick={async () => {
             await logoutHandler();
           }}
-          >
-          Log Out
+        >
+          <FontAwesomeIcon icon={faSignOutAlt} /> Log Out
         </button>
       </>
     );
@@ -325,9 +322,9 @@ function NewTopNavFc(props: Props) {
             </a>
           </div>
           <div className="d-flex gap-4">
-            <p className="top-bar-text">
+            {/* <p className="top-bar-text">
               Online Users: <span className="fw-bold text-red">1,204</span>
-            </p>
+            </p> */}
             <p className="top-bar-text">
               TTS Queued: <span className="fw-bold text-red">48</span>
             </p>
@@ -469,7 +466,7 @@ function NewTopNavFc(props: Props) {
                       <div className="dropdown-divider"></div>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/profile">
+                      <Link className="dropdown-item" to={myDataLink}>
                         <FontAwesomeIcon icon={faUser} className="me-2" />
                         My Data
                       </Link>
@@ -501,12 +498,12 @@ function NewTopNavFc(props: Props) {
 
                 <li className="ps-3 d-lg-none">
                   <div className="d-flex gap-4 py-2">
-                    <p className="top-bar-text">
+                    {/* <p className="top-bar-text">
                       Online: <span className="fw-bold text-red">1,204</span>
-                    </p>
-                    <p className="top-bar-text">
-                      Queued: <span className="fw-bold text-red">48</span>
-                    </p>
+                    </p> */}
+                    <div className="top-bar-text mobile">
+                      TTS Queued: <span className="fw-bold text-red ">48</span>
+                    </div>
                   </div>
                 </li>
 
@@ -514,7 +511,7 @@ function NewTopNavFc(props: Props) {
                   <div className="dropdown-divider dropdown-divider-white"></div>
                 </li>
               </ul>
-              <div className="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
+              <div className="d-grid d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
                 {userOrLoginButton}
                 {signupOrLogOutButton}
               </div>

packages/fakeyou/src/v2/view/login/LoginPage.tsx

@@ -78,7 +78,7 @@ function LoginPage(props: Props) {
         <div className="notification is-danger is-light">
           <strong>Login Error:</strong> {errorMessage}
         </div>
-      )
+      );
     } else {
       errorWarning = (
         <div className="alert alert-danger mb-4">
@@ -92,36 +92,49 @@ function LoginPage(props: Props) {
     return (
       <div>
         <h1 className="title is-1"> Login </h1>
-  
+
         {errorWarning}
-  
+
         <form onSubmit={handleFormSubmit}>
           <div className="field">
             <label className="label">Username or Email</label>
             <div className="control has-icons-left has-icons-right">
-              <input className="input" type="text" placeholder="Username or Email" value={usernameOrEmail} onChange={handleUsernameOrEmailChange} />
+              <input
+                className="input"
+                type="text"
+                placeholder="Username or Email"
+                value={usernameOrEmail}
+                onChange={handleUsernameOrEmailChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faUser} />
               </span>
             </div>
             {/*<p className="help"></p>*/}
           </div>
-  
+
           <div className="field">
             <label className="label">Password</label>
             <div className="control has-icons-left has-icons-right">
-              <input className="input" type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
+              <input
+                className="input"
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={handlePasswordChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
             </div>
             {/*<p className="help"></p>*/}
           </div>
-  
+
           <br />
-  
-          <button className="button is-link is-large is-fullwidth">Login</button>
-  
+
+          <button className="button is-link is-large is-fullwidth">
+            Login
+          </button>
         </form>
       </div>
     );
@@ -131,7 +144,7 @@ function LoginPage(props: Props) {
     <div>
       <Fade bottom duration={duration} distance={distance}>
         <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
-          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
             <h1 className="panel-title fw-bold">Login</h1>
             <div className="py-6">
               {errorWarning}
@@ -177,10 +190,9 @@ function LoginPage(props: Props) {
                     Login
                   </button>
                   <p>
-                    Don’t have an account?
-                    &nbsp;
-                    <Link 
-                      to={FrontendUrlConfig.signupPage()} 
+                    Don’t have an account? &nbsp;
+                    <Link
+                      to={FrontendUrlConfig.signupPage()}
                       className="text-link"
                     >
                       Create an account now.

packages/fakeyou/src/v2/view/signup/SignupPage.tsx

@@ -207,7 +207,20 @@ function SignupPage(props: Props) {
   };
 
   if (props.sessionWrapper.isLoggedIn()) {
-    return <div>Invalid view for logged in users.</div>;
+    return (
+      <div className="container py-5">
+        <div className="py-5">
+          <h1 className="fw-semibold text-center mb-4">
+            Invalid view for logged in users.
+          </h1>
+          <div className="text-center">
+            <Link className="btn btn-primary" to="/">
+              Back to main
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   let usernameInputClass = USE_REFRESH ? "form-control" : "input";
@@ -274,45 +287,69 @@ function SignupPage(props: Props) {
     return (
       <div>
         <h1 className="title is-1"> Sign Up </h1>
-  
+
         <form onSubmit={handleFormSubmit}>
           <div className="field">
             <label className="label">Username</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={usernameInputClass} type="text" placeholder="Username" value={username} onChange={handleUsernameChange} />
+              <input
+                className={usernameInputClass}
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={handleUsernameChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faUser} />
               </span>
             </div>
             <p className={usernameHelpClass}>{usernameInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Email</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={emailInputClass} type="email" placeholder="Email" value={email} onChange={handleEmailChange} />
+              <input
+                className={emailInputClass}
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={handleEmailChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faEnvelope} />
               </span>
             </div>
             <p className={emailHelpClass}>{emailInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Password</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={passwordInputClass} type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
+              <input
+                className={passwordInputClass}
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={handlePasswordChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
             </div>
             <p className={passwordHelpClass}>{passwordInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Password Confirmation</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={passwordConfirmationInputClass} type="password" placeholder="Password confirmation" value={passwordConfirmation} onChange={handlePasswordConfirmationChange} />
+              <input
+                className={passwordConfirmationInputClass}
+                type="password"
+                placeholder="Password confirmation"
+                value={passwordConfirmation}
+                onChange={handlePasswordConfirmationChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
@@ -321,24 +358,29 @@ function SignupPage(props: Props) {
               {passwordConfirmationInvalidReason}
             </p>
           </div>
-  
+
           <br />
-  
+
           <div className="notification is-warning">
-            <strong>Remember your password!</strong> We don't have password reset currently, and it'll be a 
-            few more weeks before it's added (there are more important features to work on). If you lose your
+            <strong>Remember your password!</strong> We don't have password
+            reset currently, and it'll be a few more weeks before it's added
+            (there are more important features to work on). If you lose your
             password, please let us know in Discord.
           </div>
-  
-          <button className="button is-link is-large is-fullwidth">Sign up</button>
+
+          <button className="button is-link is-large is-fullwidth">
+            Sign up
+          </button>
         </form>
-  
+
         <br />
-  
-        <Link to="/login"
+
+        <Link
+          to="/login"
           className="button is-info is-large is-fullwidth is-inverted"
-          >Already have an account? Log in instead!</Link>
-  
+        >
+          Already have an account? Log in instead!
+        </Link>
       </div>
     );
   }
@@ -347,7 +389,7 @@ function SignupPage(props: Props) {
     <div>
       <Fade bottom duration={duration} distance={distance}>
         <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
-          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
             <h1 className="panel-title fw-bold ">Sign Up</h1>
             <div className="py-6">
               <form onSubmit={handleFormSubmit}>
@@ -429,13 +471,8 @@ function SignupPage(props: Props) {
                     Sign up
                   </button>
                   <p>
-                    Already have an account?
-                    <Link
-                      to="/login"
-                      className="button is-info is-large is-fullwidth is-inverted"
-                    >
-                      Log in instead.
-                    </Link>
+                    Already have an account?{" "}
+                    <Link to="/login">Log in instead.</Link>
                   </p>
                 </div>
               </form>