From c1c7a0ce6a3c9a95dbe6d15ec393deb26ddc1dae Mon Sep 17 00:00:00 2001
From: lenovo <lenovo@lenovo.com>
Date: Wed, 14 Dec 2022 21:04:10 +0100
Subject: [PATCH] layout titles ok

---
 tests_hugo/chat_node/chat_client/chat.html    | 26 +++++++++----------
 .../chat_node/chat_client/style/chat_back.css |  8 +++---
 .../chat_client/style/layout_create.css       |  6 +++++
 .../chat_client/style/layout_mute.css         |  6 +++++
 .../chat_client/style/layout_new.css          | 11 ++++----
 .../chat_client/style/layout_protected.css    |  9 +++++++
 .../chat_client/style/layout_room_set.css     |  9 +++++++
 .../chat_client/style/layout_settings.css     |  9 +++++++
 .../chat_client/style/layout_user.css         |  6 +++++
 9 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 97aed3b3..1319cc28 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -21,18 +21,18 @@
 
 		<div class="close" id="chat_box">
 
-			<button class="chat_item       chat_chat"      id="chat_chat"       onclick="layout('home')"          ><p>chat</p></button>
-			<button class="chat_item       chat_close"     id="chat_close"      onclick="layout('close')"         ></button>
-			<button class="chat_item       chat_new"       id="chat_new"        onclick="layout('new')"           ><p>new</p></button>
-			<button class="chat_item       chat_settings"  id="chat_settings"   onclick="layout('settings')"      ><p>settings</p></button>
-			<button class="chat_item       chat_room_name" id="chat_room_name"  onclick="layout('room_set')"      ><p>placeholder</p></button>
-			<button class="chat_item       chat_send"      id="chat_send"       onclick="send_msg()"              ><p>send</p></button>
-			<p      class="chat_item"                      id="chat_create"                                       >create</p>
-			<p      class="chat_item"                      id="chat_user"                                         >placeholder</p>
-			<button class="chat_item _back chat_back_room" id="chat_back_room"  onclick="layout('room')"          ></button>
-			<button class="chat_item _back chat_back_home" id="chat_back_home"  onclick="layout('home')"          ></button>
-			<button class="chat_item _back chat_back_new"  id="chat_back_new"   onclick="layout('new')"           ></button>
-			<button class="chat_item _back chat_back_user" id="chat_back_user"  onclick="layout('user')"          ></button>
+			<button class="chat_item       chat_chat"      id="chat_chat"       onclick="layout('home')"                     ><p>chat</p></button>
+			<button class="chat_item       chat_close"     id="chat_close"      onclick="layout('close')"    title="close"   ></button>
+			<button class="chat_item       chat_new"       id="chat_new"        onclick="layout('new')"      title="new"     ><p>new</p></button>
+			<button class="chat_item       chat_settings"  id="chat_settings"   onclick="layout('settings')" title="settings"><p>settings</p></button>
+			<button class="chat_item       chat_room_name" id="chat_room_name"  onclick="layout('room_set')"                 ><p>placeholder</p></button>
+			<button class="chat_item       chat_send"      id="chat_send"       onclick="send_msg()"         title="send"    ><p>send</p></button>
+			<p      class="chat_item       chat_create"    id="chat_create"                                                  >create</p>
+			<p      class="chat_item       chat_user"      id="chat_user"                                                    >placeholder</p>
+			<button class="chat_item _back chat_back_room" id="chat_back_room"  onclick="layout('room')"     title="go_back" ></button>
+			<button class="chat_item _back chat_back_home" id="chat_back_home"  onclick="layout('home')"     title="go_back" ></button>
+			<button class="chat_item _back chat_back_new"  id="chat_back_new"   onclick="layout('new')"      title="go_back" ></button>
+			<button class="chat_item _back chat_back_user" id="chat_back_user"  onclick="layout('user')"     title="go_back" ></button>
 
 
 			<!-- --------------------------------
@@ -56,7 +56,7 @@
 				</div>
 			</div>
 
