Some notify popup tweaks

- Added back the border on the notification button.
- Removed border on the notification popup close button.
- Made entire popup clickable instead of just the text.
- Changed cursor style to as a hint that it's clickable.
- Renamed selectors to be called notify.

webroot/js/components/notification.js

@@ -346,7 +346,8 @@ export function NotifyButton({ serverName, onClick }) {
     setShowPopup(false);
   };
 
-  const notifyPopupDismissedClicked = () => {
+  const notifyPopupDismissedClicked = (e) => {
+    e.stopPropagation();
     setShowPopup(false);
     setLocalStorage(USER_DISMISSED_ANNOYING_NOTIFICATION_POPUP_KEY, true);
   };
@@ -354,9 +355,10 @@ export function NotifyButton({ serverName, onClick }) {
   return html`
     <span id="notify-button-container" class="relative">
       <div
-        id="follow-button-popup"
-        class="text-gray-200 p-4 rounded-md"
+        id="notify-button-popup"
+        class="text-gray-200 p-4 rounded-md cursor-pointer"
         style=${{ display: showPopup ? 'block' : 'none' }}
+        onClick=${buttonClicked}
       >
         <div class="flex justify-between items-center mb-2">
           <div class="font-bold">Stay updated!</div>
@@ -379,9 +381,7 @@ export function NotifyButton({ serverName, onClick }) {
             </svg>
           </button>
         </div>
-        <button onClick=${buttonClicked} class="text-left hover:underline">
         <div>Click and never miss future streams!</div>
-        </button>
       </div>
       <${ExternalActionButton}
         onClick=${buttonClicked}

webroot/styles/app.css

@@ -270,10 +270,10 @@ header {
 .single-col #external-actions-container {
   justify-content: flex-start;
 }
-.single-col #follow-button-popup {
+.single-col #notify-button-popup {
   left: 0px;
 }
-.single-col #follow-button-popup::before {
+.single-col #notify-button-popup::before {
   left: 24px;
   right: auto;
 }
@@ -569,7 +569,7 @@ header {
   }
 }
 
-#notify-button-container #follow-button-popup {
+#notify-button-container #notify-button-popup {
   position: absolute;
   background-color: var(--owncast-purple);
   z-index: 1;
@@ -596,12 +596,12 @@ header {
   margin: 0.25em 0.5em 0.25em 0.5em;
 }
 
-/* #notify-button-container button { */
-/*   border-color: #b8bbc2; */
-/*   border-width: 1px; */
-/* } */
+#notify-button-container button {
+  border-color: #b8bbc2;
+  border-width: 1px;
+}
 
-#follow-button-popup::before {
+#notify-button-popup::before {
   position: absolute;
   z-index: -1;
   content: "";
@@ -614,7 +614,7 @@ header {
   transition-property: transform;
 }
 
-#follow-button-popup .popout-close-button {
-  background-color: #fdf9f91c;
+#notify-button-popup .popout-close-button {
+  border-style: none;
 }