Merge pull request #126 from eye-on-surveillance/AI/landing-page

AI/landing page
eye-on-surveillance · Nov 2, 2023 · f9f1f9d · f9f1f9d
2 parents ccd99d5 + 38a292d
commit f9f1f9d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 26 deletions.
diff --git a/packages/web/components/BetaCard.tsx b/packages/web/components/BetaCard.tsx
@@ -149,12 +149,13 @@ const BetaCard = ({ card }: { card: ICard }) => {
 
       {/* Citations Section */}
       <div className="mb-6 mt-4">
-        <button
-          className="text-black mb-2 rounded px-4 py-2"
-          onClick={() => setShowCitations((prev) => !prev)}
-        >
-          {showCitations ? "Hide Citations" : "Show Citations"}
-        </button>
+      <button
+        className="bg-brighter-blue text-black hover:bg-even-brighter-blue font-bold py-2 px-4 rounded cursor-pointer focus:outline-none focus:shadow-outline"
+        aria-label={showCitations ? "Hide Citations" : "Show Citations"}
+        onClick={() => setShowCitations((prev) => !prev)}
+      >
+        {showCitations ? "Hide Citations" : "Show Citations"}
+      </button>
 
         {showCitations && (
           <div className="mt-2 text-sm">

diff --git a/packages/web/components/HomeBanner.tsx b/packages/web/components/HomeBanner.tsx
@@ -20,9 +20,9 @@ export default function HomeBanner() {
     <div className="bg-blue px-6 py-5 text-center text-primary sm:px-16 md:flex">
       <div className="md:grow"></div>
       <div className="md:w-3/4 md:max-w-2xl">
-        <h1 className="text-lg">What New Orleans City Council is doing</h1>
+        <h1 className="text-lg">What New Orleans City Council is doing about</h1>
         <h2 className="mt-3 text-4xl">
-          about <span className="bg-primary text-secondary">{word}</span>
+          <span className="bg-brighter-blue text-secondary">{word}?</span>
         </h2>
         <NewQuery />
       </div>

diff --git a/packages/web/components/NewQuery.tsx b/packages/web/components/NewQuery.tsx
@@ -125,8 +125,8 @@ export default function NewQuery() {
     }
   };
 
-  const submitQuery = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const submitQuery = async (e?: React.FormEvent<HTMLFormElement>) => {
+    e?.preventDefault();
 
     if (query.length <= 10) return;
 
@@ -135,41 +135,36 @@ export default function NewQuery() {
     const newCard = await insertSupabaseCard();
     const cardWResp = await sendQueryToFunction(newCard);
     addMyCard(cardWResp);
-    await updateQueryResponded(cardWResp, startedProcessingAt);
+    await updateQueryResponded(cardWResp, startedProcessingAt);  
   };
 
   return (
     <div className="my-12">
       <form onSubmit={submitQuery}>
         <div className="relative block">
           <FontAwesomeIcon
-            className="absolute left-2 top-1/2 ml-2 h-[28px] w-[28px] -translate-y-1/2 cursor-pointer object-contain"
+            className="absolute left-2 top-1/2 ml-2 h-[24px] w-[24px] -translate-y-1/2 cursor-pointer object-contain"
             icon={faMagnifyingGlass}
           />
           <input
             className="mb-3 block w-full appearance-none rounded-lg px-16 py-2 leading-tight text-secondary shadow focus:shadow-lg focus:outline-none"
             id="new-query"
             type="text"
             value={query}
-            placeholder={`Ask ${APP_NAME}`}
+            placeholder={`Ask ${APP_NAME} a question`}
             autoFocus
             disabled={isProcessing}
-            onChange={(e: React.FormEvent<HTMLInputElement>) => {
-              setQuery(e.currentTarget.value);
+            onChange={(e) => setQuery(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault(); 
+                submitQuery();
+              }
             }}
-          ></input>
+          />
         </div>
-        <button
-          className={`w-full rounded-lg md:w-1/2 ${
-            isProcessing ? "bg-blue-900 cursor-wait" : "bg-secondary"
-          } p-2 text-2xl text-blue`}
-          type="submit"
-          disabled={isProcessing}
-        >
-          Get answer
-        </button>
       </form>
-  
+
       <div className="mt-10">
         {card?.citations?.map((citation, index) => (
           <div key={index}>