Recommendation bot styling and text updates (#2058)

* Style/content updates * Match resource drawer widths * Change breakpoint
mitodl · Feb 19, 2025 · 8126fef · 8126fef
1 parent bc6b032
commit 8126fef
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 24 deletions.
diff --git a/frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBot.tsx b/frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBot.tsx
@@ -29,10 +29,6 @@ export const STARTERS = [
     content:
       "I want to learn about global warming, can you recommend any videos?",
   },
-  {
-    content:
-      "I am curious about AI applications for business.  Do you have any free courses about that?",
-  },
   {
     content:
       "I would like to learn about linear regression, preferably at no cost.",

diff --git a/frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBotDrawer.tsx b/frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBotDrawer.tsx
@@ -1,20 +1,43 @@
 import React, { useState, useRef, useEffect } from "react"
 import { Typography, styled, Drawer, AdornmentButton } from "ol-components"
-import { RiSparkling2Line, RiSendPlaneFill } from "@remixicon/react"
-import { Input } from "@mitodl/smoot-design"
+import {
+  RiSparkling2Line,
+  RiSendPlaneFill,
+  RiCloseLine,
+} from "@remixicon/react"
+import { Input, ActionButton } from "@mitodl/smoot-design"
 import type { AiChatMessage } from "@mitodl/smoot-design/ai"
 import AiRecommendationBot, { STARTERS } from "./AiRecommendationBot"
 import Image from "next/image"
 import timLogo from "@/public/images/icons/tim.svg"
 
-const EntryScreen = styled.div({
+const EntryScreen = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   gap: "16px",
-  padding: "104px 32px",
-})
+  padding: "136px 40px 24px 40px",
+  width: "900px",
+  [theme.breakpoints.down("md")]: {
+    padding: "136px 24px 24px 24px",
+    width: "100%",
+  },
+}))
+
+const CloseButton = styled(ActionButton)(({ theme }) => ({
+  position: "absolute",
+  top: "24px",
+  right: "40px",
+  backgroundColor: theme.custom.colors.lightGray2,
+  "&&:hover": {
+    backgroundColor: theme.custom.colors.red,
+    color: theme.custom.colors.white,
+  },
+  [theme.breakpoints.down("md")]: {
+    right: "24px",
+  },
+}))
 
 const TimLogoBox = styled.div(({ theme }) => ({
   position: "relative",
@@ -33,18 +56,24 @@ const TimLogo = styled(Image)({
   display: "block",
 })
 
+const Title = styled(Typography)({
+  textAlign: "center",
+  padding: "0 40px",
+})
+
 const StyledInput = styled(Input)(({ theme }) => ({
   backgroundColor: theme.custom.colors.lightGray1,
   borderRadius: "8px",
   border: `1px solid ${theme.custom.colors.lightGray2}`,
-  margin: "24px 0",
-  width: "700px",
-  [theme.breakpoints.down("md")]: {
-    width: "100%",
-  },
+  margin: "8px 0 24px 0",
   "button:disabled": {
     backgroundColor: "inherit",
   },
+  [theme.breakpoints.down("sm")]: {
+    ".Mit-AdornmentButton": {
+      padding: 0,
+    },
+  },
 }))
 
 const SendIcon = styled(RiSendPlaneFill)(({ theme }) => ({
@@ -57,9 +86,7 @@ const SendIcon = styled(RiSendPlaneFill)(({ theme }) => ({
 const Starters = styled.div(({ theme }) => ({
   display: "flex",
   gap: "16px",
-  maxWidth: "836px",
-  marginTop: "12px",
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("sm")]: {
     flexDirection: "column",
   },
 }))
@@ -74,7 +101,7 @@ const Starter = styled.button(({ theme }) => ({
   color: theme.custom.colors.darkGray2,
   backgroundColor: "transparent",
   textAlign: "left",
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("sm")]: {
     textAlign: "center",
     padding: "12px 36px",
   },
@@ -129,21 +156,41 @@ const AiRecommendationBotDrawer = ({
     setShowEntryScreen(false)
   }
 
-  const onDrawerClose = () => {
+  const closeDrawer = () => {
     setOpen(false)
     setShowEntryScreen(true)
   }
 
   return (
-    <Drawer open={open} anchor="right" onClose={onDrawerClose}>
+    <Drawer
+      open={open}
+      anchor="right"
+      onClose={closeDrawer}
+      PaperProps={{
+        sx: {
+          minWidth: (theme) => ({
+            [theme.breakpoints.down("md")]: {
+              width: "100%",
+            },
+          }),
+        },
+      }}
+    >
+      <CloseButton
+        variant="text"
+        size="medium"
+        onClick={closeDrawer}
+        aria-label="Close"
+      >
+        <RiCloseLine />
+      </CloseButton>
       {showEntryScreen ? (
         <EntryScreen>
           <TimLogoBox>
             <RiSparkling2Line />
             <TimLogo src={timLogo.src} alt="" width={40} height={40} />
           </TimLogoBox>
-          <Typography variant="h4">Welcome! I am TIM the Beaver.</Typography>
-          <Typography>Need assistance getting started?</Typography>
+          <Title variant="h4">What do you want to learn from MIT?</Title>
           <StyledInput
             fullWidth
             size="chat"
@@ -160,7 +207,6 @@ const AiRecommendationBotDrawer = ({
             }
             responsive
           />
-          <Typography variant="h5">Let me know how I can help.</Typography>
           <Starters>
             {STARTERS.map(({ content }, index) => (
               <Starter
@@ -179,7 +225,7 @@ const AiRecommendationBotDrawer = ({
           </Starters>
         </EntryScreen>
       ) : (
-        <AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
+        <AiRecommendationBot ref={aiChatRef} />
       )}
     </Drawer>
   )