fixed ui ux related issues,resolve chat format and response #14
fixed ui ux related issues,resolve chat format and response #14harshitj183 wants to merge 6 commits intomikhailofff:mainfrom
Conversation
|
Hey, @harshitj183. I'm glad to see your desire to make the user interface more user-friendly, but there are some problems that I would advise you to solve or ignore altogether and start digging into some other things. So, your changes are very ambitious, and that's great. But unfortunately, this does not apply to the current design semantics. Anyway. The style of messages from the sender and other chat participants is really similar to each other. I think there is another way to implement this. The black theme is not supported. The background of the message you are typing and the text in it have the same color, so it is impossible to recognize what you are typing. etc. |
There was a problem hiding this comment.
There are no changes here, only additions, which in fact do not even cancel the old rules.
| .chat-main-layout { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| width: 100%; | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| min-height: 80vh; | ||
| gap: 8px; | ||
| } |
There was a problem hiding this comment.
Good removal of duplicate rules.
| :root { | ||
| --primary-color: #17419b; | ||
| --secondary-color: #38bdf8; | ||
| --accent-color: #5d24fb; | ||
| --primary-color: #0084ff; | ||
| --primary-dark: #0073e6; | ||
| --secondary-color: #1a96d4; | ||
| --accent-color: #31a24c; | ||
| --error-color: #dc2626; | ||
| --text-color: #1f2937; | ||
| --bg-color: #f3f4f6; | ||
| --bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%); | ||
| --border-color: #e5e7eb; | ||
| --user-message-bg: #e0f2fe; | ||
| --other-message-bg: #f1f5f9; | ||
| --system-message-bg: #c3e6fe; | ||
| --system-message-color: #ae09b4; | ||
| --text-color: #000; | ||
| --text-secondary: #65676b; | ||
| --bg-color: #ffffff; | ||
| --bg-secondary: #f0f0f0; | ||
| --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); | ||
| --border-color: #e5e5e5; | ||
| --user-message-bg: #0084ff; | ||
| --user-message-text: #ffffff; | ||
| --other-message-bg: #e5e5ea; | ||
| --other-message-text: #000; | ||
| --system-message-bg: #f0f0f0; | ||
| --system-message-color: #65676b; | ||
| } |
There was a problem hiding this comment.
More than half of these root variables are not used.
| :root { | ||
| font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
| /* Color Palette */ | ||
| --primary-blue: #0084ff; | ||
| --primary-blue-dark: #0073e6; | ||
| --secondary-blue: #1a96d4; | ||
| --light-bg: #ffffff; | ||
| --dark-bg: #0f0f0f; | ||
| --chat-bg: #f0f0f0; | ||
| --chat-dark-bg: #1a1a1a; | ||
| --message-bg: #e5e5ea; | ||
| --message-dark-bg: #3a3a3a; | ||
| --text-primary: #000000; | ||
| --text-secondary: #65676b; | ||
| --text-dark-primary: #ffffff; | ||
| --text-dark-secondary: #b0b0b0; | ||
| --border-color: #e5e5e5; | ||
| --border-dark-color: #2a2a2a; | ||
| --user-message-bg: #0084ff; | ||
| --user-message-text: #ffffff; | ||
|
|
||
| /* Spacing */ | ||
| --spacing-xs: 4px; | ||
| --spacing-sm: 8px; | ||
| --spacing-md: 16px; | ||
| --spacing-lg: 24px; | ||
| --spacing-xl: 32px; | ||
|
|
||
| /* Border Radius */ | ||
| --radius-sm: 4px; | ||
| --radius-md: 8px; | ||
| --radius-lg: 12px; | ||
| --radius-xl: 18px; | ||
|
|
||
| /* Shadows */ | ||
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); | ||
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); | ||
| --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); | ||
|
|
||
| /* Transitions */ | ||
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | ||
| --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); | ||
| --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); | ||
|
|
||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; | ||
| line-height: 1.5; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| color-scheme: light dark; | ||
| } |
There was a problem hiding this comment.
More than half of these root variables are not used too.
There was a problem hiding this comment.
Don't understand why there are all these additional rules.
mikhailofff
force-pushed
the
main
branch
3 times, most recently
from
8bab25e to
47779f5
Compare
2 participants
🔵 Telegram Blue header (#0084ff)
💬 Message bubbles - Blue for current user, gray for others
📱 Clean modern design with proper spacing and rounded corners
⚪ White background with subtle shadows
🎯 Telegram-style UI with:
Rounded message input box
Blue send button
Clean user list on the right
Professional typography