feat: updated

src/routes/home/index.js

@@ -16,8 +16,12 @@ import NotificationHub from "../../common/component/NotificationHub";
 
 export default function HomePage() {
   const dispatch = useDispatch();
-  const { menuExpand, token } = useSelector((store) => {
-    return { token: store.authData.token, menuExpand: store.ui.menuExpand };
+  const { menuExpand, token, usersVersion } = useSelector((store) => {
+    return {
+      token: store.authData.token,
+      usersVersion: store.authData.usersVersion,
+      menuExpand: store.ui.menuExpand,
+    };
   });
   const { data, error, success } = usePreload();
   const toggleExpand = () => {
@@ -26,7 +30,7 @@ export default function HomePage() {
   console.log({ data, error, success });
   return (
     <>
-      <NotificationHub token={token} />
+      <NotificationHub token={token} usersVersion={usersVersion} />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList

src/routes/login/index.js

@@ -55,12 +55,21 @@ export default function LoginPage() {
   return (
     <StyledWrapper>
       <div className="form">
+        <div className="tips">
+          <img
+            src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
+            alt="logo"
+            className="logo"
+          />
+          <h2 className="title">Login to Rustchat</h2>
+          <span className="desc">Please enter your details.</span>
+        </div>
         <form onSubmit={handleLogin}>
           <input
             name="email"
             value={email}
             required
-            placeholder="email"
+            placeholder="Enter your email"
             data-type="email"
             onChange={handleInput}
           />
@@ -71,10 +80,16 @@ export default function LoginPage() {
             required
             data-type="password"
             onChange={handleInput}
-            placeholder="password"
+            placeholder="Enter your password"
           />
-          <button type="submit">login</button>
+          <button className="btn" type="submit">
+            Sign in
+          </button>
         </form>
+        <hr className="or" />
+        <a href="#" className="btn google">
+          Sign in with Google
+        </a>
       </div>
     </StyledWrapper>
   );

src/routes/login/styled.js

@@ -1,22 +1,95 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- .form{
-     padding: 30px 15px;
-     border: 1px solid #eee;
-     form{
-         display: flex;
-         flex-direction: column;
-         gap: 5px;
-         input{
-             padding:4px 6px
-             
-         }
-     }
- }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    padding: 36px 40px 32px 40px;
+    /* border: 1px solid #eee; */
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border-radius: 12px;
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 24px;
+      .logo {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 28px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #667085;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      input {
+        width: 360px;
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        padding: 10px 14px;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+    .or {
+      border: none;
+      position: relative;
+      height: 1px;
+      background-color: #e4e7ec;
+      margin: 26px 0;
+      &:after {
+        padding: 4px;
+        background-color: #fff;
+        content: "OR";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        font-size: 14px;
+        line-height: 20px;
+        color: #667085;
+      }
+    }
+    .btn {
+      display: inline-block;
+      text-align: center;
+      width: 100%;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #ffffff;
+      padding: 10px;
+      background: #1fe1f9;
+      border: 1px solid #1fe1f9;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      &.google {
+        color: #344054;
+        border-color: #d0d5dd;
+        background: none;
+      }
+    }
+  }
 `;
 
 export default StyledWrapper;