From 8e6b0d3687eee2850115b14cb3eca77eda3c5c47 Mon Sep 17 00:00:00 2001
From: aymm <max.nuding@icloud.com>
Date: Sat, 17 Apr 2021 13:39:45 +0200
Subject: [PATCH] Fixed #8

---
 globals.php      | 10 ++++++++++
 scripts/poll.js  |  2 +-
 styles/style.css | 15 +++++++++++----
 view_poll.php    |  8 ++------
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/globals.php b/globals.php
index 62713f1..22740c1 100644
--- a/globals.php
+++ b/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>';
+}
diff --git a/scripts/poll.js b/scripts/poll.js
index 5d6ea6c..ab85618 100644
--- a/scripts/poll.js
+++ b/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;
   }
diff --git a/styles/style.css b/styles/style.css
index fe12d26..4fa775c 100644
--- a/styles/style.css
+++ b/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 {
-  background-color: var(--green);
+.banner {
   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;
diff --git a/view_poll.php b/view_poll.php
index ac1716a..dbaa1a1 100644
--- a/view_poll.php
+++ b/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">
-    <div class="success-banner"><span>✓</span> Your vote has been saved, thank you!</div>
-  </div>
+<?= make_banner('success', 'Your vote has been saved, thank you!') ?>
 <?php }
 if (array_key_exists('poll_created', $_GET) && $_GET['poll_created'] == 1) { ?>
-  <div class="banner-wrapper">
-    <div class="success-banner"><span>✓</span> Your poll and post have been created, thank you!</div>
-  </div>
+  <?= make_banner('success', 'Your poll and post have been created, thank you!') ?>
 <?php } ?>
 <div class="poll">
   <div class="header">