diff --git a/app/assets/images/arrow-up.svg b/app/assets/images/arrow-up.svg new file mode 100644 index 000000000..69fb20ab4 --- /dev/null +++ b/app/assets/images/arrow-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css index 1683a5923..d253f16a9 100644 --- a/app/assets/stylesheets/conversation.css +++ b/app/assets/stylesheets/conversation.css @@ -1,16 +1,15 @@ @layer components { .conversation { + font-family: var(--font-sans); padding-block-end: 6em; } .conversation__composer { - background-color: var(--color-white); - border-block-start: 1px solid var(--color-ink-lighter); - border-radius: 0 0 0.5em 0.5em; + backdrop-filter: blur(24px); display: flex; gap: var(--inline-space); inset: auto 0 0 0; - padding: var(--block-space-half) var(--block-space); + padding: var(--block-space); position: absolute; .conversation__submit { @@ -19,6 +18,14 @@ } } + .conversation__header { + backdrop-filter: blur(24px); + inset: 0 0 auto 0; + padding: var(--block-space); + position: absolute; + text-align: center; + } + .conversation__input { align-items: center; flex-grow: 1; @@ -32,11 +39,9 @@ display: flex; .action-text-content { - background-color: var(--color-ink-lightest); + border-radius: 0.5rem; - font-size: var(--text-x-small); inline-size: fit-content; - padding: var(--block-space); } p { @@ -71,8 +76,9 @@ justify-content: flex-end; .action-text-content { - background-color: var(--color-selected); + background-color: var(--color-ink-lightest); margin-inline-start: 15%; + padding: var(--block-space-half) var(--inline-space-double); text-align: end; } } @@ -93,8 +99,9 @@ display: flex; flex-direction: column; gap: var(--block-space); - max-block-size: calc(100dvh - 6em - var(--block-space) - 2 * var(--footer-height)); + margin-inline: calc(var(--block-space-half) * -0.5); + max-block-size: calc(100dvh - 6em - var(--block-space-double) - 2 * var(--footer-height)); overflow-y: auto; - padding: var(--block-space-half) var(--block-space-half); + padding: var(--block-space-half) var(--block-space); } } diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index d3034d5c7..0839dc103 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -20,6 +20,7 @@ .icon--add { --svg: url("add.svg "); } .icon--arrow-left { --svg: url("arrow-left.svg "); } .icon--arrow-right { --svg: url("arrow-right.svg "); } + .icon--arrow-up { --svg: url("arrow-up.svg "); } .icon--art { --svg: url("art.svg "); } .icon--assigned { --svg: url("assigned.svg "); } .icon--attachment { --svg: url("attachment.svg "); } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index b97491b53..683642ba5 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -193,10 +193,11 @@ } .terminal__modal { + --panel-border-radius: 1.5em; --panel-padding: var(--block-space-half); max-block-size: calc(100dvh - var(--block-space-double) - 2 * var(--footer-height)); - overflow: unset; + overflow: clip; } .terminal__item { diff --git a/app/views/conversations/show.html.erb b/app/views/conversations/show.html.erb index 842e779e5..bfb8134fb 100644 --- a/app/views/conversations/show.html.erb +++ b/app/views/conversations/show.html.erb @@ -1,6 +1,9 @@ <%= turbo_frame_tag "conversation", target: "_top" do %> <%= turbo_stream_from Current.user, :conversation %>