From e9e127487c77235609ac7e762e39c87723a07c11 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 12 Aug 2025 15:22:58 +0200 Subject: [PATCH] style for conversation list expanded --- .../projects/sae-lib/alert-box/alert-box.scss | 14 ++++ .../feedback-button/feedback-button.scss | 4 +- .../sae-lib/src/styles/_conversations.scss | 2 + .../projects/sae-lib/src/styles/_debug.scss | 9 --- .../sae-lib/src/styles/_layout_demo.scss | 67 +++++++++++++++++-- .../projects/sae-lib/src/styles/_states.scss | 5 ++ 6 files changed, 83 insertions(+), 18 deletions(-) diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.scss b/my-workspace/projects/sae-lib/alert-box/alert-box.scss index 4408a2e..12f6204 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.scss +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.scss @@ -1,4 +1,18 @@ +@use '../src/styles/variables.scss'; +@use '../src/styles/shadows.scss'; + +.alert { + padding: 1rem 2rem; + border: solid 1px black; + border-radius: shadows.$spacing-1; + margin-top: shadows.$spacing-1; + margin-bottom: shadows.$spacing-1; +} + + sae-alert-box { font-size: 12px; padding: 18px; + display: inline-block; + text-align: left; } diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss index beda863..e47e5ed 100644 --- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss +++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss @@ -2,9 +2,7 @@ background: #ecf3fa; color: #083b7d; padding: 8px; - border-radius: 8px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-radius: 8px 8px 0 0; transform: rotate(270deg); cursor: pointer; display: flex; diff --git a/my-workspace/projects/sae-lib/src/styles/_conversations.scss b/my-workspace/projects/sae-lib/src/styles/_conversations.scss index 9fdad92..01482b9 100644 --- a/my-workspace/projects/sae-lib/src/styles/_conversations.scss +++ b/my-workspace/projects/sae-lib/src/styles/_conversations.scss @@ -46,6 +46,8 @@ margin-bottom: 40px; margin-top: 10px; animation: fadeIn 0.5s ease-in-out; + width: 500px; + max-width: 100%; &.llm { diff --git a/my-workspace/projects/sae-lib/src/styles/_debug.scss b/my-workspace/projects/sae-lib/src/styles/_debug.scss index 28d3076..bb365a6 100644 --- a/my-workspace/projects/sae-lib/src/styles/_debug.scss +++ b/my-workspace/projects/sae-lib/src/styles/_debug.scss @@ -1,4 +1,3 @@ - @use '_shadows.scss'; .visible-imbrication { @@ -23,14 +22,6 @@ // inbox styles -.alert { - padding: 1rem 2rem; - border: solid 1px black; - border-radius: shadows.$spacing-1; - margin-top: shadows.$spacing-1; - margin-bottom: shadows.$spacing-1; -} - app-color-display { + app-color-display { margin-left: 1rem; diff --git a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss index 57b3e99..9850441 100644 --- a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss +++ b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss @@ -55,13 +55,16 @@ .is-expanded-left & .column-conversation { width: variables.$large-column-panel; + flex-basis: variables.$large-column-panel; } } .new-chat-title { - text-align: left; + //text-align: left; font-size: 20px; font-weight: 600; + width: 100%; + display: block; } .search-button { @@ -74,13 +77,22 @@ .new-button { background: linear-gradient(70deg, #07397C -37.98%, #1767AD 17.98%, #255B8E 53.85%); @extend .nav-button !optional; + width: 100%; + text-align: center; + + i { + width: 20px; + margin-right: 10px; + float: left; + } .label { display: none; .is-expanded-left & { display: block; - width: 100% !important; + width: 50%; + float: left; } } } @@ -96,11 +108,10 @@ .is-expanded-left & { width: variables.$large-column-panel; - + flex-basis: variables.$large-column-panel; } .conversation-container { - padding-top: 12px; padding-left: 12px; } @@ -113,7 +124,10 @@ } .conversation-item { - padding: 11px 32px; + margin-bottom: 16px; + margin-top: 16px; + padding: 16px 16px 18px 32px; + cursor: pointer; border-radius: 8px; color: #6D717C; @@ -122,6 +136,7 @@ background: #3B87CC1A; } + &.is-active { background: rgba(#3B87CC1A, 10%); font-weight: 600; @@ -134,6 +149,18 @@ } } + + .pinned-icon { + position: relative; + left: -1.5em; + + + i { + color: #FEC553; + fill: #FEC553; + } + } + .active-peak { visibility: hidden; } @@ -144,6 +171,7 @@ font-weight: 600; margin-bottom: 4px; display: block; + margin-top: -1.5em; } .description { @@ -157,6 +185,13 @@ .date { color: rgba(#5F5F5F99, 60%); float: right; + text-align: right; + font-family: Barlow; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 8px; + margin-top: -1.5em; } } @@ -164,6 +199,11 @@ } + .chat-column { + + min-width: 1000px; + } + .chatbot-container-box { margin-right: 100px; } @@ -208,9 +248,12 @@ .conversation-messages-container { min-height: 600px; - width: 800px; + max-height: 90vh; margin: 0 auto; padding-top: 10px; + padding-left: 10px; + overflow: auto; + min-width: 915px; } .main-conversation-container { @@ -302,14 +345,26 @@ } } + } .columns { .column { padding-top: 0; + + &.panel-more { + &.expanded { + width: 300px; + flex-basis: 300px; + } + } } } +.conversation-bottom { + padding: 10px; +} + .bottom-warning-container { margin-left: 70px; margin-top: 18px; diff --git a/my-workspace/projects/sae-lib/src/styles/_states.scss b/my-workspace/projects/sae-lib/src/styles/_states.scss index 1a7a9f0..0b73512 100644 --- a/my-workspace/projects/sae-lib/src/styles/_states.scss +++ b/my-workspace/projects/sae-lib/src/styles/_states.scss @@ -39,3 +39,8 @@ color: variables.$danger-color; border: 0; } + + +.is-clickable { + cursor: pointer; +}