More styling changes

app/components/chat.module.scss

@@ -386,6 +386,13 @@
 .chat-message-avatar {
   position: relative;
 
+  .user-avatar-text {
+    font-size: 0.8em; // Make text smaller
+    opacity: 0.7; // Reduce contrast
+    padding: 0 5px; // Add some padding for spacing if needed
+    display: inline-block; // Ensure it behaves like text
+  }
+
   .chat-message-edit {
     position: absolute;
     height: 100%;
@@ -533,6 +540,7 @@
 .chat-message-action-date {
   font-size: 12px;
   opacity: 0.2;
+  margin-top: 4px;
   white-space: nowrap;
   transition: all ease 0.6s;
   color: var(--black);

app/components/chat.tsx

@@ -1476,7 +1476,9 @@ function _Chat() {
                             <div className={styles["chat-message-avatar"]}>
                               {/* Edit button removed for simplicity */}
                               {isUser ? (
-                                <Avatar avatar={config.avatar} />
+                                <span className={styles["user-avatar-text"]}>
+                                  You
+                                </span>
                               ) : (
                                 <>
                                   {["system"].includes(message.role) ? (

app/components/home.module.scss

@@ -161,6 +161,8 @@
 }
 
 .sidebar-sub-title {
+  opacity: 0.7;
+  margin-top: 8px;
   font-size: 12px;
   font-weight: 400;
   animation: slide-in ease 0.3s;
@@ -196,7 +198,6 @@
 
 .chat-item-title {
   font-size: 14px;
-  font-weight: bolder;
   display: block;
   width: calc(100% - 15px);
   overflow: hidden;
@@ -216,7 +217,7 @@
 
 .chat-item:hover > .chat-item-delete {
   opacity: 0.5;
-  transform: translateX(-4px);
+  transform: translate(-6px, 6px);
 }
 
 .chat-item:hover > .chat-item-delete:hover {