diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css index 8ef1b6f0..14fb09d6 100644 --- a/app/components/Chatbot/chat_entry.css +++ b/app/components/Chatbot/chat_entry.css @@ -144,8 +144,10 @@ article.stampy { width: var(--spacing-32); height: var(--spacing-32); border-radius: var(--border-radius); - text-align: center; - line-height: 32px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; } .reference .source-link { diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx index 25fa4c48..19aa754b 100644 --- a/app/components/Chatbot/index.tsx +++ b/app/components/Chatbot/index.tsx @@ -84,10 +84,11 @@ const QuestionInput = ({ /> handleAsk(question)} /> - {fixed &&
} + {fixed &&
} -
- Stampy can be inaccurate. Always verify its sources. +
+ {' '} + Stampy can be inaccurate. Always verify its sources.
) @@ -319,7 +320,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => { ))} -
+
{followups ? ( { fixed /> -
+

Caution! This is an early prototype. Don’t automatically trust what it says, and make sure to diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css index e22b32bf..7e801810 100644 --- a/app/components/Chatbot/widgit.css +++ b/app/components/Chatbot/widgit.css @@ -21,7 +21,7 @@ } .widget-ask.fixed { position: fixed; - bottom: var(--spacing-48); + bottom: 42px; } .right-icon { @@ -44,6 +44,12 @@ left: var(--spacing-32); } +.mobile-caution { + position: absolute; + top: calc(100% + var(--spacing-8)); + display: flex; +} + .settings { padding: var(--spacing-32); margin-bottom: var(--spacing-8); @@ -57,7 +63,8 @@ justify-content: start; padding: var(--spacing-8) var(--spacing-12); position: absolute; - top: calc(-1 * var(--spacing-56)); + bottom: 100%; + height: auto; } .widget-ask .suggestion:hover { @@ -66,16 +73,26 @@ .widget-ask .send { position: absolute; - right: 4px; - bottom: 4px; + right: var(--spacing-8); + bottom: var(--spacing-8); } .white-space { position: absolute; left: -1000px; width: calc(100% + 2000px); - height: 100px; - top: 100%; + height: 120px; + top: 0; z-index: -1; background: #ffffff; } + +.followups-container { + padding-bottom: calc(106px + var(--spacing-48)); +} + +@media (max-width: 780px) { + .widget-ask.fixed { + bottom: 56px; + } +} diff --git a/app/components/Input/input.css b/app/components/Input/input.css index a429dd9b..c491eb62 100644 --- a/app/components/Input/input.css +++ b/app/components/Input/input.css @@ -7,9 +7,9 @@ border: 1px solid var(--colors-cool-grey-200, #dfe3e9); background: var(--colors-white, #fff); color: var(--colors-cool-grey-900, #1b2b3e); - padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-12); + padding: var(--spacing-8) var(--height-48) var(--spacing-8) var(--spacing-12); /* This can't be a variable because it shouldn't shrink when the screen gets small */ - height: 48px; + height: var(--height-48); font-size: 16px; font-weight: 300; line-height: 170%; /* 27.2px */ @@ -24,9 +24,10 @@ /* size */ .input.large { - height: 56px; + height: var(--height-64); font-size: 18px; letter-spacing: -0.18px; + padding-right: var(--height-64); } /* states */ diff --git a/app/root.css b/app/root.css index a2b14600..14330e1f 100644 --- a/app/root.css +++ b/app/root.css @@ -164,6 +164,13 @@ h2 { letter-spacing: -0.14px; } +.xxs { + font-size: 12px; + font-weight: 300; + line-height: 150%; /* 23.8px */ + letter-spacing: -0.1px; +} + .leading-0 { line-height: 0 !important; } @@ -353,7 +360,7 @@ h2 { } .col-6 { - width: clamp(0px, 35.28vw, 640px); + width: clamp(270px, 35.28vw, 640px); } .col-7 { @@ -369,7 +376,7 @@ h2 { } .col-10 { - width: clamp(0px, 60.62vw, 1109px); + width: clamp(300px, 60.62vw, 1109px); } .col-11 { diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx index a908c502..db619cfe 100644 --- a/app/routes/chat.tsx +++ b/app/routes/chat.tsx @@ -38,7 +38,7 @@ export default function App() {

-
+
{showSettings && (
Answer detail