Merge pull request #59 from auth0-lab/mobile-components

reviewing componetns for mobile
auth0-lab · Oct 9, 2024 · 5d48e27 · 5d48e27
2 parents 91060af + 3943f29
commit 5d48e27
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 221 deletions.
diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
@@ -76,7 +76,7 @@ export default function Chat({ params }: { params: { id: string } }) {
             {conversation.map((message: ClientMessage) =>
               message.role === "user" ? (
                 <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
-                  <div className="relative max-w-[70%] text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
+                  <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
                     {message.display}
                   </div>
                   <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
@@ -91,10 +91,13 @@ export default function Chat({ params }: { params: { id: string } }) {
                   <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
                     <Market0Icon />
                   </div>
-                  <div className="w-full font-light text-stone-600 flex items-center">{message.display}</div>
+                  <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
+                    {message.display}
+                  </div>
                 </div>
               ) : null
             )}
+
             <div ref={visibilityRef} className="w-full h-px" />
           </div>
           {conversation.length === 0 && (
@@ -146,7 +149,7 @@ export default function Chat({ params }: { params: { id: string } }) {
                           <Input
                             autoFocus
                             autoComplete="off"
-                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 text-base font-light"
+                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 text-sm sm:text-base font-light"
                             placeholder="Start Typing..."
                             {...field}
                           />

diff --git a/llm/components/conditional-purchase.tsx b/llm/components/conditional-purchase.tsx
@@ -102,7 +102,7 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
           message={
             <>
               {!simulating && (
-                <div className="text-slate-500 text-sm leading-6">
+                <div className="text-slate-500 text-xs sm:text-sm leading-6">
                   To simulate the agent executing the task, please click{" "}
                   <button className="border-b border-slate-500 leading-none" onClick={simulateExecution}>
                     here
@@ -111,34 +111,34 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
                 </div>
               )}
               {simulating && (
-                <div className="flex gap-3 items-center w-fit mx-auto text-slate-500 text-sm leading-6">
+                <div className="flex gap-3 items-center w-fit mx-auto text-slate-500 text-xs sm:text-sm leading-6">
                   Simulating <Loader />
                 </div>
               )}
             </>
           }
         >
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">Buy {conditionalPurchase.symbol}</div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-green-400 text-right">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-3 items-start">
                 <div className="w-[25px]">
                   <TaskIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   Task: Buy {conditionalPurchase.quantity} ${conditionalPurchase.symbol} shares if{" "}
                   {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
@@ -150,29 +150,29 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
     case "canceled":
       return (
         <WarningWrapper className="max-w-xl">
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">
                   Buy {conditionalPurchase.quantity} shares of {conditionalPurchase.symbol}
                 </div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-green-400">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-4 items-start">
                 <div className="w-[25px]">
                   <CancelRedIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   The purchase was <strong className="text-red-400">CANCELED</strong> on{" "}
                   {format(conditionalPurchase.updated_at, "PPPP p")}.
                 </div>
@@ -184,29 +184,29 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
     case "completed":
       return (
         <WarningWrapper className="max-w-xl">
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">
                   Buy {conditionalPurchase.quantity} shares of {conditionalPurchase.symbol}
                 </div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-green-400">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-4 items-start">
                 <div className="w-[25px]">
                   <CheckGreenIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   The purchase was <strong className="text-green-400">COMPLETED</strong> on{" "}
                   {format(conditionalPurchase.updated_at, "PPPP p")}.
                 </div>

diff --git a/llm/components/documents.tsx b/llm/components/documents.tsx
@@ -40,10 +40,7 @@ export const Documents = ({
         message: `Subscribe me to the newsletter. Once done ASK me if I want to read the forecast analysis for ${symbol}.`,
         hidden: true,
       });
-      setMessages((prevMessages: ClientMessage[]) => [
-        ...prevMessages,
-        response,
-      ]);
+      setMessages((prevMessages: ClientMessage[]) => [...prevMessages, response]);
     })();
   };
 
@@ -59,17 +56,12 @@ export const Documents = ({
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Link
-                        href={
-                          document.metadata.link ??
-                          `/report/${document.metadata.id}`
-                        }
+                        href={document.metadata.link ?? `/report/${document.metadata.id}`}
                         target="_black"
                         rel="noopener noreferrer"
                         className="cursor-pointer"
                       >
-                        <span className="font-mono text-gray-500 text-[0.65rem]">
-                          [{index + 1}]
-                        </span>
+                        <span className="font-mono text-gray-500 text-[0.65rem]">[{index + 1}]</span>
                       </Link>
                     </TooltipTrigger>
                     <TooltipContent>
@@ -82,19 +74,17 @@ export const Documents = ({
           </div>
         )}
         {showEnrollment && finished && (
-          <div className="border border-gray-300 rounded-xl p-6 flex items-center w-full justify-between mt-5">
-            <div className="flex flex-col gap-1.5">
-              <h3 className="font-semibold text-base leading-6 text-stone-700">
-                Join Market0 Newsletter
-              </h3>
-              <p className="text-sm font-normal leading-5">
+          <div className="border border-gray-300 rounded-xl p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0 items-center w-full justify-between mt-5">
+            <div className="flex flex-col gap-1 sm:gap-1.5">
+              <h3 className="font-semibold text-sm sm:text-base leading-6 text-stone-700">Join Market0 Newsletter</h3>
+              <p className="text-xs sm:text-sm font-normal leading-5">
                 To get access to analyst forecasts join the newsletter.
               </p>
             </div>
-            <div>
+            <div className="w-full sm:w-fit">
               <button
                 onClick={() => enroll()}
-                className="bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4 transition-all duration-300"
+                className="w-full sm:w-fit bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4 transition-all duration-300"
               >
                 Join
               </button>

diff --git a/llm/components/events.tsx b/llm/components/events.tsx
@@ -17,17 +17,14 @@ export function Events({ events }: { events: Event[] }) {
     <div className="flex flex-col gap-4">
       <WarningWrapper>
         <div className="flex flex-col gap-4">
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-1 sm:gap-3">
             {events.map((event) => (
-              <div
-                key={event.date}
-                className="flex flex-col p-6 bg-zinc-900 rounded-2xl"
-              >
-                <div className="border-b border-[#535257] pb-4 mb-4 flex flex-col gap-3">
+              <div key={event.date} className="flex flex-col p-4 sm:p-6 bg-zinc-900 rounded-2xl">
+                <div className="border-b border-[#535257] pb-2 sm:pb-4 mb-2 sm:mb-4 flex flex-col gap-3">
                   <div className="text-zinc-500 text-xs font-medium">
                     {format(parseISO(event.date), "dd LLL, yyyy")}
                   </div>
-                  <div className="text-xl text-white font-semibold leading-6">
+                  <div className="text-base sm:text-xl text-white font-semibold leading-6">
                     {event.headline.slice(0, 30)}
                   </div>
                 </div>

diff --git a/llm/components/positions.tsx b/llm/components/positions.tsx
@@ -17,29 +17,19 @@ export function Positions({ positions }: { positions: Position[] }) {
         {positions.map((position) => (
           <button
             key={position.ticker_id}
-            className="flex p-5 text-green-400 rounded-2xl bg-zinc-950 hover:bg-zinc-800 transition-all duration-300"
+            className="flex p-4 sm:p-5 text-green-400 rounded-2xl bg-zinc-950 hover:bg-zinc-800 transition-all duration-300"
             onClick={async () => {
-              const response = await continueConversation(
-                `View ${position.ticker_id}`
-              );
-              setMessages((prevMessages: ClientMessage[]) => [
-                ...prevMessages,
-                response,
-              ]);
+              const response = await continueConversation(`View ${position.ticker_id}`);
+              setMessages((prevMessages: ClientMessage[]) => [...prevMessages, response]);
             }}
           >
-            <div className="flex flex-row justify-between w-full items-end px-3">
+            <div className="flex flex-row justify-between w-full items-end px-1 sm:px-3">
               <div className="flex flex-col gap-2">
-                <div className="text-sm text text-white leading-6 text-left">
-                  {position.ticker_id}
-                </div>
-                <div className="text-base font-semibold text-white text-left">
-                  Qty: {position.quantity}
-                </div>
+                <div className="text-xs sm:text-sm text-white leading-6 text-left">{position.ticker_id}</div>
+                <div className="text-sm sm:text-base font-semibold text-white text-left">Qty: {position.quantity}</div>
               </div>
-              <div className="text-sm text-white text-right">
-                Avg. Price: $
-                {parseFloat(position.av_price.toString()).toFixed(2)}
+              <div className="text-xs sm:text-sm text-white text-right">
+                Avg. Price: ${parseFloat(position.av_price.toString()).toFixed(2)}
               </div>
             </div>
           </button>

diff --git a/llm/components/reminder.tsx b/llm/components/reminder.tsx
@@ -50,28 +50,25 @@ export function Reminder({ reminderID }: { reminderID: string }) {
       }}
       connectWidget={{
         title: "Connect to Google Tasks",
-        description:
-          "To create reminders in Google Tasks, you’ll first need to connect to your Google Account.",
+        description: "To create reminders in Google Tasks, you’ll first need to connect to your Google Account.",
       }}
       shouldCheckAuthorization={shouldCheckAuthorization}
       onUserAuthorized={onUserAuthorized}
     >
       {reminder && (
-        <div className="border border-gray-300 rounded-lg p-6 flex items-center w-full justify-between">
-          <div className="flex flex-col gap-2">
-            <h2 className="text-base leading-6 font-semibold">
-              {reminder.title}
-            </h2>
-            <p className="text-sm leading-5 font-light text-gray-500">
+        <div className="border border-gray-300 rounded-xl p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0 items-center w-full justify-between">
+          <div className="flex flex-col gap-1 sm:gap-1.5 w-full">
+            <h3 className="font-semibold text-sm sm:text-base leading-6 text-stone-700">{reminder.title}</h3>
+            <p className="text-xs sm:text-sm font-normal leading-5">
               Google Task created at {format(reminder.due, "dd LLL, yyyy")}.
             </p>
           </div>
-          <div>
+          <div className="w-full sm:w-fit">
             <a
               href="https://tasks.google.com"
               rel="noopener noreferrer"
               target="_blank"
-              className="flex gap-2 items-center bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
+              className="w-full sm:w-fit flex items-center justify-center gap-3 bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
             >
               View Task <ExternalLink />
             </a>

diff --git a/llm/components/stock-purchase-status.tsx b/llm/components/stock-purchase-status.tsx
@@ -1,11 +1,18 @@
 import { CancelRedIcon, CheckGreenIcon } from "@/components/icons";
 
-export const StockPurchaseStatus = ({ message, status }: { message: string, status?: 'in-progress' | 'success' | 'failure'  }) =>
+export const StockPurchaseStatus = ({
+  message,
+  status,
+}: {
+  message: string;
+  status?: "in-progress" | "success" | "failure";
+}) => (
   <div className="flex flex-row gap-4 items-center">
-    { status === 'failure' && <CancelRedIcon /> }
-    { status === 'success' && <CheckGreenIcon /> }
-    { status === 'in-progress' && <div className="animate-spin h-5 w-5 border-t-2 border-b-2 border-white rounded-full" /> }
-    <p>
-      {message}
-    </p>
-  </div>;
+    {status === "failure" && <CancelRedIcon />}
+    {status === "success" && <CheckGreenIcon />}
+    {status === "in-progress" && (
+      <div className="animate-spin h-5 w-5 border-t-2 border-b-2 border-white rounded-full" />
+    )}
+    <p>{message}</p>
+  </div>
+);