From ef44a89bca5cd914e2ae0c49101ee369053ff5a7 Mon Sep 17 00:00:00 2001 From: Melissa Samworth Date: Thu, 2 May 2024 17:04:04 -0400 Subject: [PATCH 1/2] new input component, CSS --- app/assets/icons/link-out.svg | 4 + app/assets/icons/stampy.svg | 4 +- app/components/Button/button.css | 110 ++++++++++++++++++--- app/components/Chatbot/ChatEntry.tsx | 2 +- app/components/Chatbot/chat_entry.css | 40 ++++---- app/components/Chatbot/index.tsx | 38 ++++--- app/components/Chatbot/widgit.css | 26 ++++- app/components/Input/index.tsx | 33 +++++++ app/components/Input/input.css | 48 +++++++++ app/components/icons-generated/LinkOut.tsx | 14 +++ app/components/icons-generated/Stampy.tsx | 4 +- app/components/icons-generated/index.ts | 1 + app/hooks/useChat.ts | 3 +- app/root.css | 48 +++++++++ 14 files changed, 319 insertions(+), 56 deletions(-) create mode 100644 app/assets/icons/link-out.svg create mode 100644 app/components/Input/index.tsx create mode 100644 app/components/Input/input.css create mode 100644 app/components/icons-generated/LinkOut.tsx diff --git a/app/assets/icons/link-out.svg b/app/assets/icons/link-out.svg new file mode 100644 index 00000000..1d790672 --- /dev/null +++ b/app/assets/icons/link-out.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/icons/stampy.svg b/app/assets/icons/stampy.svg index 6aa06153..260b18c5 100644 --- a/app/assets/icons/stampy.svg +++ b/app/assets/icons/stampy.svg @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ - + diff --git a/app/components/Button/button.css b/app/components/Button/button.css index 67dd63a4..b7ef695f 100644 --- a/app/components/Button/button.css +++ b/app/components/Button/button.css @@ -10,54 +10,140 @@ border-radius: var(--border-radius); box-sizing: border-box; + background: var(--colors-white, #ffffff); + border: 1px solid var(--colors-cool-grey-200, #dfe3e9); + font-size: 16px; + font-style: normal; font-weight: 300; line-height: 170%; /* 27.2px */ letter-spacing: -0.16px; - - background: var(--colors-white, #ffffff); - border: 1px solid var(--colors-cool-grey-200, #dfe3e9); } +/* style */ + .primary { background: var(--colors-teal-500, #1d9089); font-weight: 500; color: var(--colors-white, #ffffff); -} -.primary:hover { - background: var(--colors-teal-700, #17736e); + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; } .primary-alt { background: var(--colors-white, #ffffff); color: var(--colors-teal-500, #1d9089); -} -.primary-alt:hover { - color: var(--colors-teal-800, #146560); + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; } .secondary { color: var(--colors-cool-grey-600, #788492) !important; border: 1px solid var(--colors-cool-grey-200, #dfe3e9); background: var(--colors-white, #fff); -} -.secondary:hover { - border: 1px solid var(--colors-teal-200, #a6d9d7) !important; + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; } .secondary-selected { background: var(--colors-white, #ffffff); color: var(--colors-teal-500, #1d9089); border: 1px solid var(--colors-teal-500, #1d9089); + + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; } .secondary-alt { color: var(--colors-teal-500, #1d9089); border: 1px solid var(--colors-cool-grey-200, #dfe3e9); background: var(--colors-white, #fff); + + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; +} + +/* large */ + +.primary-large { + background: var(--colors-teal-500, #1d9089); + font-weight: 500; + color: var(--colors-white, #ffffff); + + font-size: 18px; + font-weight: 300; + line-height: 170%; /* 30.6px */ + letter-spacing: -0.18px; +} + +.primary-alt-large { + background: var(--colors-white, #ffffff); + color: var(--colors-teal-500, #1d9089); + + font-size: 18px; + font-weight: 300; + line-height: 170%; /* 30.6px */ + letter-spacing: -0.18px; +} + +.secondary-large { + color: var(--colors-cool-grey-600, #788492) !important; + border: 1px solid var(--colors-cool-grey-200, #dfe3e9); + background: var(--colors-white, #fff); + + font-size: 18px; + font-weight: 300; + line-height: 170%; /* 30.6px */ + letter-spacing: -0.18px; +} + +.secondary-selected-large { + background: var(--colors-white, #ffffff); + color: var(--colors-teal-500, #1d9089); + border: 1px solid var(--colors-teal-500, #1d9089); + + font-size: 18px; + font-weight: 300; + line-height: 170%; /* 30.6px */ + letter-spacing: -0.18px; +} + +.secondary-alt-large { + color: var(--colors-teal-500, #1d9089); + border: 1px solid var(--colors-cool-grey-200, #dfe3e9); + background: var(--colors-white, #fff); + + font-size: 18px; + font-weight: 300; + line-height: 170%; /* 30.6px */ + letter-spacing: -0.18px; +} + +/* state */ + +.primary:hover { + background: var(--colors-teal-700, #17736e); +} + +.primary-alt:hover { + color: var(--colors-teal-800, #146560); +} + +.secondary:hover { + border: 1px solid var(--colors-teal-200, #a6d9d7) !important; } .secondary-alt:hover { diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx index bebefc51..930c3d2b 100644 --- a/app/components/Chatbot/ChatEntry.tsx +++ b/app/components/Chatbot/ChatEntry.tsx @@ -3,7 +3,7 @@ import {Link} from '@remix-run/react' import MarkdownIt from 'markdown-it' import QuestionMarkIcon from '~/components/icons-generated/QuestionMark' import BotIcon from '~/components/icons-generated/Bot' -import LinkIcon from '~/components/icons-generated/Link' +import LinkIcon from '~/components/icons-generated/LinkOut' import PersonIcon from '~/components/icons-generated/Person' import StampyIcon from '~/components/icons-generated/Stampy' import Contents from '~/components/Article/Contents' diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css index 4d40fbe1..8aa9ac8a 100644 --- a/app/components/Chatbot/chat_entry.css +++ b/app/components/Chatbot/chat_entry.css @@ -43,53 +43,53 @@ article.stampy { } .ref-1 { - background: rgb(211, 255, 253); - color: rgb(24, 185, 71); + background: #dbffed; + color: #00c159; } .ref-2 { - background: rgb(255, 221, 244); - color: rgb(251, 0, 158); + background: #ffe5f6; + color: #ff16ae; } .ref-3 { - background: rgb(217, 253, 254); - color: rgb(23, 184, 197); + background: #e0fdff; + color: #00c3d0; } .ref-4 { - background: rgb(254, 230, 202); - color: rgb(230, 107, 9); + background: #ffebd4; + color: #ed8000; } .ref-5 { - background: rgb(244, 223, 255); - color: rgb(164, 3, 254); + background: #f6e7ff; + color: #b53aff; } .ref-6 { - background: rgb(231, 255, 178); - color: rgb(99, 159, 4); + background: #ebffbf; + color: #74ac00; } .ref-7 { - background: rgb(231, 232, 255); - color: rgb(77, 75, 254); + background: #ecedff; + color: #6068ff; } .ref-8 { - background: rgb(255, 254, 156); - color: rgb(144, 140, 5); + background: #fffcac; + color: #a19b00; } .ref-9 { - background: rgb(254, 226, 226); - color: rgb(200, 0, 5); + background: #ffe8e8; + color: #d50000; } .ref-10 { - background: rgb(214, 240, 255); - color: rgb(18, 144, 254); + background: #def3ff; + color: #00a4ff; } .reference { diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx index 06c8d20f..2e56000f 100644 --- a/app/components/Chatbot/index.tsx +++ b/app/components/Chatbot/index.tsx @@ -9,6 +9,7 @@ import './widgit.css' import {questionUrl} from '~/routesMapper' import {Question} from '~/server-utils/stampy' import {useSearch} from '~/hooks/useSearch' +import Input from '~/components/Input' export const WidgetStampy = () => { const [question, setQuestion] = useState('') @@ -32,7 +33,7 @@ export const WidgetStampy = () => {
Try asking me...
{questions.map((question, i) => (
-
@@ -68,7 +69,11 @@ type QuestionInputProps = { } const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => { const [question, setQuestion] = useState(initial || '') +<<<<<<< Updated upstream +======= + const [, setPlaceholder] = useState('Ask Stampy a question...') +>>>>>>> Stashed changes const handleAsk = (val: string) => { onAsk && onAsk(val) setQuestion('') @@ -81,10 +86,16 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => { return (
+<<<<<<< Updated upstream >>>>>> Stashed changes value={question} onChange={(e) => handleChange(e.target.value)} onKeyDown={(e) => { @@ -102,10 +113,11 @@ type FollowupsProps = { title?: string followups?: Followup[] onSelect: (followup: Followup) => void + className?: string } -const Followups = ({title, followups, onSelect}: FollowupsProps) => ( +const Followups = ({title, followups, onSelect, className}: FollowupsProps) => ( <> - {title &&
{title}
} + {title &&
{title}
} {followups?.map(({text, pageid}, i) => (
@@ -125,16 +137,18 @@ const SplashScreen = ({ onQuestion: (v: string) => void }) => ( <> - -
-

Hi there, I'm Stampy.

-

I can answer your questions about AI safety

+
+ +
+

Hi there, I'm Stampy.

+

I can answer your questions about AI Safety

+
+ ({text}))} + onSelect={({text}: Followup) => onQuestion(text)} + />
- ({text}))} - onSelect={({text}: Followup) => onQuestion(text)} - /> ) diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css index 2071a918..6e6ff71a 100644 --- a/app/components/Chatbot/widgit.css +++ b/app/components/Chatbot/widgit.css @@ -10,17 +10,33 @@ background: var(--colors-cool-grey-100); } -.widget-ask input { - height: 56px; - padding: var(--spacing-8) var(--spacing-24); -} - @media (max-width: 780px) { .button { width: 100%; } } +<<<<<<< Updated upstream +======= +.widget-ask { + position: sticky; + bottom: 0; +} +.right-icon { + padding-right: var(--spacing-56); +} +.warning-floating { + position: fixed; + right: 4.44vw; + z-index: 100; + bottom: 4.44vw; + width: 10.13vw; +} +.red { + color: #d40000; +} + +>>>>>>> Stashed changes .settings-container { position: fixed; bottom: var(--spacing-32); diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx new file mode 100644 index 00000000..069d3dd3 --- /dev/null +++ b/app/components/Input/index.tsx @@ -0,0 +1,33 @@ +import './input.css' + +type InputProps = { + className?: string + disabled?: boolean + placeHolder?: string + value?: string + onChange?: (e: any) => void + onKeyDown?: (e: any) => void +} +const Input = ({ + className, + disabled = false, + placeHolder, + value, + onChange, + onKeyDown, +}: InputProps) => { + const classes = ['input', className].filter((i) => i).join(' ') + + return ( + + ) +} + +export default Input diff --git a/app/components/Input/input.css b/app/components/Input/input.css new file mode 100644 index 00000000..dbf4c2b8 --- /dev/null +++ b/app/components/Input/input.css @@ -0,0 +1,48 @@ +/* I define the first class, which in the component is set up to add to every component, as the default values */ +/* You could use this class and nothing else and it will still show up correctly */ +/* the class has the same title as the component */ + +.input { + border-radius: var(--border-radius); + border: 1px solid var(--colors-cool-grey-200, #dfe3e9); + background: var(--colors-white, #fff); + box-shadow: 0px 16px 40px 0px rgba(175, 183, 194, 0.2); + color: var(--colors-cool-grey-900, #1b2b3e); + padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-12); + height: var(--spacing-48); + font-size: 16px; + font-weight: 300; + line-height: 170%; /* 27.2px */ + letter-spacing: -0.16px; + transition: border 0.2s; +} + +/* I then define all properties from Figma as titles (e.g. 'size' and 'state' for input) */ +/* and all possible values as unique classes within those properties (except for 'default') */ +/* I have to make sure to do .input.large so that this doesn't get in the way of other components */ + +/* size */ + +.input.large { + height: var(--spacing-56); + font-size: 18px; + letter-spacing: -0.18px; +} + +/* states */ + +.input:hover { + border: 1px solid var(--colors-teal-200, #a6d9d7); +} + +.input:focus { + border: 1px solid var(--colors-teal-500, #1d9089) !important; + outline: none; + color: var(--colors-cool-grey-900, #1b2b3e); +} + +.input:disabled, +.input[disabled] { + opacity: 0.6; + cursor: inherit; +} diff --git a/app/components/icons-generated/LinkOut.tsx b/app/components/icons-generated/LinkOut.tsx new file mode 100644 index 00000000..85b746b9 --- /dev/null +++ b/app/components/icons-generated/LinkOut.tsx @@ -0,0 +1,14 @@ +import type {SVGProps} from 'react' +const SvgLinkOut = (props: SVGProps) => ( + + + + +) +export default SvgLinkOut diff --git a/app/components/icons-generated/Stampy.tsx b/app/components/icons-generated/Stampy.tsx index 48dc30f0..bf3a1720 100644 --- a/app/components/icons-generated/Stampy.tsx +++ b/app/components/icons-generated/Stampy.tsx @@ -1,6 +1,6 @@ import type {SVGProps} from 'react' const SvgStampy = (props: SVGProps) => ( - + ) => ( - + diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts index 6ad14434..7854bc06 100644 --- a/app/components/icons-generated/index.ts +++ b/app/components/icons-generated/index.ts @@ -28,6 +28,7 @@ export {default as GroupTopEcplise} from './GroupTopEcplise' export {default as Hide} from './Hide' export {default as IntroMobile} from './IntroMobile' export {default as Like} from './Like' +export {default as LinkOut} from './LinkOut' export {default as Link} from './Link' export {default as ListLarge} from './ListLarge' export {default as MagnifyingGlass} from './MagnifyingGlass' diff --git a/app/hooks/useChat.ts b/app/hooks/useChat.ts index d4d6c946..b2836e44 100644 --- a/app/hooks/useChat.ts +++ b/app/hooks/useChat.ts @@ -1,5 +1,4 @@ -// export const CHATBOT_URL = 'https://chat.stampy.ai:8443/chat' -export const CHATBOT_URL = 'http://127.0.0.1:3001/chat' +export const CHATBOT_URL = 'https://chat.stampy.ai:8443/chat' export type Citation = { title: string diff --git a/app/root.css b/app/root.css index 57cc51b5..8c6b1066 100644 --- a/app/root.css +++ b/app/root.css @@ -290,6 +290,54 @@ h2 { /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */ /* note I may change these to vars later */ +.col-1 { + width: clamp(0, 3.07vw, 53px); +} + +.col-2 { + width: clamp(0, 8.54vw, 171px); +} + +.col-3 { + width: clamp(0, 15vw, 288px); +} + +.col-4 { + width: clamp(0, 21.46vw, 405px); +} + +.col-5 { + width: clamp(0, 27.99vw, 523px); +} + +.col-6 { + width: clamp(0, 34.44vw, 640px); +} + +.col-7 { + width: clamp(0, 40.9vw, 757px); +} + +.col-8 { + width: clamp(0, 47.43vw, 875px); +} + +.col-9 { + width: clamp(0, 53.89vw, 992px); +} + +.col-10 { + width: clamp(0, 60.35vw, 1109px); +} + +.col-11 { + width: clamp(0, 66.88vw, 1227px); +} + +.col-12 { + width: clamp(0, 73.33vw, 1344px); +} + .fcol-2 { flex: 2; } From 36a5481cdec117e3a6862382bb26853f895c7a67 Mon Sep 17 00:00:00 2001 From: Melissa Samworth Date: Thu, 2 May 2024 17:21:56 -0400 Subject: [PATCH 2/2] new input component, CSS --- app/components/Chatbot/index.tsx | 12 ------------ app/components/Chatbot/widgit.css | 4 +--- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx index 2e56000f..7c5fc697 100644 --- a/app/components/Chatbot/index.tsx +++ b/app/components/Chatbot/index.tsx @@ -69,11 +69,6 @@ type QuestionInputProps = { } const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => { const [question, setQuestion] = useState(initial || '') -<<<<<<< Updated upstream - -======= - const [, setPlaceholder] = useState('Ask Stampy a question...') ->>>>>>> Stashed changes const handleAsk = (val: string) => { onAsk && onAsk(val) setQuestion('') @@ -86,16 +81,9 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => { return (
-<<<<<<< Updated upstream - >>>>>> Stashed changes value={question} onChange={(e) => handleChange(e.target.value)} onKeyDown={(e) => { diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css index 6e6ff71a..47107ae9 100644 --- a/app/components/Chatbot/widgit.css +++ b/app/components/Chatbot/widgit.css @@ -16,8 +16,6 @@ } } -<<<<<<< Updated upstream -======= .widget-ask { position: sticky; bottom: 0; @@ -32,11 +30,11 @@ bottom: 4.44vw; width: 10.13vw; } + .red { color: #d40000; } ->>>>>>> Stashed changes .settings-container { position: fixed; bottom: var(--spacing-32);