Fixed #8

globals.php

@@ -80,3 +80,13 @@ function get_source_set($user, int $base_size, int $max_scale = 3): string
   }
   return implode(', ', $srcset_entries);
 }
+
+function make_banner(string $type, string $content): string
+{
+  return '<div class="banner-wrapper">'
+  . ' <div class="'
+  . $type
+  . ' banner"><span>✓</span>'
+  . $content
+  . '</div></div>';
+}

scripts/poll.js

@@ -3,7 +3,7 @@ window.addEventListener('DOMContentLoaded', () => {
   for (const el of document.querySelectorAll('.option input[type=checkbox], .option input[type=radio]')) {
     el.onclick = updateVotesRemaining;
   }
-  const banner = document.querySelector('.success-banner');
+  const banner = document.querySelector('.banner');
   if (banner) {
     banner.onclick = hideBanner;
   }

styles/style.css

@@ -7,7 +7,8 @@
   --disabled-color: gray;
   --green: green;
   --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
-  --error-color: rgba(255, 0, 0, 0.3);
+  --error-color-translucent: rgba(255, 0, 0, 0.3);
+  --error-color: rgba(255, 0, 0);
 }
 @supports (color: color(display-p3 1 1 1)) {
   :root {
@@ -161,14 +162,20 @@ datewrapper time {
   box-sizing: border-box;
 }
 
-.success-banner {
+.banner {
-  background-color: var(--green);
   padding: 8px;
   display: inline-block;
   margin-bottom: 8px;
   box-shadow: var(--default-shadow);
 }
 
+.banner.success {
+  background-color: var(--green);
+}
+.banner.error {
+  background-color: var(--error-color);
+}
+
 .banner-wrapper.hiding {
   transform: translateX(-200%);
 }
@@ -240,7 +247,7 @@ datewrapper time {
 .create-poll .error {
   grid-column: 1/3;
   grid-row: 7;
-  background-color: var(--error-color);
+  background-color: var(--error-color-translucent);
 }
 .create-poll .error:not(:empty) {
   margin: 8px;

view_poll.php

@@ -62,14 +62,10 @@ $data_can_vote = $poll->canVote() ? 'true' : 'false';
 $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
 
 if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
-  <div class="banner-wrapper">
+<?= make_banner('success', 'Your vote has been saved, thank you!') ?>
-    <div class="success-banner"><span>✓</span> Your vote has been saved, thank you!</div>
-  </div>
 <?php }
 if (array_key_exists('poll_created', $_GET) && $_GET['poll_created'] == 1) { ?>
-  <div class="banner-wrapper">
+  <?= make_banner('success', 'Your poll and post have been created, thank you!') ?>
-    <div class="success-banner"><span>✓</span> Your poll and post have been created, thank you!</div>
-  </div>
 <?php } ?>
 <div class="poll">
   <div class="header">