Feat: signout button

components/index.html

@@ -4,10 +4,11 @@
 	{{ else if ne .LinkLogin "" }}
 		{{template "linklogin" .LinkLogin}}
 	{{ else if not .State.RoomID }}
-		<div id="hello-user" class="flex text-xl justify-center space-x-8 py-2">
+		<div id="hello-user" class="grid grid-cols-3 items-center text-xl py-2">
-			<p>Hello {{.State.Username}}</p>
+			<div></div>
-			<div>
+			<p class="text-center">Hello {{.State.Username}}</p>
-			<a href="/signout"><button class="bg-amber-100 text-black px-4 py-2 rounded">signout</button></a>
+			<div class="text-right">
+				<a href="/signout"><button class="bg-indigo-600 text-white font-semibold text-sm px-4 py-2 rounded hover:bg-indigo-500">signout</button></a>
 			</div>
 		</div>
 		<div id="create-room" class="create-room-div">

components/namecheck.html

@@ -5,13 +5,13 @@
 <a href="/">
 <div id="login_notice" class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
   <p class="font-bold">Be Warned</p>
-  <p>This Name is already taken. You won't be able to login with it until other person leaves.</p>
+  <p>This Name is already taken. But if it's yours, you should know the password.</p>
 </div>
 </a>
 {{ else }}
 <div id="login_notice" class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
   <p class="font-bold">Be Warned</p>
-  <p>This Name is already taken. You won't be able to login with it until other person leaves.</p>
+  <p>This Name is already taken. But if it's yours, you should know the password.</p>
 </div>
 {{end}}
 {{end}}