From b990e9c34f206f02e50e473ea44b2dcf1d4c8755 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Sun, 25 Aug 2024 02:23:52 -0700
Subject: [PATCH] Added the ability to configure the notification radius (#182)

---
 options.ts                                          | 1 +
 scss/style/menus/notifications.scss                 | 6 +++---
 scss/style/notifications/popups.scss                | 4 ++--
 widget/settings/pages/config/notifications/index.ts | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/options.ts b/options.ts
index 365af8f..6450023 100644
--- a/options.ts
+++ b/options.ts
@@ -94,6 +94,7 @@ const options = mkOptions(OPTIONS, {
             },
             label: opt(colors.lavender),
             border: opt(secondary_colors.surface0),
+            border_radius: opt("0.6em"),
             time: opt(secondary_colors.overlay1),
             text: opt(colors.text),
             labelicon: opt(colors.lavender),
diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss
index e40554e..307f44b 100644
--- a/scss/style/menus/notifications.scss
+++ b/scss/style/menus/notifications.scss
@@ -36,8 +36,8 @@
     font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
     border: 0.15em solid $notification-border;
     border-radius: 0em;
-    border-bottom-left-radius: 0.4em;
-    border-top-left-radius: 0.4em;
+    border-bottom-left-radius: $notification-border_radius;
+    border-top-left-radius: $notification-border_radius;
     margin: 0em;
   }
 
@@ -125,7 +125,7 @@
   background: $notification-close_button-background;
   color: $notification-close_button-label;
   min-width: 2.1em;
-  border-radius: 0rem 0.35em 0.35em 0em;
+  border-radius: 0rem $notification-border_radius $notification-border_radius 0em;
 
   label {
     font-size: 1.5em;
diff --git a/scss/style/notifications/popups.scss b/scss/style/notifications/popups.scss
index 1a031ae..4391175 100644
--- a/scss/style/notifications/popups.scss
+++ b/scss/style/notifications/popups.scss
@@ -5,7 +5,7 @@
   border: 0.15em solid transparentize($notification-border, 0.5);
   min-width: 26em;
   min-height: 6rem;
-  border-radius: 0.6em;
+  border-radius: $notification-border_radius;
   opacity: $notification-opacity/100;
 }
 
@@ -95,7 +95,7 @@
   background: $notification-close_button-background;
   color: $notification-close_button-label;
   min-width: 2.1em;
-  border-radius: 0rem 0.35em 0.35em 0em;
+  border-radius: 0rem $notification-border_radius*0.7 $notification-border_radius*0.7 0em;
 
   label {
     font-size: 1.5em;
diff --git a/widget/settings/pages/config/notifications/index.ts b/widget/settings/pages/config/notifications/index.ts
index 12ddeeb..7d09f11 100644
--- a/widget/settings/pages/config/notifications/index.ts
+++ b/widget/settings/pages/config/notifications/index.ts
@@ -12,6 +12,7 @@ export const NotificationSettings = () => {
             children: [
                 Header('Notification Settings'),
                 Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
+                Option({ opt: options.theme.notification.border_radius, title: 'Border Radius', type: 'string' }),
                 Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
                 Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
                 Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),