Skip to content

Commit

Permalink
fix(frontend): better chat color and copy icon position (#2121)
Browse files Browse the repository at this point in the history
# 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):
  • Loading branch information
Zewed authored Jan 31, 2024
1 parent 910dda0 commit a273ac7
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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});
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const CopyButton = ({
<Icon
name={isCopied ? "checkCircle" : "copy"}
color={isCopied ? "primary" : "black"}
size="normal"
size="small"
handleHover={true}
/>
</button>
Expand Down
7 changes: 5 additions & 2 deletions frontend/styles/_Colors.module.scss
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/styles/_IconSizes.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$small: 12px;
$small: 14px;
$normal: 18px;
$large: 24px;
$big: 30px;

0 comments on commit a273ac7

Please sign in to comment.