From 5de5dab61cfe381b0ac6f5f6c6f1fe41cd0adef5 Mon Sep 17 00:00:00 2001
From: Kevin Zhong <kevinzhong930@gmail.com>
Date: Tue, 5 Nov 2024 03:51:29 -0500
Subject: [PATCH] Updated the styling of the webhooks form

Updated the styling of the webhooks form
---
 .../pages/courses/courseDetailPage.tsx        |  8 +++++
 .../src/components/pages/webhookURLForm.scss  | 36 +++++++++++++++++++
 .../src/components/pages/webhookURLForm.tsx   | 20 ++++++-----
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index a7072c7..3802b67 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -126,6 +126,14 @@ const CourseDetailPage = () => {
                                 }}>Update Course Form
                                 </button>
                                     )}
+                                
+                                {role.isInstructor() &&(
+                                    <button className={styles.actual_button} onClick={() => {
+                                        history.push(`/course/${courseId}/webhooks`)
+                                    }}>
+                                    Add Webhooks
+                                    </button>
+                                )}
 
 
                                 <button className={styles.actual_button} onClick={handleDropCourse}
diff --git a/devU-client/src/components/pages/webhookURLForm.scss b/devU-client/src/components/pages/webhookURLForm.scss
index 25c022e..b0b7f5e 100644
--- a/devU-client/src/components/pages/webhookURLForm.scss
+++ b/devU-client/src/components/pages/webhookURLForm.scss
@@ -2,4 +2,40 @@
 
 .textField {
     align-items: center;
+}
+
+.formBackground {
+    background-color: $list-item-background;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.webhookURLContainer {
+    display: flex;
+    flex-direction: column;
+    padding: 30px;
+    // width: 100%; 
+    margin-top: 20px;
+}
+
+.webhookURLCard {
+    display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+    background-color: $list-item-background;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease; 
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.webhookURLCard:hover {
+    transform: scale(1.02); 
+}
+
+.webhookURLHeading {
+    color: $text-color;
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/devU-client/src/components/pages/webhookURLForm.tsx b/devU-client/src/components/pages/webhookURLForm.tsx
index 8b979cc..b8f0fb2 100644
--- a/devU-client/src/components/pages/webhookURLForm.tsx
+++ b/devU-client/src/components/pages/webhookURLForm.tsx
@@ -25,7 +25,6 @@ const webhookURLForm = () => {
 
     const handleAddURL = () => {
         if (webhookURL) {
-            setWebhookUrls([...webhookUrls, webhookURL])
             //Handle adding webhook URL to backend here
             RequestService.post(`/course/${courseId}/webhooks`, {
               "destinationUrl": webhookURL,
@@ -33,14 +32,14 @@ const webhookURLForm = () => {
             }).then(
               _ => {
                 setAlert({ autoDelete: true, type: 'success', message: 'Added webhook' })
+                setWebhookUrls([...webhookUrls, webhookURL])
+                // clear field
+                setWebhookURL('')
+                setWatcherUrl('')
               }
             ).catch(reason => {
                 setAlert({ autoDelete: true, type: 'error', message: `Failed to add webhook ${reason.toString()}` })
             })
-
-           // clear field
-            setWebhookURL('')
-            setWatcherUrl('')
         }
     }
 
@@ -52,7 +51,7 @@ const webhookURLForm = () => {
           justifyContent: 'center',
           alignItems: 'center',
           marginTop: '30px'
-        }}>
+        }} className = {styles.formBackground}>
           <TextField id="webhookURL" label={'Webhook URL'} onChange={handleUrlChange} sx={{ width: 1 / 2 }}
                      className={styles.textField}></TextField>
           <TextField id="matcherUrl" label={'Match URL'} helpText={"Url to watch for when sending the webhook "} onChange={handleWatcherUrl} sx={{ width: 1 / 2 }}
@@ -60,11 +59,14 @@ const webhookURLForm = () => {
           <Button onClick={handleAddURL}>Add Webhook URL</Button>
         </div>
 
-        <ul>
+        <div className={styles.webhookURLContainer}>
           {webhookUrls.map((url, index) => (
-            <li key={index}>{url}</li>
+            // <li key={index}>{url}</li>
+            <div className={styles.webhookURLCard} key={index}>
+                <div className={styles.webhookURLHeading}>{url}</div>
+            </div>
           ))}
-        </ul>
+        </div>
       </PageWrapper>
     )
 }