From 16409011149f52e0df5fae9be0a2bdab14ab10c6 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 9 Aug 2022 19:12:22 +0100
Subject: [PATCH] Added in the accent colour to the add details modal for
 comments

refs https://github.com/TryGhost/Team/issues/1768
---
 apps/comments-ui/src/components/modals/AddDetailsDialog.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/comments-ui/src/components/modals/AddDetailsDialog.js b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
index 8a1d07dafc..052f9197d9 100644
--- a/apps/comments-ui/src/components/modals/AddDetailsDialog.js
+++ b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
@@ -6,7 +6,7 @@ import AppContext from '../../AppContext';
 const AddNameDialog = (props) => {
     const inputNameRef = useRef(null);
     const inputBioRef = useRef(null);
-    const {dispatchAction, member} = useContext(AppContext);
+    const {dispatchAction, member, accentColor} = useContext(AppContext);
 
     const [name, setName] = useState(member.name ?? '');
     const [bio, setBio] = useState(member.bio ?? '');
@@ -86,6 +86,8 @@ const AddNameDialog = (props) => {
         };
 
         let returnable = [];
+
+        // using URLS over real images for avatars as serving JPG images was not optimal (based on discussion with team)
         let exampleProfiles = [
             {avatar: 'https://randomuser.me/api/portraits/men/32.jpg', name: 'James Fletcher', expertise: 'Full-time parent'},
             {avatar: 'https://randomuser.me/api/portraits/women/30.jpg', name: 'Naomi Schiff', expertise: 'Founder @ Acme Inc'},
@@ -171,7 +173,8 @@ const AddNameDialog = (props) => {
                             maxLength={maxBioChars}
                         />
                         <button
-                            className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-8 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
+                            className={`transition-opacity duration-200 ease-linear w-full h-[44px] mt-8 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] opacity-100 hover:opacity-90`}
+                            style={{backgroundColor: accentColor ?? '#000000'}}
                             onClick={submit}
                         >
                             Save