newsletter / events sidebar integration with images

frontend/src/components/EventSidebar.module.css

@@ -167,33 +167,23 @@
 }
 
 .textField {
-  width: 454px;
+  width: 33vw;
 }
 
 .textFieldSmall {
-  width: 240px;
+  width: 33vw;
 }
 
 .textFieldSmallest {
   width: 100px;
 }
 
 .textArea {
-  width: 454px;
-  height: 80px;
-  padding: 11px;
-  border: 1px solid #d8d8d8;
-  border-radius: 4px;
-  font-size: 14px;
+  width: 33vw;
 }
 
 .textAreaLong {
-  width: 454px;
-  height: 120px;
-  padding: 10px;
-  border: 1px solid #d8d8d8;
-  border-radius: 4px;
-  font-size: 14px;
+  width: 33vw;
 }
 
 .textAreaContent {

frontend/src/components/EventSidebar.tsx

@@ -13,6 +13,7 @@ import { TextFieldCharLimit } from "./TextFieldCharLimit";
 import AlertBanner from "@/components/AlertBanner";
 import { TextField } from "@/components/TextField";
 import { WarningModule } from "@/components/WarningModule";
+import { TextArea } from "./TextArea";
 
 type eventSidebarProps = {
   eventDetails: null | EventDetails;
@@ -247,24 +248,26 @@ const EventSidebar = ({
           <h2>Image</h2>
           <p>Placeholder - to be replaced with image</p>
 
-          {/* Delete button */}
-          <div className={styles.deleteButtonWrapper}>
-            <button onClick={handleDelete} className={styles.deleteButton}>
-              <p>Delete</p>
-            </button>
-          </div>
-          <div className={styles.fixedPosition}>
-            <div className={styles.grayOut}></div>
-            <WarningModule
-              titleText="Are you sure you want to delete this event?"
-              subtitleText="This action is permanent and cannot be undone."
-              cancelText="No, cancel"
-              actionText="Delete event"
-              cancel={confirmCancel}
-              action={confirmDelete}
-              onClose={confirmCancel}
-            />
-          </div>
+          <WarningModule
+            titleText="Are you sure you want to delete this event?"
+            subtitleText="This action is permanent and cannot be undone."
+            cancelText="No, cancel"
+            actionText="Delete Event"
+            cancel={confirmCancel}
+            action={handleDelete}
+          >
+            <div className={styles.deleteButtonWrapper}>
+              <button
+                onClick={() => {
+                  setIsDeleting(true);
+                }}
+                className={styles.deleteButton}
+              >
+                <p>Delete</p>
+              </button>
+            </div>
+          </WarningModule>
+          <div className={styles.grayOut}></div>
         </div>
       </div>
     );
@@ -273,23 +276,29 @@ const EventSidebar = ({
   if (isEditing) {
     return (
       <div className={styles.sidebar}>
-        <div
-          className={styles.closeWindow}
-          onClick={() => {
-            handleCloseSidebar();
+        <WarningModule
+          titleText="You have unsaved changes!"
+          subtitleText="Do you want to save the changes you made to this event?"
+          cancelText="Discard changes"
+          actionText="Save changes"
+          cancel={confirmCancel}
+          action={() => {
+            void handleSave();
           }}
         >
-          <Image src="/ic_doublecaretright.svg" alt="test" width={24} height={24} />
-          <p>Close Window</p>
-        </div>
+          <div className={styles.closeWindow}>
+            <Image src="/ic_doublecaretright.svg" alt="test" width={24} height={24} />
+            <p>Close Window</p>
+          </div>
+        </WarningModule>
         <div className={styles.sidebarContents}>
           <div className={styles.header}>
             <h1>Event Details</h1>
           </div>
           <form>
             <div className={styles.formRow}>
               <TextFieldCharLimit
-                className={styles.textField}
+                className={`${styles.textField} ${styles.stretch}`}
                 label="Event Title"
                 placeholder="Event Title"
                 value={name}
@@ -299,26 +308,28 @@ const EventSidebar = ({
                 error={errors.name}
                 maxCount={35}
               />
-              <h2>Event Description (short)</h2>
               <TextAreaCharLimit
+                label="Event Description (short)"
                 id="description_short"
                 className={`${styles.textArea} ${styles.stretch}`}
                 placeholder="This is a short description of your event that will be displayed on the event page."
                 value={description_short}
                 onChange={(event) => {
                   setDescription_short(event.target.value);
                 }}
+                error={errors.description_short}
                 maxCount={200}
               />
-              <h2>Event Description (long)</h2>
               <TextAreaCharLimit
+                label="Event Description (long)"
                 id="description"
                 className={`${styles.textAreaLong} ${styles.stretch}`}
                 placeholder="This is a long description of your event that will be displayed on the event page."
                 value={description}
                 onChange={(event) => {
                   setDescription(event.target.value);
                 }}
+                error={errors.description}
                 maxCount={275}
               />
               <div className={styles.textField}>
@@ -354,6 +365,7 @@ const EventSidebar = ({
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                       setStartTime(event.target.value);
                     }}
+                    error={errors.startTime}
                   />
                 </div>
                 <p
@@ -376,6 +388,7 @@ const EventSidebar = ({
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                       setEndTime(event.target.value);
                     }}
+                    error={errors.endTime}
                   />
                 </div>
               </div>
@@ -389,56 +402,49 @@ const EventSidebar = ({
                 }}
                 error={errors.location}
               />
-              <h2>Guidelines</h2>
-              <textarea
+              <TextArea
+                label="Guidelines"
                 id="guidelines"
                 className={`${styles.textArea} ${styles.stretch}`}
                 placeholder="This is a description of your event guidelines (dress codes, materials, qualifications, etc.)"
                 value={guidelines}
                 onChange={(event) => {
                   setGuidelines(event.target.value);
                 }}
+                error={errors.guidelines}
               />
-              <h2>Image</h2>
-              <p>Placeholder - to be replaced with image</p>
             </div>
           </form>
         </div>
-        <div className={styles.bottomButtons}>
-          {/* Cancel button */}
-          <button onClick={handleCancel} className={styles.cancelButton}>
-            <p>Cancel</p>
-          </button>
-          {/* Save button */}
-          <button
-            onClick={() => {
-              void handleSave();
-            }}
-            className={styles.saveButton}
-          >
-            <p>Save</p>
-          </button>
-        </div>
-        {warningOpen && (
-          <div className={styles.fixedPosition}>
-            <div className={styles.grayOut}></div>
-            <div className={styles.warningModule}>
-              <WarningModule
-                titleText="You have unsaved changes!"
-                subtitleText="Do you want to save the changes you made to this event?"
-                cancelText="Discard changes"
-                actionText="Save changes"
-                cancel={confirmCancel}
-                action={() => {
-                  void handleSave();
-                }}
-                onClose={() => {
-                  setWarningOpen(false);
-                }}
-              />
-            </div>
+
+        <div className="w-full">
+          <div className={styles.bottomButtons}>
+            {/* Cancel button */}
+            <WarningModule
+              titleText="You have unsaved changes!"
+              subtitleText="Do you want to save the changes you made to this event?"
+              cancelText="Discard changes"
+              actionText="Save changes"
+              cancel={confirmCancel}
+              action={handleSave}
+            >
+              <div
+                className={`${styles.cancelButton} flex py-[4px] px-[16px] justify-center items-center gap-[6px] rounded-md`}
+              >
+                <p className="text-[20px] font-bold leading-normal tracking-[0.7px]">Cancel</p>
+              </div>
+            </WarningModule>
+            {/* Save button */}
+            <button
+              onClick={() => {
+                void handleSave();
+              }}
+              className={styles.saveButton}
+            >
+              <p>Save</p>
+            </button>
           </div>
-        )}
+        </div>
       </div>
     );
   } else {

frontend/src/components/NewsletterSidebar.module.css

@@ -132,8 +132,6 @@
   gap: 24px;
   justify-content: flex-end;
   width: 33vw;
-  /* margin-right: 60px; */
-  /* margin-bottom: 77px; */
 }
 
 .deleteButtonWrapper {
@@ -163,13 +161,8 @@
 .textField {
   width: 33vw;
 }
-
 .textArea {
   width: 33vw;
-  height: 288px;
-  padding: 12px;
-  border: 1px solid #d8d8d8;
-  border-radius: 4px;
 }
 
 .content {

frontend/src/components/NewsletterSidebar.tsx

@@ -11,6 +11,7 @@ import { WarningModule } from "./WarningModule";
 import SimpleImageDropzone from "./admin/storage/SimpleImageDropzone";
 
 import { deleteFile } from "@/app/admin/util/pageeditUtil";
+import { TextArea } from "./TextArea";
 
 type newsletterSidebarProps = {
   newsletter: null | Newsletter;
@@ -223,7 +224,7 @@ const NewsletterSidebar = ({
       <div className={styles.sidebar}>
         <WarningModule
           titleText="You have unsaved changes!"
-          subtitleText="Do you want to save the changes you made to this event?"
+          subtitleText="Do you want to save the changes you made to this newsletter?"
           cancelText="Discard changes"
           actionText="Save changes"
           cancel={confirmCancel}
@@ -277,16 +278,17 @@ const NewsletterSidebar = ({
                 onDelete={onImageDelete}
                 onUpload={onImageUpload}
               />
-              {/* <p>Placeholder - to be replaced with image</p> */}
-              <h2>Newsletter Content</h2>
-              <textarea
+
+              <TextArea
+                label="Newsletter Content"
                 id="textarea"
                 className={`${styles.textArea} ${styles.stretch}`}
                 value={content}
                 onChange={(event) => {
                   console.log("onChange");
                   setContent(event.target.value);
                 }}
+                error={errors.content}
               />
             </div>
           </form>
@@ -296,7 +298,7 @@ const NewsletterSidebar = ({
             {/* Cancel button */}
             <WarningModule
               titleText="You have unsaved changes!"
-              subtitleText="Do you want to save the changes you made to this event?"
+              subtitleText="Do you want to save the changes you made to this newsletter?"
               cancelText="Discard changes"
               actionText="Save changes"
               cancel={confirmCancel}
@@ -309,7 +311,12 @@ const NewsletterSidebar = ({
               </div>
             </WarningModule>
             {/* Save button */}
-            <button onClick={handleSave} className={styles.saveButton}>
+            <button
+              onClick={() => {
+                void handleSave();
+              }}
+              className={styles.saveButton}
+            >
               <p>Save</p>
             </button>
           </div>

frontend/src/components/TextArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import styles from "./TextField.module.css";
+
+export type TextAreaProps = {
+  label: string;
+  error?: boolean;
+} & Omit<React.ComponentProps<"textarea">, "type">;
+
+export const TextArea = function ({
+  label,
+  error = false,
+  className,
+  placeholder,
+  ...props
+}: TextAreaProps) {
+  let wrapperClass = styles.wrapper;
+  if (className) {
+    wrapperClass += ` ${className}`;
+  }
+  let inputClass = styles.input;
+  if (error) {
+    inputClass += ` ${styles.error}`;
+  }
+  return (
+    <div className={wrapperClass}>
+      <label className={styles.label}>
+        <p>{label}</p>
+        <textarea className={inputClass} {...props} placeholder={placeholder} />
+      </label>
+    </div>
+  );
+};