Follow popup clickable (#1839)

* Made follow popup clickable

* Fixed follow-poput styling

* had commented out visits check

webroot/js/components/notification.js

@@ -355,46 +355,28 @@ export function NotifyButton({ serverName, onClick }) {
     <span id="notify-button-container" class="relative">
       <div
         id="follow-button-popup"
+        class="text-gray-200 p-4 rounded-md"
         style=${{ display: showPopup ? 'block' : 'none' }}
+
       >
-        <svg
+      <div class="flex justify-between items-center mb-2">
-          width="192"
+        <div class="font-bold">Stay updated!</div>
-          height="113"
-          viewBox="0 0 192 113"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 0C3.58172 0 0 3.58172 0 8V91C0 95.4183 3.58173 99 8 99H172L188.775 112.001C190.089 113.019 192 112.082 192 110.42V99V8C192 3.58172 188.418 0 184 0H8Z"
-            fill="#6965F0"
-          />
-          <text x="20" y="55" fill="white" font-size="13px">
-            Click and never miss
-          </text>
-          <text x="20" y="75" fill="white" font-size="13px">
-            future streams.
-          </text>
-        </svg>
         <button
-          class="absolute"
+          class="popout-close-button rounded-md p-1 color-gray-500"
-          style=${{ top: '6px', right: '6px' }}
           onClick=${notifyPopupDismissedClicked}
         >
-          <svg
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            width="24"
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
-            height="24"
+            </path>
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M17.7071 7.70711C18.0976 7.31658 18.0976 6.68342 17.7071 6.29289C17.3166 5.90237 16.6834 5.90237 16.2929 6.29289L12 10.5858L7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L10.5858 12L6.29289 16.2929C5.90237 16.6834 5.90237 17.3166 6.29289 17.7071C6.68342 18.0976 7.31658 18.0976 7.70711 17.7071L12 13.4142L16.2929 17.7071C16.6834 18.0976 17.3166 18.0976 17.7071 17.7071C18.0976 17.3166 18.0976 16.6834 17.7071 16.2929L13.4142 12L17.7071 7.70711Z"
-              fill="#A5A3F6"
-            />
           </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,6 +270,13 @@ header {
 .single-col #external-actions-container {
   justify-content: flex-start;
 }
+.single-col #follow-button-popup {
+  left: 0px;
+}
+.single-col #follow-button-popup::before {
+  left: 24px;
+  right: auto;
+}
 
 @media screen and (max-height: 500px) {
   .single-col.touch-screen:not(.touch-keyboard-active) {
@@ -564,16 +571,50 @@ header {
 
 #notify-button-container #follow-button-popup {
   position: absolute;
+  background-color: var(--owncast-purple);
   z-index: 1;
-  right: 30px;
+  right: 0px;
-  bottom: 42px;
+  min-width: 14rem;
+  bottom: calc(100% + .5rem);
+  opacity: 0;
+  transform: translateY(0%);
+  animation: fade-in 300ms forwards;
+  animation-delay: 1s;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20%);
+  } to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 #notify-button-container .external-action-icon {
   margin: 0.25em 0.5em 0.25em 0.5em;
 }
 
-#notify-button-container button {
+/* #notify-button-container button { */
-  border-color: #b8bbc2;
+/*   border-color: #b8bbc2; */
-  border-width: 1px;
+/*   border-width: 1px; */
+/* } */
+
+#follow-button-popup::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  right: 1.5rem;
+  top: 100%;
+  border-style: solid;
+  border-width: .5rem .5rem .0rem;
+  border-color: var(--owncast-purple) transparent transparent;
+  transition-duration: 0.3s;
+  transition-property: transform;
 }
+
+#follow-button-popup .popout-close-button {
+  background-color: #fdf9f91c;
+}
+