From ebe14c4e01310771f7edec5787397026484e9577 Mon Sep 17 00:00:00 2001
From: David Veszelovszki <veszelovszki@gmail.com>
Date: Fri, 24 May 2024 09:26:09 +0200
Subject: [PATCH] SSC: Fix notification colors (#62860)

---
 .../cody/team/CodyManageTeamPage.module.scss  | 38 ++++++++++++++-----
 client/web/src/cody/team/InviteUsers.tsx      |  4 +-
 client/web/src/cody/team/TeamMemberList.tsx   |  2 +-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/client/web/src/cody/team/CodyManageTeamPage.module.scss b/client/web/src/cody/team/CodyManageTeamPage.module.scss
index 3253a0ebc06..daef7939f4d 100644
--- a/client/web/src/cody/team/CodyManageTeamPage.module.scss
+++ b/client/web/src/cody/team/CodyManageTeamPage.module.scss
@@ -8,7 +8,7 @@
 .alert {
     position: relative;
     padding: 1.5rem 1.5rem 1.5rem 5rem;
-    color: #181b26;
+    color: var(--gray-11);
     &::after {
         content: '';
         position: absolute;
@@ -22,33 +22,51 @@
 }
 
 .purple-success-alert {
-    background-color: #f2e7fb;
+    background-color: var(--violet-02);
+    color: var(--violet-06);
+    :global(.theme-dark) & {
+        background-color: var(--pink);
+        color: var(--gray-08);
+    }
     &::after {
         // Purple checkmark SVG
         background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'><path fill='%23a405e1' d='M27 .4a3.4 3.4 0 0 0-2.4 1.1L12 15.6 7 9.3a3.4 3.4 0 0 0-5-.6 3.4 3.4 0 0 0-.5 4.9L9.2 23a3.4 3.4 0 0 0 5.3.1l15.2-17a3.4 3.4 0 0 0-.3-4.9 3.4 3.4 0 0 0-2.5-.8Z'/></svg>");
     }
 }
 
-.blue-success-alert {
-    background-color: #e8f7ff;
+.green-success-alert {
+    background-color: #e0f9d5;
+    color: #054410;
+    :global(.theme-dark) & {
+        background-color: #51cf66;
+    }
     &::after {
-        // Blue checkmark SVG
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'><path fill='%23339af0' d='M27 .4a3.4 3.4 0 0 0-2.4 1.1L12 15.6 7 9.3a3.4 3.4 0 0 0-5-.6 3.4 3.4 0 0 0-.5 4.9L9.2 23a3.4 3.4 0 0 0 5.3.1l15.2-17a3.4 3.4 0 0 0-.3-4.9 3.4 3.4 0 0 0-2.5-.8Z'/></svg>");
+        // Green checkmark SVG
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'><path fill='%23319E44' d='M27 .4a3.4 3.4 0 0 0-2.4 1.1L12 15.6 7 9.3a3.4 3.4 0 0 0-5-.6 3.4 3.4 0 0 0-.5 4.9L9.2 23a3.4 3.4 0 0 0 5.3.1l15.2-17a3.4 3.4 0 0 0-.3-4.9 3.4 3.4 0 0 0-2.5-.8Z'/></svg>");
     }
 }
 
 .error-alert {
-    background-color: #ffe8e8;
+    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+    padding-left: calc(1.5rem + 124px + 1.5rem);
+    overflow: hidden;
+    background-color: var(--oc-orange-1);
+    color: var(--gray-08);
+    :global(.theme-dark) & {
+        background-color: var(--oc-orange-4);
+    }
     &::after {
-        // Ugly red X SVG – TODO: Replace it with a design-approved one.
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 122.88'><path fill='%23f5222d' d='M6,6H6a20.53,20.53,0,0,1,29,0l26.5,26.49L87.93,6a20.54,20.54,0,0,1,29,0h0a20.53,20.53,0,0,1,0,29L90.41,61.44,116.9,87.93a20.54,20.54,0,0,1,0,29h0a20.54,20.54,0,0,1-29,0L61.44,90.41,35,116.9a20.54,20.54,0,0,1-29,0H6a20.54,20.54,0,0,1,0-29L32.47,61.44,6,34.94A20.53,20.53,0,0,1,6,6Z'/></svg>");
+        top: 1.5rem;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+        width: 124px;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 124 99"><g filter="url(%23a)"><path fill="%23D9D9D9" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="%23EFF2F5" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="%23fff" fill-opacity=".2" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="url(%23b)" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path stroke="%23000" stroke-opacity=".16" stroke-width=".4" d="M5.06 12.19c0-3.9 2.63-6.99 5.8-6.99h102c3.17 0 5.8 3.1 5.8 6.99v124.62c0 3.9-2.63 6.99-5.8 6.99h-102c-3.17 0-5.8-3.1-5.8-6.99V12.19Zm50.62 3.78c-1.8 0-3.2 1.73-3.2 3.79 0 2.05 1.4 3.78 3.2 3.78h12.36c1.8 0 3.19-1.73 3.19-3.78 0-2.06-1.4-3.79-3.2-3.79H55.69Z"/><path fill="%23DBE2F0" d="M63.67 69.33h-3.34v-6.66h3.34v6.66Zm0 6.67h-3.34v-3.33h3.34V76Zm-20 5h36.66L62 49.33 43.67 81Z"/></g><defs><linearGradient id="b" x1="62.09" x2="62.09" y1="137.07" y2="5" gradientUnits="userSpaceOnUse"><stop offset=".43" stop-color="%23fff"/><stop offset="1" stop-color="%23fff" stop-opacity="0"/></linearGradient><filter id="a" width="123" height="148" x=".36" y=".5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="effect1_dropShadow_5081_15909"/><feOffset/><feGaussianBlur stdDeviation="1.75"/><feColorMatrix values="0 0 0 0 0.141522 0 0 0 0 0.159783 0 0 0 0 0.21 0 0 0 0.31 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5081_15909"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5081_15909" result="shape"/></filter></defs></svg>');
     }
 }
 
 .user-badges {
     position: relative;
     left: -31px;
-    border: 1px solid #e6ebf2;
+    border: 1px solid var(--gray-03);
     border-radius: 50%;
 }
 
diff --git a/client/web/src/cody/team/InviteUsers.tsx b/client/web/src/cody/team/InviteUsers.tsx
index 99864396db6..ec520eded30 100644
--- a/client/web/src/cody/team/InviteUsers.tsx
+++ b/client/web/src/cody/team/InviteUsers.tsx
@@ -77,7 +77,7 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({
     return (
         <>
             {invitesSendingStatus === 'success' && (
-                <div className={classNames('mb-4', styles.alert, styles.blueSuccessAlert)}>
+                <div className={classNames('mb-4', styles.alert, styles.greenSuccessAlert)}>
                     <H3>
                         {invitesSentCount} {pluralize('invite', invitesSentCount)} sent!
                     </H3>
@@ -92,7 +92,7 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({
                     <Text size="small" className="text-muted mb-0">
                         {invitesSendingErrorMessage}
                     </Text>
-                    <Text size="small">
+                    <Text size="small" className="mb-0">
                         If you encounter this issue repeatedly, please contact support at{' '}
                         <Link to="mailto:support@sourcegraph.com">support@sourcegraph.com</Link>.
                     </Text>
diff --git a/client/web/src/cody/team/TeamMemberList.tsx b/client/web/src/cody/team/TeamMemberList.tsx
index 60fa35b3fa8..1788cbc8b56 100644
--- a/client/web/src/cody/team/TeamMemberList.tsx
+++ b/client/web/src/cody/team/TeamMemberList.tsx
@@ -172,7 +172,7 @@ export const TeamMemberList: FunctionComponent<TeamMemberListProps> = ({
                     className={classNames(
                         'mb-4',
                         styles.alert,
-                        actionResult.isError ? styles.errorAlert : styles.blueSuccessAlert
+                        actionResult.isError ? styles.errorAlert : styles.greenSuccessAlert
                     )}
                 >
                     {actionResult.message}