Merge pull request #174 from makeopensource/119-webhooks-styling

119 webhooks styling
makeopensource · Nov 5, 2024 · f26a37e · f26a37e
2 parents 5d48a67 + 5de5dab
commit f26a37e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git 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
@@ -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;
 }
diff --git a/devU-client/src/components/pages/webhookURLForm.tsx b/devU-client/src/components/pages/webhookURLForm.tsx
@@ -25,22 +25,21 @@ const webhookURLForm = () => {
 
     const handleAddURL = () => {
         if (webhookURL) {
-            setWebhookUrls([...webhookUrls, webhookURL])
             //Handle adding webhook URL to backend here
             RequestService.post(`/course/${courseId}/webhooks`, {
               "destinationUrl": webhookURL,
               "matcherUrl": watcherUrl
             }).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,19 +51,22 @@ 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 }}
                      className={styles.textField}></TextField>
           <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>
     )
 }