From b09d7abf49b116c916c2bd5aeff3e51761194f74 Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Fri, 17 Mar 2023 01:32:56 +0200
Subject: [PATCH] Fix style of lock + group default message

---
 public/index.html             |  9 +++++--
 public/script.js              |  3 ++-
 public/scripts/group-chats.js |  1 +
 public/style.css              | 49 ++++++++++++-----------------------
 4 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1ff97f2c2..99d96ece2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -332,8 +332,13 @@
             <div class="right_menu_button" id="rm_button_selected_ch">
                 <h2></h2>
             </div>
-            <div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"
-                    title="Locked = Settings panel stays open"></div>
+            <div class="right_menu_button" id="rm_button_panel_pin_div" title="Locked = Settings panel stays open">
+                <input type="checkbox" id="rm_button_panel_pin">
+                <label for="rm_button_panel_pin">
+                    <img class="unchecked" alt="" src="img/lock-open-solid.svg" />
+                    <img class="checked" alt="" src="img/lock-solid.svg" />
+                </label>
+            </div>
         </div>
 
         <div id="rm_ch_create_block" class="right_menu" style="display: none;">
diff --git a/public/script.js b/public/script.js
index f149b1e8c..fe6e19b2e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -66,6 +66,7 @@ export {
     default_avatar,
     system_message_types,
     talkativeness_default,
+    default_ch_mes,
 }
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -91,7 +92,7 @@ let safetychat = [
 let chat_create_date = 0;
 
 let prev_selected_char = null;
-let default_ch_mes = "Hello";
+const default_ch_mes = "Hello";
 let count_view_mes = 0;
 let mesStr = "";
 let generatedPromtCache = "";
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 22af474ff..6466c1c3f 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -31,6 +31,7 @@ import {
     talkativeness_default,
     selectRightMenuWithAnimation,
     setRightTabSelectedClass,
+    default_ch_mes,
 } from "../script.js";
 
 export {
diff --git a/public/style.css b/public/style.css
index ad22be053..ebb9c7454 100644
--- a/public/style.css
+++ b/public/style.css
@@ -530,7 +530,7 @@ input[type=submit] {}
 #right-nav-panel-tabs {
     margin-top: 10px;
     margin-bottom: 10px;
-    width: calc(100% - 70px);
+    width: calc(100% - 50px);
     margin-left: 20px;
     margin-right: 30px;
     display: flex;
@@ -560,42 +560,23 @@ input[type=submit] {}
 
 
 #rm_button_panel_pin {
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    z-index: 3001;
+    display: none;
 }
 
-#rm_button_panel_pin_div {
-    width: 26px;
-    height: 26px;
-}
-
-#rm_button_panel_pin:hover::after {
-    filter: invert(1) brightness(150%);
-}
-
-#rm_button_panel_pin::after {
-    content: ' ';
-    transform: translateY(-100%);
-    background-repeat: no-repeat;
-    background-position: center;
-    position: absolute;
+#rm_button_panel_pin:checked + label .checked {
     display: block;
-    padding: 0;
-    margin: 0;
-    background-image: url('/img/lock-open-solid.svg');
-    filter: invert(1);
-    width: 26px;
-    height: 26px;
-    -webkit-transition: all 0.275s;
-    transition: all 0.275s;
 }
 
-#rm_button_panel_pin:checked::after {
-    background-image: url('/img/lock-solid.svg');
+#rm_button_panel_pin:checked + label .unchecked {
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked)  + label .checked {
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked) + label .unchecked {
+    display: block;
 }
 
 #rm_button_selected_ch {
@@ -2215,6 +2196,9 @@ input[type="range"] {
 
 .group_select .ch_name {
     flex-grow: 1;
+    max-width: calc(100% - 100px);
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .group_select .group_icon img {
@@ -2432,6 +2416,7 @@ h2 {
 
 .right_menu_button img {
     filter: invert(1);
+    cursor: pointer;
     height: 26px;
 }