Try asking me...
{questions.map((question, i) => (
-
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 &&
{title}
}
+ {title &&
{title}
}
{followups?.map(({text, pageid}, i) => (
@@ -126,16 +127,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 13e37bce..47107ae9 100644
--- 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
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) => (
-