Merge pull request #616 from StampyAI/Melissa

new input component, CSS stuff
StampyAI · May 3, 2024 · 3408199 · 3408199
2 parents b5a73e9 + 7ed2195
commit 3408199
Show file tree

Hide file tree

Showing 13 changed files with 294 additions and 61 deletions.
diff --git a/app/assets/icons/link-out.svg b/app/assets/icons/link-out.svg
diff --git a/app/assets/icons/stampy.svg b/app/assets/icons/stampy.svg
diff --git 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
@@ -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
@@ -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
@@ -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 = () => {
           <div className="padding-bottom-24">Try asking me...</div>
           {questions.map((question, i) => (
             <div key={i} className="padding-bottom-16">
-              <Button className="secondary-alt" action={stampyUrl(question)}>
+              <Button className="secondary-alt-large" action={stampyUrl(question)}>
                 {question}
               </Button>
             </div>
@@ -82,10 +83,9 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
 
   return (
     <div className="widget-ask flex-container">
-      <input
-        type="text"
-        className="full-width bordered secondary right-icon"
-        placeholder={placeholder}
+      <Input
+        placeHolder="Ask Stampy a question..."
+        className="large col-10"
         value={question}
         onChange={(e) => handleChange(e.target.value)}
         onKeyDown={(e) => {
@@ -103,10 +103,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 && <div className="padding-bottom-24">{title}</div>}
+    {title && <div className={'padding-bottom-24 color-grey ' + (className || '')}>{title}</div>}
 
     {followups?.map(({text, pageid}, i) => (
       <div key={i} className="padding-bottom-16">
@@ -126,16 +127,18 @@ const SplashScreen = ({
   onQuestion: (v: string) => void
 }) => (
   <>
-    <StampyIcon />
-    <div className="col-6 padding-bottom-56">
-      <h2 className="teal-500">Hi there, I'm Stampy.</h2>
-      <h2>I can answer your questions about AI safety</h2>
+    <div className="padding-top-40">
+      <StampyIcon />
+      <div className="col-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>
-    <Followups
-      title="Popular questions"
-      followups={questions?.map((text: string) => ({text}))}
-      onSelect={({text}: Followup) => onQuestion(text)}
-    />
   </>
 )
 

diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
@@ -10,11 +10,6 @@
   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%;
@@ -30,11 +25,12 @@
 }
 .warning-floating {
   position: fixed;
-  right: 7vw;
+  right: 4.44vw;
   z-index: 100;
-  bottom: 5vw;
-  width: 11vw;
+  bottom: 4.44vw;
+  width: 10.13vw;
 }
+
 .red {
   color: #d40000;
 }

diff --git a/app/components/Input/index.tsx 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 (
+    <input
+      className={classes}
+      disabled={disabled}
+      placeholder={placeHolder}
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+    />
+  )
+}
+
+export default Input