From f82475118eb44a67400fc6ab36aecff260f8195c Mon Sep 17 00:00:00 2001
From: Ayyub Ibrahim <ayyub.ibrahimi@gmail.com>
Date: Thu, 2 May 2024 17:40:53 -0500
Subject: [PATCH 1/2] fixed spacing in response; added preview to card

---
 packages/web/components/Card/BetaCard.tsx     |  4 +-
 .../components/HomeResults/QueryResult.tsx    | 40 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/Card/BetaCard.tsx b/packages/web/components/Card/BetaCard.tsx
index e931247..52a7e73 100644
--- a/packages/web/components/Card/BetaCard.tsx
+++ b/packages/web/components/Card/BetaCard.tsx
@@ -123,8 +123,8 @@ const BetaCard = ({ card }: { card: ICard }) => {
       </div>
 
       {/* Combined Card Responses */}
-      <p className="mb-4">{combinedResponses}</p>
-
+      <div className="mb-4 whitespace-pre-wrap font-sans">{combinedResponses}</div>
+      
       <div>
         {isYouTubeURL(thumbnail?.source_url) && (
           <iframe
diff --git a/packages/web/components/HomeResults/QueryResult.tsx b/packages/web/components/HomeResults/QueryResult.tsx
index 2bb5c49..1636af5 100644
--- a/packages/web/components/HomeResults/QueryResult.tsx
+++ b/packages/web/components/HomeResults/QueryResult.tsx
@@ -96,10 +96,11 @@ export default function QueryResult({ card }: { card: ICard }) {
   }, [card.id, isLoading]);
 
   const CardBody = () => {
-    const displayText = responses
+    const combinedResponses = responses
       .map((responseObj) => responseObj.response)
-      .join(" ")
-      .substring(0, MAX_CHARACTERS_PREVIEW);
+      .join(" ");
+    const previewText = combinedResponses.split(" ").slice(0, 100).join(" ");
+
     return (
       <Link href={`${CARD_SHOW_PATH}/${card.id}`}>
         <div>
@@ -110,12 +111,24 @@ export default function QueryResult({ card }: { card: ICard }) {
             </span>
             <span className="text-black">{prettyCreatedAt}</span>
           </h6>
-
+  
           {!isLoading ? (
-            <p className="my-5">
-              {displayText}
-              {displayText.length > MAX_CHARACTERS_PREVIEW ? "..." : null}
-            </p>
+            <>
+              {/* Response Preview */}
+              <div className="my-5 overflow-hidden" style={{ height: "4.5em" }}>
+                <p>{previewText}...</p>
+              </div>
+  
+              {/* YouTube Preview */}
+              {isYouTubeURL(thumbnail?.source_url) && (
+                <iframe
+                  id="ytplayer"
+                  src={getYouTubeEmbedUrl(thumbnail?.source_url)}
+                  frameBorder="0"
+                  className="h-64 w-full lg:h-96"
+                ></iframe>
+              )}
+            </>
           ) : (
             <p className="my-5">
               <FontAwesomeIcon
@@ -125,15 +138,6 @@ export default function QueryResult({ card }: { card: ICard }) {
               {LOADING_MESSAGES[msgIndex]}
             </p>
           )}
-
-          {isYouTubeURL(thumbnail?.source_url) && (
-            <iframe
-              id="ytplayer"
-              src={getYouTubeEmbedUrl(thumbnail?.source_url)}
-              frameBorder="0"
-              className="h-64 w-full lg:h-96"
-            ></iframe>
-          )}
         </div>
       </Link>
     );
@@ -151,4 +155,4 @@ export default function QueryResult({ card }: { card: ICard }) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 1f3f418b741dc239b99ed83b5f169f21c2d61965 Mon Sep 17 00:00:00 2001
From: Ayyub Ibrahim <ayyub.ibrahimi@gmail.com>
Date: Thu, 2 May 2024 18:04:39 -0500
Subject: [PATCH 2/2] adjusted color scheme; improved style of alert box

---
 .../app/custom-css/1-helpers/_variables.scss  |  2 +-
 packages/web/components/Alerts/SignUp.tsx     | 17 +++--
 .../components/Alerts/alertsignup.module.scss | 73 ++++++++++---------
 packages/web/components/Card/BetaCard.tsx     |  6 +-
 .../web/components/HomeBanner/NewQuery.tsx    |  4 +-
 .../components/HomeResults/QueryResult.tsx    | 46 ++++++------
 6 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/packages/web/app/custom-css/1-helpers/_variables.scss b/packages/web/app/custom-css/1-helpers/_variables.scss
index 3c96e67..574752a 100644
--- a/packages/web/app/custom-css/1-helpers/_variables.scss
+++ b/packages/web/app/custom-css/1-helpers/_variables.scss
@@ -29,7 +29,7 @@ $xl: 82.5rem;
 // Colors
 $primary: #2c2c2c;
 $altPrimary: #e1e1da;
-$secondary: #f35610;
+$secondary: #6b93c3;
 $altSecondary: #6b93c3;
 
 // Gradients
diff --git a/packages/web/components/Alerts/SignUp.tsx b/packages/web/components/Alerts/SignUp.tsx
index 8e40249..7035eeb 100644
--- a/packages/web/components/Alerts/SignUp.tsx
+++ b/packages/web/components/Alerts/SignUp.tsx
@@ -1,8 +1,8 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
-import styles from "./alertsignup.module.scss";
 import { TABLES } from "@/lib/supabase/db";
 import { supabase } from "@/lib/supabase/supabaseClient";
+import { useEffect, useRef, useState } from "react";
+import styles from "./alertsignup.module.scss";
 
 interface AlertSignUpProps {
   onSignUpComplete: () => void;
@@ -27,10 +27,9 @@ export default function AlertSignUp({ onSignUpComplete }: AlertSignUpProps) {
 
   const handleSubscription = async (email: string) => {
     try {
-      const { data, error } = await supabase.from(TABLES.ALERTS).insert([
-        { email: email, topics: "" },
-      ]);
-
+      const { data, error } = await supabase
+        .from(TABLES.ALERTS)
+        .insert([{ email: email, topics: "" }]);
       if (error) {
         console.error("Error inserting subscription", error.message);
         setSuccessMessage(`Error: ${error.message}. Please try again.`);
@@ -54,7 +53,10 @@ export default function AlertSignUp({ onSignUpComplete }: AlertSignUpProps) {
   return (
     <div className={styles["alert-sign-up"]}>
       <form onSubmit={handleSubmit}>
-        <label htmlFor="email">Sign up for email alerts:</label>
+        <label htmlFor="email" className={styles["label"]}>
+          Sign up to receive alerts about new ordinances on first reading at city
+          council.
+        </label>
         <input
           ref={emailInputRef}
           type="email"
@@ -63,6 +65,7 @@ export default function AlertSignUp({ onSignUpComplete }: AlertSignUpProps) {
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Enter your email"
           required
+          className={styles["input"]}
         />
         <button type="submit" className={styles["submit-button"]}>
           Subscribe
diff --git a/packages/web/components/Alerts/alertsignup.module.scss b/packages/web/components/Alerts/alertsignup.module.scss
index 16843b1..576a69a 100644
--- a/packages/web/components/Alerts/alertsignup.module.scss
+++ b/packages/web/components/Alerts/alertsignup.module.scss
@@ -1,45 +1,48 @@
 @use "../../app/custom-css/1-helpers/variables" as var;
 
 .alert-sign-up {
-  background-color: var.$primary;
-  padding: 0.8rem; 
+  background-color: #f7f7f7;
+  padding: 1.5rem;
   text-align: center;
   border-radius: 0.5rem;
   width: 80%;
-  max-width: 400px; 
-  margin: 3rem auto 1rem; 
-  box-shadow: 0px 3px 6px #00000029;
+  max-width: 400px;
+  margin: 3rem auto 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
   label,
   legend {
-    color: var.$altPrimary;
-    margin-bottom: 0.8rem; 
+    color: #333;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    display: block;
   }
 
   input[type='email'] {
-    border-radius: 5rem;
-    padding: 0.8rem; 
-    margin-bottom: 0.8rem; 
-    border: none;
-    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 0.5rem;
+    padding: 0.8rem;
+    margin-bottom: 1rem;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     width: calc(100% - 2rem);
+    font-size: 16px;
   }
 
   .topic-checkbox {
     display: flex;
     align-items: center;
-    margin-bottom: 0.3rem; 
+    margin-bottom: 0.5rem;
 
     & > label {
-      padding: 0.4rem 0.8rem; 
+      padding: 0.4rem 0.8rem;
       background-color: transparent;
       border-radius: 5rem;
       cursor: pointer;
       margin-right: 0.5rem;
 
       &:hover {
-        background-color: var.$secondary;
-        color: var.$altPrimary;
+        background-color: #6b93c3;
+        color: #fff;
       }
     }
 
@@ -47,49 +50,53 @@
       display: none;
 
       &:checked + label {
-        background-color: var.$secondary;
-        color: var.$altPrimary;
+        background-color: #6b93c3;
+        color: #fff;
       }
     }
   }
 
   .submit-button,
   .cancel-button {
-    background-color: var.$secondary;
-    color: var.$altPrimary;
-    border-radius: 5rem;
-    padding: 0.8rem 1.5rem; 
+    background-color: #6b93c3;
+    color: #fff;
+    border-radius: 0.5rem;
+    padding: 0.8rem 1.5rem;
     border: none;
     cursor: pointer;
-    width: calc(50% - 0.8rem); 
-    margin-top: 0.8rem;
-    margin-right: 0.8rem; 
+    width: calc(50% - 0.8rem);
+    margin-top: 1rem;
+    margin-right: 0.8rem;
+    font-size: 16px;
 
     &:last-child {
       margin-right: 0;
     }
 
     &:hover {
-      background-color: darken(var.$secondary, 10%);
+      background-color: #5582b3;
     }
   }
 
   .success-message {
-    color: green;
-    font-size: 0.9rem; 
-    margin-top: 0.8rem;
+    color: #3c763d;
+    font-size: 0.9rem;
+    margin-top: 1rem;
     width: 100%;
+    background-color: #dff0d8;
+    padding: 0.8rem;
+    border-radius: 0.5rem;
   }
 }
 
 @media (max-width: var.$tablet) {
   .alert-sign-up {
-    width: 80%; 
-    margin-top: 3rem; 
-    
+    width: 80%;
+    margin-top: 3rem;
+
     .submit-button,
     .cancel-button {
-      width: calc(50% - 0.8rem); 
+      width: calc(50% - 0.8rem);
     }
   }
 }
\ No newline at end of file
diff --git a/packages/web/components/Card/BetaCard.tsx b/packages/web/components/Card/BetaCard.tsx
index 52a7e73..c1c0c40 100644
--- a/packages/web/components/Card/BetaCard.tsx
+++ b/packages/web/components/Card/BetaCard.tsx
@@ -123,8 +123,10 @@ const BetaCard = ({ card }: { card: ICard }) => {
       </div>
 
       {/* Combined Card Responses */}
-      <div className="mb-4 whitespace-pre-wrap font-sans">{combinedResponses}</div>
-      
+      <div className="mb-4 whitespace-pre-wrap font-sans">
+        {combinedResponses}
+      </div>
+
       <div>
         {isYouTubeURL(thumbnail?.source_url) && (
           <iframe
diff --git a/packages/web/components/HomeBanner/NewQuery.tsx b/packages/web/components/HomeBanner/NewQuery.tsx
index 8c83914..ede1dd2 100644
--- a/packages/web/components/HomeBanner/NewQuery.tsx
+++ b/packages/web/components/HomeBanner/NewQuery.tsx
@@ -201,8 +201,8 @@ export default function NewQuery() {
         ) : (
           <button
             className={`w-full rounded-lg md:w-1/2 ${
-              isProcessing ? "cursor-wait bg-primary" : "bg-primary"
-            } p-2 text-2xl text-blue`}
+              isProcessing ? "cursor-wait bg-[#6b93c3]" : "bg-[#6b93c3]"
+            } p-2 text-2xl text-white`}
             onClick={() => scrollToQuery()}
             type="submit"
             disabled={isProcessing}
diff --git a/packages/web/components/HomeResults/QueryResult.tsx b/packages/web/components/HomeResults/QueryResult.tsx
index 1636af5..19864ad 100644
--- a/packages/web/components/HomeResults/QueryResult.tsx
+++ b/packages/web/components/HomeResults/QueryResult.tsx
@@ -45,7 +45,7 @@ export default function QueryResult({ card }: { card: ICard }) {
   const [msgIndex, setMsgIndex] = useState<number>(0);
   const initialLoadingState = !card.responses || card.responses.length === 0;
   const [isLoading, setIsLoading] = useState<boolean>(initialLoadingState);
-  
+
   const [responses, setResponses] = useState<{ response: string }[]>([]);
 
   const [prettyCreatedAt, setPrettyCreatedAt] = useState(
@@ -65,27 +65,29 @@ export default function QueryResult({ card }: { card: ICard }) {
     }
 
     const channel = (supabase.channel(`cards:id=eq.${card.id}`) as any)
-    .on(
-      "postgres_changes",
-      { event: "UPDATE", schema: "public" },
-      (payload: { new: { id: string; responses: { response: string }[] } }) => {
-        console.log("Payload received:", payload);
-        if (payload.new.id === card.id) {
-          const newResponses = payload.new.responses || [];
-          console.log("New Responses:", newResponses);
-
-          setResponses(newResponses);
-
-          if (newResponses.length > 0) {
-            setIsLoading(false);
-            if (intervalId) {
-              clearInterval(intervalId);
+      .on(
+        "postgres_changes",
+        { event: "UPDATE", schema: "public" },
+        (payload: {
+          new: { id: string; responses: { response: string }[] };
+        }) => {
+          console.log("Payload received:", payload);
+          if (payload.new.id === card.id) {
+            const newResponses = payload.new.responses || [];
+            console.log("New Responses:", newResponses);
+
+            setResponses(newResponses);
+
+            if (newResponses.length > 0) {
+              setIsLoading(false);
+              if (intervalId) {
+                clearInterval(intervalId);
+              }
             }
           }
         }
-      }
-    )
-    .subscribe();
+      )
+      .subscribe();
 
     return () => {
       channel.unsubscribe();
@@ -111,14 +113,14 @@ export default function QueryResult({ card }: { card: ICard }) {
             </span>
             <span className="text-black">{prettyCreatedAt}</span>
           </h6>
-  
+
           {!isLoading ? (
             <>
               {/* Response Preview */}
               <div className="my-5 overflow-hidden" style={{ height: "4.5em" }}>
                 <p>{previewText}...</p>
               </div>
-  
+
               {/* YouTube Preview */}
               {isYouTubeURL(thumbnail?.source_url) && (
                 <iframe
@@ -155,4 +157,4 @@ export default function QueryResult({ card }: { card: ICard }) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}