Improve styling for reviews on full card

src/components/posts/ReviewPurchasedResource.tsx

@@ -92,6 +92,7 @@ export const ReviewPurchasedResource: Component<Props> = (props) => {
     const [showReviewForm, setShowReviewForm] = createSignal(true);
     const [dbReviewNum, setDbReviewNum] = createSignal<number>(0);
     const [showReviewFieldAlert, setShowReviewFieldAlert] = createSignal(false);
+    const [showTitleAlert, setShowTitleAlert] = createSignal(false);
 
     onMount(async () => {
         try {
@@ -143,6 +144,16 @@ export const ReviewPurchasedResource: Component<Props> = (props) => {
             return false;
         }
 
+        if (reviewText() !== "" && reviewTitle() === "") {
+            setShowTitleAlert(true);
+
+            setTimeout(() => {
+                setShowTitleAlert(false);
+            }, 3000);
+
+            return false;
+        }
+
         const formData = new FormData(e.target as HTMLFormElement);
         formData.append("review_title", reviewTitle());
         formData.append("review_text", reviewText());
@@ -456,6 +467,14 @@ export const ReviewPurchasedResource: Component<Props> = (props) => {
                                         </p>
                                     </Show>
 
+                                    <Show when={showTitleAlert() === true}>
+                                        <p class="text-lg text-alert1 dark:text-alert1-DM">
+                                            {t(
+                                                "messages.titleRequiredIfTextEntered"
+                                            )}
+                                        </p>
+                                    </Show>
+
                                     <div>
                                         <span class="text-alert1">* </span>
                                         <span class="italic">

src/components/posts/ViewPostReviews.tsx

@@ -50,7 +50,7 @@ export const ViewPostReviews: Component<Props> = (props) => {
             >
                 <div>
                     {reviewsArray()?.map((review) => (
-                        <div class="one-review">
+                        <div class="one-review border border-x-0 border-t-0 border-border1 border-opacity-25 pb-2 dark:border-border1-DM">
                             <div class="flex h-8 items-center">
                                 {/* <p>{ review.overall_rating }</p> */}
                                 <div class="mr-2 flex items-center">

src/i18n/UI/English.ts

@@ -231,7 +231,8 @@ export const English = {
     resourceLinks: "Thanks for using LearnGrove! Here are your links:",
     externalResourceDisclaimer: "LearnGrove provides links to these external resources as a convenience. LearnGrove is not responsible for and has no control over information at any external site. LearnGrove is not responsible for the quality, content, privacy, or reliability of any linked site. In no event shall LearnGrove be responsible for your use of a linked site. Many of these external sites are funded through advertising which may make use of cookies and other tracking technology to target your interests for that advertising. Please be careful when clicking on any links on an external site to ensure you are only accessing links you intend to.",
     submitted: "Submitted",
-    overallReviewRequired: "Please include an overall rating for your review"
+    overallReviewRequired: "Please include an overall rating for your review",
+    titleRequiredIfTextEntered: "Please include a title for your review if you enter a review description",
   },
 
   formLabels: {

src/i18n/UI/French.ts

@@ -233,6 +233,7 @@ export const French = {
     externalResourceDisclaimer: "LearnGrove fournit des liens vers ces ressources externes pour plus de commodité. LearnGrove n'est pas responsable et n'a aucun contrôle sur les informations contenues dans aucun site externe. LearnGrove n'est pas responsable de la qualité, du contenu, de la confidentialité ou de la fiabilité de tout site lié. En aucun cas LearnGrove ne sera responsable de votre utilisation d’un site lié. Beaucoup de ces sites externes sont financés par la publicité qui peut utiliser des cookies et d'autres technologies de suivi pour cibler vos intérêts pour cette publicité. Veuillez être prudent lorsque vous cliquez sur des liens sur un site externe pour vous assurer que vous accédez uniquement aux liens auxquels vous avez l'intention d'accéder.",
     submitted: "Soumise",
     overallReviewRequired: "Veuillez inclure une note globale pour votre avis",
+    titleRequiredIfTextEntered: "Veuillez inclure un titre pour votre avis si vous saisissez une description d'avis",
   },
 
   formLabels: {

src/i18n/UI/Spanish.ts

@@ -235,6 +235,7 @@ export const Spanish = {
     externalResourceDisclaimer: "LearnGrove proporciona enlaces a estos recursos externos para su comodidad. LearnGrove no es responsable ni tiene control sobre la información contenida en ningún sitio externo. LearnGrove no es responsable de la calidad, el contenido, la privacidad o la confiabilidad de ningún sitio vinculado. En ningún caso LearnGrove será responsable del uso que usted haga de un sitio vinculado. Muchos de estos sitios externos se financian a través de publicidad que puede utilizar cookies y otras tecnologías de seguimiento para orientar sus intereses para esa publicidad. Tenga cuidado al hacer clic en cualquier enlace de un sitio externo para asegurarse de acceder solo a los enlaces que desea.",
     submitted: "Enviada",
     overallReviewRequired: "Incluya una calificación general para su revisión",
+    titleRequiredIfTextEntered: "Incluya un título para su reseña si ingresa una descripción de la reseña",
   },
 
   formLabels: {

src/i18n/uiType.ts

@@ -223,6 +223,7 @@ export interface uiObject {
         externalResourceDisclaimer: string;
         submitted: string,
         overallReviewRequired: string,
+        titleRequiredIfTextEntered: string,
     };
 
     formLabels: {