diff --git a/app/assets/icons/StampyLarge.svg b/app/assets/icons/StampyLarge.svg new file mode 100644 index 00000000..191f58f9 --- /dev/null +++ b/app/assets/icons/StampyLarge.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/icons/StampySmall.svg b/app/assets/icons/StampySmall.svg new file mode 100644 index 00000000..6d2c7bf2 --- /dev/null +++ b/app/assets/icons/StampySmall.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/app/components/Button/button.css b/app/components/Button/button.css index b7ef695f..87cfb8e6 100644 --- a/app/components/Button/button.css +++ b/app/components/Button/button.css @@ -134,25 +134,30 @@ /* state */ -.primary:hover { +.primary:hover, +.primary-large:hover { background: var(--colors-teal-700, #17736e); } -.primary-alt:hover { +.primary-alt:hover, +.primary-alt-large:hover { color: var(--colors-teal-800, #146560); } -.secondary:hover { +.secondary:hover, +.secondary-large:hover { border: 1px solid var(--colors-teal-200, #a6d9d7) !important; } -.secondary-alt:hover { +.secondary-alt:hover, +.secondary-alt-large:hover { border: 1px solid var(--colors-teal-200, #a6d9d7); } /* #### Composite button #### */ .composite-button { box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(175, 183, 194, 0.2); + cursor: pointer; } .composite-button > form .button, diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx index e284dcea..7ee57dc2 100644 --- a/app/components/Chatbot/ChatEntry.tsx +++ b/app/components/Chatbot/ChatEntry.tsx @@ -1,7 +1,6 @@ import {ComponentType} from 'react' import {Link} from '@remix-run/react' import MarkdownIt from 'markdown-it' -import QuestionMarkIcon from '~/components/icons-generated/QuestionMark' import Contents from '~/components/Article/Contents' import Feedback, {logFeedback} from '~/components/Feedback' import useGlossary from '~/hooks/useGlossary' @@ -14,6 +13,8 @@ import LinkIcon from '~/components/icons-generated/LinkOut' import PersonIcon from '~/components/icons-generated/Person' import StampyIcon from '~/components/icons-generated/Stampy' import PersonInCircleIcon from '~/components/icons-generated/PersonInCircle' +import IconStampySmall from '~/components/icons-generated/StampySmall' +import QuestionMarkIcon from '~/components/icons-generated/QuestionMark' const MAX_REFERENCES = 10 @@ -83,8 +84,8 @@ const ReferenceSummary = ({title, authors, source, url}: Citation & {titleClass? return (
-
{title}
-
+
{title}
+
{' ยท '} @@ -166,7 +167,12 @@ const ChatbotReply = ({question, phase, content, citationsMap}: AssistantEntry) return (
- + <Title + title="Stampy" + Icon={IconStampySmall} + answerType="bot" + hint="Generated by an AI model" + /> <PhaseState /> <div className="padding-bottom-56 padding-left-56 large-reading"> {content?.split(/(\[\d+\])|(\n)/).map((chunk, i) => { @@ -266,7 +272,7 @@ const ChatEntry = (props: Entry) => { const Role = roles[props.role] as ComponentType<Entry> if (!Role) return null return ( - <div className="chat-entry padding-bottom-40"> + <div className="chat-entry padding-bottom-56"> <Role {...props} /> </div> ) diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx index 2e0f7118..d099d446 100644 --- a/app/components/Chatbot/index.tsx +++ b/app/components/Chatbot/index.tsx @@ -1,6 +1,7 @@ import {useEffect, useRef, useState} from 'react' import {useFetcher, useNavigate} from '@remix-run/react' -import StampyIcon from '~/components/icons-generated/Stampy' +import IconStampyLarge from '~/components/icons-generated/StampyLarge' +import IconStampySmall from '~/components/icons-generated/StampySmall' import SendIcon from '~/components/icons-generated/PlaneSend' import Button from '~/components/Button' import {queryLLM, Entry, AssistantEntry, StampyEntry, Followup, ChatSettings} from '~/hooks/useChat' @@ -112,7 +113,7 @@ export const WidgetStampy = ({className}: {className?: string}) => { </div> <div className="sample-messages-container padding-bottom-24"> - <StampyIcon /> + <IconStampySmall /> <div className="sample-messages rounded"> <div className="padding-bottom-24">Try asking me...</div> {questions.map((question, i) => ( @@ -147,11 +148,11 @@ type FollowupsProps = { } const Followups = ({title, followups, onSelect, className}: FollowupsProps) => ( <> - {title && <div className={'padding-bottom-24 color-grey ' + (className || '')}>{title}</div>} + {title && <div className={'padding-bottom-24 grey' + (className || '')}>{title}</div>} {followups?.map(({text, pageid}, i) => ( <div key={i} className="padding-bottom-16"> - <Button className="secondary-alt" action={() => onSelect({text, pageid})}> + <Button className="secondary-alt-large" action={() => onSelect({text, pageid})}> {text} </Button> </div> @@ -166,20 +167,18 @@ const SplashScreen = ({ questions?: string[] onQuestion: (v: string) => void }) => ( - <> - <div className="padding-top-40"> - <StampyIcon /> - <div className="fcol-6 padding-bottom-40 padding-top-40"> - <h2 className="teal-500">Hi there, I'm Stampy.</h2> - <h2>I can answer your questions about AI Safety</h2> - </div> - <Followups - title="Popular questions" - followups={questions?.map((text: string) => ({text}))} - onSelect={({text}: Followup) => onQuestion(text)} - /> + <div className="padding-top-40"> + <IconStampyLarge /> + <div className="fcol-6 padding-bottom-40 padding-top-40"> + n<h2 className="teal-500">Hi there, I'm Stampy.</h2> + <h2>I can answer your questions about AI Safety</h2> </div> - </> + <Followups + title="Not sure where to start? Try these:" + followups={questions?.map((text: string) => ({text}))} + onSelect={({text}: Followup) => onQuestion(text)} + /> + </div> ) type ChatbotProps = { diff --git a/app/components/Feedback/Form.tsx b/app/components/Feedback/Form.tsx index c3febdcb..e9379fd7 100644 --- a/app/components/Feedback/Form.tsx +++ b/app/components/Feedback/Form.tsx @@ -41,7 +41,7 @@ const FeedbackForm = ({onSubmit, onClose, options}: FeedbackFormProps) => { onClick={() => setNumClicks((current) => current + 1)} className="fcol-5 feedback-form bordered" > - <span className="black small">What was the problem?</span> + <span className="black small padding-bottom-32">What was the problem?</span> {options?.map((option) => ( <Button key={option} diff --git a/app/components/Feedback/feedback.css b/app/components/Feedback/feedback.css index 67068bd9..992b807b 100644 --- a/app/components/Feedback/feedback.css +++ b/app/components/Feedback/feedback.css @@ -7,11 +7,14 @@ z-index: 2; max-width: 384px; padding: var(--spacing-32); + margin-top: var(--spacing-8); } + +/* Comment to Nemo when he reviews: why didn't you just do this the way you did the settings buttons? */ .select-option { height: var(--spacing-48); padding: var(--spacing-8) var(--spacing-16); - margin: var(--spacing-8) 0; + margin-bottom: var(--spacing-16); cursor: pointer; width: 100%; } @@ -22,10 +25,10 @@ .feedback-text { width: calc(100% - var(--spacing-24)); max-width: calc(100% - var(--spacing-24)); - height: 128px; padding: var(--spacing-12); margin: var(--spacing-40) 0; box-sizing: content-box; + background: pink; } .feedback-text.no-options { margin: var(--spacing-16) 0; diff --git a/app/components/Nav/index.tsx b/app/components/Nav/index.tsx index bf957a01..25d572c5 100644 --- a/app/components/Nav/index.tsx +++ b/app/components/Nav/index.tsx @@ -29,7 +29,7 @@ export const Nav = ({toc, categories}: NavProps) => { id="showArticles" /> <ArticlesDropdown toc={toc} categories={categories || []} /> - <MenuItem primary={true} link="/chat/" icon={<BotIcon />} text="Stampy chatbot" /> + <MenuItem primary={true} link="/chat/" icon={<BotIcon />} text="AI Safety Chatbot" /> <li className="top-menu-item"> <div className="top-menu-divider"></div> </li> diff --git a/app/components/icons-generated/StampyLarge.tsx b/app/components/icons-generated/StampyLarge.tsx new file mode 100644 index 00000000..a4c89807 --- /dev/null +++ b/app/components/icons-generated/StampyLarge.tsx @@ -0,0 +1,48 @@ +import type {SVGProps} from 'react' +const SvgStampyLarge = (props: SVGProps<SVGSVGElement>) => ( + <svg xmlns="http://www.w3.org/2000/svg" width={80} height={69} fill="none" {...props}> + <g clipPath="url(#StampyLarge_svg__a)"> + <path + fill="#ECA680" + d="M77.248 62.1a3.71 3.71 0 0 1-3.712-3.706 3.71 3.71 0 0 1 3.712-3.705h.448v-4.536h-.448a3.71 3.71 0 0 1-3.712-3.706 3.71 3.71 0 0 1 3.712-3.705h.448v-4.536h-.448a3.71 3.71 0 0 1-3.712-3.706 3.71 3.71 0 0 1 3.712-3.706h.448v-4.536a3.77 3.77 0 0 1-3.264-1.277c-1.344-1.598-1.152-3.898.448-5.24a3.6 3.6 0 0 1 2.816-.83v-4.536h-.448a3.71 3.71 0 0 1-3.712-3.706 3.71 3.71 0 0 1 3.712-3.705h.448V1.406H73.28a3.71 3.71 0 0 1-3.712 3.705 3.71 3.71 0 0 1-3.712-3.705h-4.8a3.71 3.71 0 0 1-3.712 3.705 3.71 3.71 0 0 1-3.712-3.705h-4.8A3.71 3.71 0 0 1 45.12 5.11a3.71 3.71 0 0 1-3.712-3.705h-4.8a3.71 3.71 0 0 1-3.712 3.705 3.71 3.71 0 0 1-3.712-3.705h-4.8a3.71 3.71 0 0 1-3.712 3.705 3.71 3.71 0 0 1-3.712-3.705h-4.8A3.71 3.71 0 0 1 8.448 5.11a3.71 3.71 0 0 1-3.712-3.705H.32v5.558a3.71 3.71 0 0 1 3.712 3.705A3.71 3.71 0 0 1 .32 14.375v4.472c1.088 0 2.112.447 2.88 1.342 1.344 1.597 1.152 3.897-.448 5.239-.704.575-1.536.894-2.432.894v4.472A3.71 3.71 0 0 1 4.032 34.5 3.71 3.71 0 0 1 .32 38.206v4.472a3.71 3.71 0 0 1 3.712 3.705A3.71 3.71 0 0 1 .32 50.09v4.472a3.71 3.71 0 0 1 3.712 3.706A3.71 3.71 0 0 1 .32 61.972v5.559h4.416a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.8a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.8a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.8a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.8a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.8a3.71 3.71 0 0 1 3.712-3.706 3.71 3.71 0 0 1 3.712 3.706h4.416v-5.559c-.192.128-.32.128-.448.128" + opacity={0.5} + /> + <path + fill="#ECA680" + d="M79.808 68.68H73.28v-1.086a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087h-6.912v-1.087a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087h-6.912v-1.087a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087h-6.784v-1.087a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087h-6.912v-1.087a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087h-6.848v-1.087a2.7 2.7 0 0 0-2.688-2.683 2.7 2.7 0 0 0-2.688 2.683v1.087H.128v-7.667h1.088a2.7 2.7 0 0 0 2.688-2.683 2.7 2.7 0 0 0-2.688-2.684H.128v-6.58h1.088a2.7 2.7 0 0 0 2.688-2.684A2.7 2.7 0 0 0 1.216 43.7H.128v-6.58h1.088a2.7 2.7 0 0 0 2.688-2.684 2.7 2.7 0 0 0-2.688-2.683H.128v-6.517h1.088c.64 0 1.216-.192 1.728-.639a2.5 2.5 0 0 0 .96-1.789c.064-.702-.128-1.405-.64-1.916-.512-.575-1.28-.959-2.048-.959H.128V13.29h1.088a2.7 2.7 0 0 0 2.688-2.683 2.7 2.7 0 0 0-2.688-2.684H.128V.256h6.528v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.912v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.912v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.912v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.784v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.912v1.086a2.7 2.7 0 0 0 2.688 2.683 2.7 2.7 0 0 0 2.688-2.683V.256h6.528v7.858l-1.216-.128h-.32a2.7 2.7 0 0 0-2.688 2.683 2.7 2.7 0 0 0 2.688 2.684h.32l1.216-.128v6.9l-1.216-.128c-.768-.064-1.472.128-2.048.575a2.5 2.5 0 0 0-.96 1.79c-.064.702.128 1.405.64 1.916.576.703 1.472 1.022 2.368.958l1.216-.128v6.9l-1.216-.127h-.32a2.7 2.7 0 0 0-2.688 2.683 2.7 2.7 0 0 0 2.688 2.683h.32l1.216-.127v6.9l-1.216-.128h-.32a2.7 2.7 0 0 0-2.688 2.683 2.7 2.7 0 0 0 2.688 2.683h.32l1.216-.127v6.9l-1.216-.128h-.32a2.7 2.7 0 0 0-2.688 2.683 2.7 2.7 0 0 0 2.688 2.684h.32l1.216-.128v7.539zm-4.544-2.108h2.368v-3.45c-2.368-.32-4.16-2.3-4.16-4.727s1.792-4.473 4.16-4.728v-2.428c-2.368-.32-4.16-2.3-4.16-4.728s1.792-4.472 4.16-4.728v-2.427c-2.368-.32-4.16-2.3-4.16-4.728s1.792-4.472 4.16-4.728v-2.428c-1.152-.128-2.24-.766-3.008-1.66-.832-.96-1.216-2.237-1.088-3.515.128-1.277.704-2.428 1.664-3.258a4.95 4.95 0 0 1 2.432-1.086v-2.428c-2.368-.32-4.16-2.3-4.16-4.728s1.792-4.472 4.16-4.728V2.62h-2.368c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706h-2.88c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706h-2.88c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706h-2.88c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706h-2.88c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706h-2.88c-.512 2.109-2.432 3.706-4.672 3.706-2.304 0-4.224-1.597-4.672-3.706H2.432v3.514c2.112.511 3.712 2.428 3.712 4.664 0 2.3-1.6 4.217-3.712 4.664v2.556c1.024.255 1.92.766 2.624 1.597.832.958 1.216 2.236 1.088 3.514s-.704 2.428-1.664 3.258c-.576.511-1.28.83-2.048 1.022v2.556c2.112.511 3.712 2.428 3.712 4.664s-1.6 4.216-3.712 4.664v2.555c2.112.511 3.712 2.428 3.712 4.664s-1.6 4.217-3.712 4.664v2.556c2.112.51 3.712 2.427 3.712 4.663s-1.6 4.217-3.712 4.664v3.514H4.8c.512-2.108 2.432-3.705 4.672-3.705 2.304 0 4.224 1.597 4.672 3.705h2.88c.512-2.108 2.432-3.705 4.672-3.705 2.304 0 4.224 1.597 4.672 3.705h2.88c.512-2.108 2.432-3.705 4.672-3.705 2.304 0 4.224 1.597 4.672 3.705h2.88c.512-2.108 2.432-3.705 4.672-3.705 2.304 0 4.224 1.597 4.672 3.705h2.88c.512-2.108 2.432-3.705 4.672-3.705 2.304 0 4.224 1.597 4.672 3.705h2.88c.512-2.108 2.432-3.705 4.672-3.705a4.624 4.624 0 0 1 4.672 3.705" + /> + <path fill="#B70808" d="M68.928 11.053H10.624v47.66h58.304z" /> + <path + fill="#D7DBE9" + d="M14.784 18.208c-.064.703-.064 1.406-.064 2.173 0 16.866 11.264 30.538 25.152 30.538s25.152-13.672 25.152-30.538c0-.703 0-1.406-.064-2.109H14.784z" + /> + <path fill="#5F6EA9" d="m42.048 34.436-2.88-8.817-6.336 9.328z" /> + <path + fill="#1B2B3E" + d="M39.424 53.028c-2.048 0-3.968-.32-5.76-1.023a2.176 2.176 0 0 1-1.216-2.747c.448-1.086 1.664-1.597 2.752-1.214 3.392 1.342 8.192.767 12.288-1.47 3.584-1.98 5.952-4.918 6.528-8.05.064-.319.128-.638.128-1.021.128-1.15 1.216-1.98 2.368-1.853 1.152.128 1.984 1.214 1.856 2.364-.064.447-.128.83-.192 1.214-.768 4.408-3.968 8.433-8.64 11.053-3.2 1.852-6.784 2.747-10.112 2.747" + /> + <path + fill="#fff" + d="M62.72 28.942c5.514 0 9.984-4.463 9.984-9.967s-4.47-9.967-9.984-9.967-9.984 4.463-9.984 9.967 4.47 9.967 9.984 9.967" + /> + <path + fill="#1B2B3E" + d="M61.44 26.897c3.923 0 7.104-3.175 7.104-7.091s-3.18-7.092-7.104-7.092-7.104 3.175-7.104 7.091 3.18 7.092 7.104 7.092" + /> + <path + fill="#fff" + d="M16.768 28.814c5.514 0 9.984-4.462 9.984-9.967 0-5.504-4.47-9.966-9.984-9.966s-9.984 4.462-9.984 9.966c0 5.505 4.47 9.967 9.984 9.967" + /> + <path + fill="#1B2B3E" + d="M18.24 25.747c3.923 0 7.104-3.175 7.104-7.091s-3.18-7.092-7.104-7.092-7.104 3.175-7.104 7.092 3.18 7.091 7.104 7.091M72.32 10.095a2.24 2.24 0 0 1-1.536-.64c-1.856-1.916-3.52-2.81-9.984-4.024-1.152-.192-1.92-1.342-1.728-2.492s1.344-1.917 2.496-1.725c6.976 1.342 9.6 2.492 12.288 5.303.832.83.768 2.236-.064 3.002-.448.384-.96.575-1.472.575M12.608 7.794c-.896 0-1.792-.575-2.048-1.533-.32-1.15.32-2.3 1.472-2.683 6.784-1.98 9.664-2.172 13.376-.895 1.088.384 1.728 1.598 1.28 2.748-.384 1.086-1.6 1.725-2.752 1.277-2.496-.894-4.416-.894-10.688.959a2.3 2.3 0 0 1-.64.127" + /> + </g> + <defs> + <clipPath id="StampyLarge_svg__a"> + <path fill="#fff" d="M0 0h80v69H0z" /> + </clipPath> + </defs> + </svg> +) +export default SvgStampyLarge diff --git a/app/components/icons-generated/StampySmall.tsx b/app/components/icons-generated/StampySmall.tsx new file mode 100644 index 00000000..68754c6c --- /dev/null +++ b/app/components/icons-generated/StampySmall.tsx @@ -0,0 +1,48 @@ +import type {SVGProps} from 'react' +const SvgStampySmall = (props: SVGProps<SVGSVGElement>) => ( + <svg xmlns="http://www.w3.org/2000/svg" width={40} height={35} fill="none" {...props}> + <g clipPath="url(#StampySmall_svg__a)"> + <path + fill="#ECA680" + d="M38.624 31.5c-1.024 0-1.856-.843-1.856-1.88s.832-1.88 1.856-1.88h.224v-2.3h-.224c-1.024 0-1.856-.843-1.856-1.88s.832-1.88 1.856-1.88h.224v-2.3h-.224c-1.024 0-1.856-.843-1.856-1.88s.832-1.88 1.856-1.88h.224v-2.3a1.87 1.87 0 0 1-1.632-.649 1.88 1.88 0 0 1 .224-2.657 1.78 1.78 0 0 1 1.408-.421V7.292h-.224c-1.024 0-1.856-.843-1.856-1.88s.832-1.88 1.856-1.88h.224V.712H36.64c0 1.038-.832 1.88-1.856 1.88s-1.856-.842-1.856-1.88h-2.4c0 1.038-.832 1.88-1.856 1.88s-1.856-.842-1.856-1.88h-2.4c0 1.038-.832 1.88-1.856 1.88s-1.856-.842-1.856-1.88h-2.4c0 1.038-.832 1.88-1.856 1.88s-1.856-.842-1.856-1.88h-2.4c0 1.038-.832 1.88-1.856 1.88S8.48 1.75 8.48.713h-2.4c0 1.038-.832 1.88-1.856 1.88S2.368 1.75 2.368.713H.16v2.82c1.024 0 1.856.843 1.856 1.88S1.184 7.292.16 7.292V9.56c.544 0 1.056.227 1.44.68.672.81.576 1.977-.224 2.658a1.9 1.9 0 0 1-1.216.454v2.268c1.024 0 1.856.843 1.856 1.88S1.184 19.38.16 19.38v2.268c1.024 0 1.856.843 1.856 1.88s-.832 1.88-1.856 1.88v2.268c1.024 0 1.856.842 1.856 1.88s-.832 1.88-1.856 1.88v2.819h2.208c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.4c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.4c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.4c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.4c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.4c0-1.038.832-1.88 1.856-1.88s1.856.843 1.856 1.88h2.208v-2.82c-.096.065-.16.065-.224.065" + opacity={0.5} + /> + <path + fill="#ECA680" + d="M39.905 34.838H36.64v-.551a1.36 1.36 0 0 0-1.344-1.361 1.36 1.36 0 0 0-1.344 1.361v.551h-3.457v-.551a1.36 1.36 0 0 0-1.343-1.361 1.36 1.36 0 0 0-1.344 1.361v.551h-3.457v-.551a1.36 1.36 0 0 0-1.343-1.361 1.36 1.36 0 0 0-1.344 1.361v.551h-3.392v-.551a1.36 1.36 0 0 0-1.344-1.361 1.36 1.36 0 0 0-1.344 1.361v.551h-3.456v-.551a1.36 1.36 0 0 0-1.344-1.361 1.36 1.36 0 0 0-1.345 1.361v.551H6.016v-.551a1.36 1.36 0 0 0-1.344-1.361 1.36 1.36 0 0 0-1.344 1.361v.551H.064v-3.889h.544a1.36 1.36 0 0 0 1.344-1.361 1.36 1.36 0 0 0-1.344-1.361H.064v-3.338h.544a1.36 1.36 0 0 0 1.344-1.361 1.36 1.36 0 0 0-1.344-1.361H.064v-3.338h.544a1.36 1.36 0 0 0 1.344-1.361 1.36 1.36 0 0 0-1.344-1.361H.064V12.8h.544c.32 0 .608-.097.864-.324.288-.227.448-.551.48-.908.032-.356-.064-.713-.32-.972-.256-.291-.64-.486-1.024-.486H.064v-3.37h.544A1.36 1.36 0 0 0 1.952 5.38 1.36 1.36 0 0 0 .608 4.019H.064V.129h3.264v.552a1.36 1.36 0 0 0 1.344 1.36A1.36 1.36 0 0 0 6.016.682V.13h3.456v.55a1.36 1.36 0 0 0 1.345 1.362A1.36 1.36 0 0 0 12.16.68V.13h3.456v.55a1.36 1.36 0 0 0 1.343 1.362A1.36 1.36 0 0 0 18.306.68V.13h3.456v.55a1.36 1.36 0 0 0 1.344 1.362A1.36 1.36 0 0 0 24.448.68V.13h3.392v.55a1.36 1.36 0 0 0 1.345 1.362A1.36 1.36 0 0 0 30.529.68V.13h3.455v.55a1.36 1.36 0 0 0 1.344 1.362A1.36 1.36 0 0 0 36.673.68V.13h3.265v3.986l-.608-.065h-.16a1.36 1.36 0 0 0-1.344 1.361 1.36 1.36 0 0 0 1.343 1.361h.16l.608-.065v3.5l-.608-.065a1.42 1.42 0 0 0-1.024.292c-.288.227-.448.551-.48.908-.032.356.065.713.32.972.288.356.736.518 1.185.486l.608-.065v3.5l-.608-.065h-.16a1.36 1.36 0 0 0-1.344 1.361 1.36 1.36 0 0 0 1.343 1.361h.16l.608-.064v3.5l-.608-.065h-.16a1.36 1.36 0 0 0-1.343 1.361 1.36 1.36 0 0 0 1.343 1.361h.16l.608-.065v3.5l-.608-.064h-.16a1.36 1.36 0 0 0-1.343 1.36 1.36 1.36 0 0 0 1.343 1.362h.16l.608-.065v3.824zm-2.273-1.07h1.185v-1.75a2.405 2.405 0 0 1-2.08-2.398c0-1.231.895-2.268 2.08-2.398v-1.231a2.405 2.405 0 0 1-2.08-2.398c0-1.232.895-2.269 2.08-2.398v-1.232a2.405 2.405 0 0 1-2.08-2.398c0-1.232.895-2.269 2.08-2.398v-1.232c-.577-.065-1.12-.389-1.505-.842a2.38 2.38 0 0 1-.543-1.783 2.5 2.5 0 0 1 .831-1.653 2.46 2.46 0 0 1 1.216-.55V7.874a2.405 2.405 0 0 1-2.08-2.398c0-1.232.897-2.269 2.08-2.398v-1.75h-1.184c-.255 1.07-1.215 1.88-2.335 1.88a2.38 2.38 0 0 1-2.336-1.88h-1.44c-.256 1.07-1.216 1.88-2.337 1.88a2.38 2.38 0 0 1-2.335-1.88h-1.44c-.256 1.07-1.216 1.88-2.336 1.88a2.38 2.38 0 0 1-2.337-1.88h-1.44c-.255 1.07-1.215 1.88-2.335 1.88a2.38 2.38 0 0 1-2.336-1.88h-1.44c-.257 1.07-1.216 1.88-2.337 1.88a2.38 2.38 0 0 1-2.336-1.88h-1.44c-.256 1.07-1.216 1.88-2.336 1.88A2.38 2.38 0 0 1 2.4 1.328H1.216V3.11a2.455 2.455 0 0 1 1.856 2.366c0 1.167-.8 2.139-1.856 2.366v1.296c.512.13.96.389 1.312.81a2.38 2.38 0 0 1 .544 1.783 2.5 2.5 0 0 1-.832 1.652c-.288.26-.64.422-1.024.519v1.296a2.455 2.455 0 0 1 1.856 2.366c0 1.134-.8 2.139-1.856 2.366v1.296a2.455 2.455 0 0 1 1.856 2.366c0 1.134-.8 2.139-1.856 2.365v1.297a2.455 2.455 0 0 1 1.856 2.365c0 1.135-.8 2.14-1.856 2.366v1.783H2.4c.256-1.07 1.216-1.88 2.336-1.88 1.152 0 2.112.81 2.336 1.88h1.44c.256-1.07 1.216-1.88 2.336-1.88 1.152 0 2.112.81 2.336 1.88h1.44c.256-1.07 1.217-1.88 2.336-1.88 1.152 0 2.113.81 2.337 1.88h1.44c.256-1.07 1.216-1.88 2.336-1.88 1.151 0 2.111.81 2.335 1.88h1.44c.257-1.07 1.217-1.88 2.337-1.88 1.152 0 2.112.81 2.335 1.88h1.44c.257-1.07 1.216-1.88 2.337-1.88 1.152-.032 2.111.778 2.336 1.88" + /> + <path fill="#B70808" d="M34.464 5.606H5.312v24.176h29.152z" /> + <path + fill="#D7DBE9" + d="M7.392 9.236c-.032.357-.032.713-.032 1.102 0 8.556 5.632 15.49 12.576 15.49s12.576-6.934 12.576-15.49c0-.357 0-.713-.032-1.07H7.392z" + /> + <path fill="#5F6EA9" d="m21.024 17.468-1.44-4.473-3.168 4.732z" /> + <path + fill="#1B2B3E" + d="M19.712 26.898c-1.024 0-1.985-.162-2.88-.518a1.11 1.11 0 0 1-.608-1.394c.224-.55.831-.81 1.375-.616 1.697.68 4.096.39 6.145-.745 1.791-1.005 2.976-2.495 3.264-4.083.032-.163.064-.325.064-.519a1.077 1.077 0 0 1 1.184-.94c.575.065.991.616.927 1.2-.032.226-.064.42-.096.615-.384 2.236-1.983 4.278-4.32 5.607-1.6.94-3.392 1.393-5.055 1.393" + /> + <path + fill="#fff" + d="M31.36 14.68c2.757 0 4.992-2.263 4.992-5.055s-2.235-5.056-4.992-5.056-4.992 2.264-4.992 5.056 2.235 5.055 4.992 5.055" + /> + <path + fill="#1B2B3E" + d="M30.72 13.643c1.962 0 3.552-1.61 3.552-3.597S32.682 6.45 30.72 6.45s-3.552 1.61-3.552 3.597 1.59 3.597 3.552 3.597" + /> + <path + fill="#fff" + d="M8.384 14.616c2.757 0 4.992-2.264 4.992-5.056S11.14 4.505 8.384 4.505 3.392 6.768 3.392 9.56s2.235 5.056 4.992 5.056" + /> + <path + fill="#1B2B3E" + d="M9.12 13.06c1.962 0 3.552-1.61 3.552-3.597s-1.59-3.597-3.552-3.597-3.552 1.61-3.552 3.597 1.59 3.597 3.552 3.597M36.16 5.12a1.1 1.1 0 0 1-.768-.324c-.928-.972-1.76-1.426-4.992-2.041-.576-.098-.96-.68-.864-1.264s.672-.973 1.248-.875c3.488.68 4.8 1.264 6.144 2.69.416.42.384 1.134-.032 1.523a1.12 1.12 0 0 1-.736.291M6.304 3.954c-.448 0-.896-.292-1.024-.778-.16-.583.16-1.167.736-1.361C9.408.81 10.848.713 12.704 1.36c.544.195.864.81.64 1.394-.192.55-.8.875-1.376.648-1.248-.454-2.208-.454-5.344.486a1.1 1.1 0 0 1-.32.065" + /> + </g> + <defs> + <clipPath id="StampySmall_svg__a"> + <path fill="#fff" d="M0 0h40v35H0z" /> + </clipPath> + </defs> + </svg> +) +export default SvgStampySmall diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts index 3e62ad3f..7c2e13b4 100644 --- a/app/components/icons-generated/index.ts +++ b/app/components/icons-generated/index.ts @@ -1,3 +1,5 @@ +export {default as StampyLarge} from './StampyLarge' +export {default as StampySmall} from './StampySmall' export {default as Aisafety} from './Aisafety' export {default as ArrowRight} from './ArrowRight' export {default as ArrowUpRight} from './ArrowUpRight' diff --git a/app/root.css b/app/root.css index f1d06885..6af755df 100644 --- a/app/root.css +++ b/app/root.css @@ -71,6 +71,7 @@ input { color: var(--colors-cool-grey-900), #1b2b3e; margin: 0; } + body { margin: auto; max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */ @@ -424,7 +425,7 @@ a { a:hover { text-decoration: none; - color: var(--colors-teal-500, #1d9089); + /* color: var(--colors-teal-500, #1d9089); */ } a:not(:hover, :focus-visible) { @@ -442,6 +443,7 @@ ul { padding: 0; padding-left: var(--spacing-32); } + ol { padding-left: var(--spacing-32); } @@ -522,6 +524,11 @@ svg { .icon-link path { stroke: var(--colors-cool-grey-600); } + +.icon-link:hover path { + stroke: var(--colors-teal-500); +} + .icon-link.focused path { stroke: var(--colors-teal-600); } diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx index 3b07e93b..abe2e440 100644 --- a/app/routes/chat.tsx +++ b/app/routes/chat.tsx @@ -25,7 +25,7 @@ export default function App() { const ModeButton = ({name, mode}: {name: string; mode: Mode}) => ( <Button - className={chatSettings.mode === mode ? 'secondary-selected' : ''} + className={chatSettings.mode === mode ? 'secondary-selected' : 'secondary'} action={() => setChatSettings({...chatSettings, mode})} > {name}