fix(frontend): bigger icon on message row (QuivrHQ#2345)

# 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):
llwp · Mar 15, 2024 · c649f85 · c649f85
1 parent fa27d71
commit c649f85
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -54,7 +54,7 @@
       .icons_wrapper {
         position: absolute;
         display: flex;
-        gap: Spacings.$spacing02;
+        gap: Spacings.$spacing03;
         left: Spacings.$spacing02;
         top: calc(100% + #{Spacings.$spacing03});
 

diff --git a/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
@@ -72,7 +72,7 @@ export const MessageRow = React.forwardRef(
               <MessageContent text={messageContent} isUser={isUserSpeaker} />
               {!isUserSpeaker && messageContent !== "🧠" && (
                 <div className={styles.icons_wrapper}>
-                  <CopyButton handleCopy={handleCopy} />
+                  <CopyButton handleCopy={handleCopy} size="normal" />
                   {!isMobile && (
                     <div className={styles.sources_icon_wrapper}>
                       <Icon
@@ -81,7 +81,7 @@ export const MessageRow = React.forwardRef(
                         color={
                           sourcesMessageIndex === index ? "primary" : "black"
                         }
-                        size="small"
+                        size="normal"
                         onClick={() => {
                           setSourcesMessageIndex(
                             sourcesMessageIndex === index ? undefined : index

diff --git a/frontend/app/user/components/ApiKeyConfig/ApiKeyConfig.tsx b/frontend/app/user/components/ApiKeyConfig/ApiKeyConfig.tsx
@@ -28,7 +28,7 @@ export const ApiKeyConfig = (): JSX.Element => {
       ) : (
         <div className={styles.response_wrapper}>
           <span>{apiKey}</span>
-          <CopyButton handleCopy={handleCopyClick} />
+          <CopyButton handleCopy={handleCopyClick} size="small" />
         </div>
       )}
     </div>

diff --git a/frontend/lib/components/ui/CopyButton.tsx b/frontend/lib/components/ui/CopyButton.tsx
@@ -1,12 +1,17 @@
 import { useEffect, useState } from "react";
 
 import Icon from "@/lib/components/ui/Icon/Icon";
+import { IconSize } from "@/lib/types/Icons";
 
 type CopyButtonProps = {
   handleCopy: () => void;
+  size: IconSize;
 };
 
-export const CopyButton = ({ handleCopy }: CopyButtonProps): JSX.Element => {
+export const CopyButton = ({
+  handleCopy,
+  size,
+}: CopyButtonProps): JSX.Element => {
   const [isCopied, setIsCopied] = useState(false);
 
   const handleClick = () => {
@@ -35,7 +40,7 @@ export const CopyButton = ({ handleCopy }: CopyButtonProps): JSX.Element => {
       <Icon
         name={isCopied ? "checkCircle" : "copy"}
         color={isCopied ? "primary" : "black"}
-        size="small"
+        size={size}
         handleHover={true}
       />
     </button>