fix(frontend): better chat color and copy icon position (#2121)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss

@@ -32,7 +32,7 @@
     }
 
     .message_row_content {
-      background-color: Colors.$highlight;
+      background-color: Colors.$white;
       box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     }
   }
@@ -56,8 +56,16 @@
 
     .message_row_content {
       align-self: flex-start;
-      background-color: Colors.$lightest-black;
+      background-color: Colors.$primary-lightest;
+      box-shadow: 0px 2px 2px rgba(97, 66, 212, 0.25);
       margin-left: 1px;
+      position: relative;
+
+      .copy_button {
+        position: absolute;
+        left: Spacings.$spacing02;
+        top: calc(100% + #{Spacings.$spacing02});
+      }
     }
   }
 

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx

@@ -36,19 +36,14 @@ export const MessageRow = React.forwardRef(
     return (
       <div
         className={`
-      ${styles.message_row_container ?? ""} 
-      ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
+      ${styles.message_row_container} 
+      ${isUserSpeaker ? styles.user : styles.brain}
       `}
       >
         {!isUserSpeaker ? (
           <div className={styles.message_header}>
-            <div className={styles.left_wrapper}>
-              <QuestionBrain brainName={brainName} />
-              <QuestionPrompt promptName={promptName} />
-            </div>
-            <div className={styles.copy_button}>
-              <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-            </div>
+            <QuestionBrain brainName={brainName} />
+            <QuestionPrompt promptName={promptName} />
           </div>
         ) : (
           <div className={styles.message_header}>
@@ -59,7 +54,14 @@ export const MessageRow = React.forwardRef(
         {}
         <div ref={ref} className={styles.message_row_content}>
           {children ?? (
-            <MessageContent text={messageContent} isUser={isUserSpeaker} />
+            <>
+              <MessageContent text={messageContent} isUser={isUserSpeaker} />
+              {!isUserSpeaker && (
+                <div className={styles.copy_button}>
+                  <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx

@@ -17,7 +17,7 @@ export const CopyButton = ({
     <Icon
       name={isCopied ? "checkCircle" : "copy"}
       color={isCopied ? "primary" : "black"}
-      size="normal"
+      size="small"
       handleHover={true}
     />
   </button>

frontend/styles/_Colors.module.scss

@@ -1,17 +1,20 @@
 $white: #ffffff;
 $dark-black: #081621;
-$primary: #6142d4;
 $secondary: #f3ecff;
 $tertiary: #f6f4ff;
 $accent: #13abba;
 $highlight: #fafafa;
 $ivory: #fcfaf6;
 $chat-bg-gray: #d9d9d9;
 
+//PRIMARY
+$primary: #6142d4;
+$primary-light: #d0c6f2;
+$primary-lightest: #f5f3fd;
+
 // BLACK
 $black: #11243e;
 $light-black: #293a51;
-$lighter-black: #cfd3d8;
 $lightest-black: #e7e9ec;
 
 // GREY

frontend/styles/_IconSizes.module.scss

@@ -1,4 +1,4 @@
-$small: 12px;
+$small: 14px;
 $normal: 18px;
 $large: 24px;
 $big: 30px;