-			<div    class="chat_item chat_panel " id="chat_panel_home">
+			<div    class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
 				<div id="chat_room_list" class="_first_child_vanish">
 					<div class="chat_room_name">
 						<p>you don't have any chat yet</p>
diff --git a/tests_hugo/chat_node/chat_client/style/chat_back.css b/tests_hugo/chat_node/chat_client/style/chat_back.css
index 570f75f7..8e9ad4e5 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_back.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_back.css
@@ -5,10 +5,10 @@
 .chat_item._back::before {
 	content: "";
 	position: absolute;
-	top: calc(50% - 10px - 1px);
-	left: 10px;
-	width: 20px;
-	height: 20px;
+	top: calc(50% - 6px - 1px);
+	left: 6px;
+	width: 14px;
+	height: 14px;
 	border-left: 1px solid black;
 	border-bottom: 1px solid black;
 	transform: rotate(45deg);
diff --git a/tests_hugo/chat_node/chat_client/style/layout_create.css b/tests_hugo/chat_node/chat_client/style/layout_create.css
index 4f4ad867..645687a3 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_create.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_create.css
@@ -12,3 +12,9 @@
 	display: flex;
 }
 
+/* title "create" appearance
+*/
+#chat_box.create .chat_item.chat_create {
+	text-align: center;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_mute.css b/tests_hugo/chat_node/chat_client/style/layout_mute.css
index 4ceee950..5d89f425 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_mute.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_mute.css
@@ -12,3 +12,9 @@
 	display: flex;
 }
 
+/* title "mute" appearance
+*/
+#chat_box.mute .chat_item.chat_user {
+	text-align: center;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_new.css b/tests_hugo/chat_node/chat_client/style/layout_new.css
index 377e17b1..3ec8c06a 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_new.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_new.css
@@ -12,11 +12,12 @@
 	display: flex;
 }
 
-
 /* button "new" appearance
-
-.chat_item#chat_new button {
-	background-color: transparent;
-}
 */
+/* add or remove '.chat_item' to toggle the hover effect */
+#chat_box.new button.chat_item.chat_new {
+	width: auto;
+	background-color: transparent;
+	pointer-events: none;
+}
 
diff --git a/tests_hugo/chat_node/chat_client/style/layout_protected.css b/tests_hugo/chat_node/chat_client/style/layout_protected.css
index 8e2f1587..dd9d32ac 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_protected.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_protected.css
@@ -12,3 +12,12 @@
 	display: flex;
 }
 
+/* button "<room_name>" appearance
+*/
+/* add or remove '.chat_item' to toggle the hover effect */
+#chat_box.protected button.chat_item.chat_room_name {
+	width: auto;
+	background-color: transparent;
+	pointer-events: none;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_room_set.css b/tests_hugo/chat_node/chat_client/style/layout_room_set.css
index 5c1ee190..da840ee5 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_room_set.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_room_set.css
@@ -12,3 +12,12 @@
 	display: flex;
 }
 
+/* button "<room_name>" appearance
+*/
+/* add or remove '.chat_item' to toggle the hover effect */
+#chat_box.room_name button.chat_item.chat_room_name {
+	width: auto;
+	background-color: transparent;
+	pointer-events: none;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_settings.css b/tests_hugo/chat_node/chat_client/style/layout_settings.css
index 3a058cd4..e4397fe0 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_settings.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_settings.css
@@ -12,4 +12,13 @@
 	display: flex;
 }
 
+/* button "settings" appearance
+*/
+/* add or remove '.chat_item' to toggle the hover effect */
+#chat_box.settings button.chat_item.chat_settings {
+	width: auto;
+	background-color: transparent;
+	pointer-events: none;
+}
+
 
diff --git a/tests_hugo/chat_node/chat_client/style/layout_user.css b/tests_hugo/chat_node/chat_client/style/layout_user.css
index c9e51fb8..c33d04a6 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_user.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_user.css
@@ -12,3 +12,9 @@
 	display: flex;
 }
 
+/* title "user" appearance
+*/
+#chat_box.user .chat_item.chat_user {
+	text-align: center;
+}
+