CSS Style update for notifications

RachelDau · Dec 12, 2023 · 4b98337 · 4b98337
1 parent 251bdc9
commit 4b98337
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
@@ -17,7 +17,7 @@ exports[`Notification component handles click on exit button and updates state a
         className="notification-exit-button"
         onClick={[Function]}
       >
-        X
+        x
       </button>
     </div>
     <p>
@@ -37,7 +37,7 @@ exports[`Notification component handles click on exit button and updates state a
         className="notification-exit-button"
         onClick={[Function]}
       >
-        X
+        x
       </button>
     </div>
     <p>
@@ -64,7 +64,7 @@ exports[`Notification component handles click on exit button and updates state a
         className="notification-exit-button"
         onClick={[Function]}
       >
-        X
+        x
       </button>
     </div>
     <p>
@@ -91,7 +91,7 @@ exports[`Notification component hides the notification on exit button click 1`]
         className="notification-exit-button"
         onClick={[Function]}
       >
-        X
+        x
       </button>
     </div>
     <p>
@@ -120,7 +120,7 @@ exports[`Notification component loads notifications from cookies on mount 1`] =
         className="notification-exit-button"
         onClick={[Function]}
       >
-        X
+        x
       </button>
     </div>
     <p>

diff --git a/packages/app/obojobo-repository/shared/components/notification.jsx b/packages/app/obojobo-repository/shared/components/notification.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useState, useEffect } from 'react'
-import '../../../obojobo-document-engine/src/scripts/viewer/components/notification.scss'
+import './notification.scss'
 
 const Notification = () => {
 	const [notifications, setNotifications] = useState([])
@@ -37,7 +37,7 @@ const Notification = () => {
 				<div className="notification-header">
 					<h1>{title}</h1>
 					<button onClick={() => onClickExitNotification(key)} className="notification-exit-button">
-						X
+						x
 					</button>
 				</div>
 				<p>{text}</p>

diff --git a/...ripts/viewer/components/notification.scss → ...itory/shared/components/notification.scss b/...ripts/viewer/components/notification.scss → ...itory/shared/components/notification.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/_includes.scss';
+@import '../../../obojobo-document-engine/src/scss/_includes.scss';
 
 $poppin-pink: #af1b5c;
 $focus-pink: #fbdae6;
@@ -48,8 +48,12 @@ p {
 	color: $poppin-pink;
 	background-color: $white;
 	border: none;
-	border-radius: 0.5em;
+	border-radius: 6em;
 	font-size: 0.8cm;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+	padding-top: 0.1em;
+	padding-bottom: 0.3em;
 }
 
 .notification-exit-button:hover {