From 0ad54aea2a504e46d97c738f246d9b8bf8a687c6 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 12 Jun 2024 16:41:09 +0100
Subject: [PATCH 1/3] adds icon for callouts

---
 css/components/callout.css | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/css/components/callout.css b/css/components/callout.css
index 53eba0c0..c2bfdfaf 100644
--- a/css/components/callout.css
+++ b/css/components/callout.css
@@ -2,13 +2,29 @@
   @file Base styles for call out paragraphs / advanced callout div container
 */
 .callout {
+  display: flex;
+  gap: var(--spacing);
   padding: 1.5rem;
-  text-align: center;
+  /* text-align: center; */
   color: var(--color-white);
   font-size: var(--font-size-large);
   font-weight: bold;
 }
 
+.callout::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 2.5rem;
+  padding: var(--spacing-small);
+  content: "!";
+  color: var(--color-black);
+  border-radius: 999rem;
+  background-color: var(--color-white);
+  font-size: 1.5rem;
+}
+
 .callout a {
   color: var(--color-white);
 }
@@ -26,26 +42,41 @@
 .callout-primary {
   background-color: var(--color-accent);
 }
+.callout-primary::before {
+  color: var(--color-accent);
+}
 
 /* Callout success bg and link colour */
 .callout-success {
   background-color: var(--color-success);
 }
+.callout-success::before {
+  color: var(--color-success);
+}
 
 /* Callout danger bg and link colour */
 .callout-danger {
   background-color: var(--color-danger);
 }
+.callout-danger::before {
+  color: var(--color-danger);
+}
 
 /* Callout teal bg and link colour */
 .callout-teal {
   background-color: teal;
 }
+.callout-teal::before {
+  color: teal;
+}
 
 /* Callout carbon bg and link colour */
 .callout-carbon {
   background-color: var(--color-grey-dark);
 }
+.callout-carbon::before {
+  color: var(--color-grey-dark);
+}
 
 /* Callout yellow bg and link colour */
 .callout-yellow,

From d306723fb0d3f25ec2e99bbf422263296dbac44d Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 12 Jun 2024 16:41:17 +0100
Subject: [PATCH 2/3] adds icon for alerts

---
 css/components/wysiwyg-styles.css | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/css/components/wysiwyg-styles.css b/css/components/wysiwyg-styles.css
index 4176603e..b0478fe9 100644
--- a/css/components/wysiwyg-styles.css
+++ b/css/components/wysiwyg-styles.css
@@ -4,6 +4,8 @@
 
 /* Alerts */
 .alert {
+  display: flex;
+  gap: var(--spacing);
   padding: var(--spacing-largest);
   border: var(--border-large);
   border-color: var(--border-color-alert);
@@ -12,25 +14,54 @@
   font-weight: bold;
 }
 
+.alert::before {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 2.5rem;
+  padding: var(--spacing-small);
+  content: "!";
+  color: var(--color-white);
+  border-radius: 999rem;
+  background-color: var(--color-black);
+  font-size: 1.5rem;
+}
+
 .alert-primary {
   border-color: var(--color-accent);
 }
+.alert-primary::before {
+  background-color: var(--color-accent);
+}
 
 .alert-info {
   border-color: var(--color-info);
 }
+.alert-info::before {
+  background-color: var(--color-info);
+}
 
 .alert-danger {
   border-color: var(--color-danger);
 }
+.alert-danger::before {
+  background-color: var(--color-danger);
+}
 
 .alert-fail {
   border-color: var(--color-warning);
 }
+.alert-fail::before {
+  background-color: var(--color-warning);
+}
 
 .alert-success {
   border-color: var(--color-success);
 }
+.alert-success::before {
+  background-color: var(--color-success);
+}
 
 /* Links */
 .btn.btn-start {

From 7551223e61364172822f2b04daabbe53a38d3226 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 12 Jun 2024 16:43:21 +0100
Subject: [PATCH 3/3] removes commented out code

---
 css/components/callout.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/components/callout.css b/css/components/callout.css
index c2bfdfaf..a4b50023 100644
--- a/css/components/callout.css
+++ b/css/components/callout.css
@@ -5,7 +5,6 @@
   display: flex;
   gap: var(--spacing);
   padding: 1.5rem;
-  /* text-align: center; */
   color: var(--color-white);
   font-size: var(--font-size-large);
   font-weight: bold;