feat: implemented a sign_in popup

src/topbar/guest/mod.rs

@@ -1,4 +1,7 @@
+mod signin;
+
 use crate::topbar::Tab;
+use signin::SignIn;
 use std::rc::Rc;
 use yew::prelude::*;
 
@@ -70,7 +73,7 @@ pub fn TopBar() -> Html {
             </ul>
 
             if state.sign_in {
-                <h1>{"Sign In"}</h1>
+                <SignIn/>
             }
 
             if state.sign_up {

src/topbar/guest/signin.rs

@@ -0,0 +1,22 @@
+use yew::prelude::*;
+
+#[function_component]
+pub fn SignIn() -> Html {
+    html! {
+        <form class="auth-container">
+            <div class="auth-field">
+                <label for="username">{"Username"}</label><br/>
+                <input class="auth-input" type="text" name="username"/><br/>
+            </div>
+
+            <div class="auth-field">
+                <label for="password">{"Password"}</label><br/>
+                <input class="auth-input" type="password" name="password"/><br/>
+            </div>
+
+            <div class="center-x">
+                <button class="auth-submit">{"Sign In"}</button>
+            </div>
+        </form>
+    }
+}

style/topbar.css

@@ -53,3 +53,59 @@
     padding: 0;
     list-style: none;
 }
+
+.auth-container {
+    font: normal 18px Roboto;
+    position: fixed;
+    display: block;
+    right: 38px;
+    top: 86px;
+    border: 4px solid #690455;
+    border-radius: 12px;
+    width: 286px;
+    padding: 0;
+    background-color: #191c2e;
+    color: #FFFFFF;
+    z-index: 10;
+
+    .auth-submit {
+        position: relative;
+        margin: 6px;
+        padding: 6px 12px;
+        text-align: center;
+        background: #21253c;
+        color: inherit;
+        border: 2px solid #690455;
+        border-radius: 6px;
+        font: inherit;
+    }
+
+    .auth-submit:hover, .auth-submit:focus {
+        background: #2c3251;
+        outline: none;
+    }
+
+    .auth-field {
+        position: relative;
+        text-align: center;
+        margin-bottom: 8px;
+
+        .auth-input {
+            border: 2px solid #690455;
+            border-radius: 6px;
+            background: #21253c;
+            color: #FFFFFF;
+            text-align: center;
+            font: normal 14px Roboto;
+        }
+
+        .auth-input:focus {
+            background: #2c3251;
+            outline: none;
+        }
+    }
+}
+
+.center-x {
+    text-align: center;
+}