fix: remove undesired outlines around divs

[matthieujacq]

Description

Remove the outline when focusing on divs
#1317

Screenshots of the issue (before)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview		Oct 3, 2023 3:49pm
quivr-strapi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 3:49pm
quivrapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 3:49pm

[github-actions]

Risk Level 2 - /home/runner/work/quivr/quivr/frontend/app/chat/[chatId]/page.tsx

The changes made in the pull request seem to be mostly related to the styling and layout of the components. However, there are a few things that could be improved:

1. Removal of ChatDialogueArea and ActionsBar: The ChatDialogueArea and ActionsBar components have been removed from the SelectedChatPage component. If these components are necessary for the functionality of the chat page, their removal could cause issues. Please ensure that these components are not required, or if they are, they are being rendered elsewhere.

2. Removal of getRootProps: The getRootProps function from the useCustomDropzone hook is no longer being spread onto the div element. If this function is providing necessary props for the functionality of the dropzone, its removal could cause issues.

3. Styling Changes: The changes to the class names on the div elements seem to be mostly related to styling. While these changes are unlikely to cause any major issues, it's worth double checking that they don't unintentionally alter the layout or appearance of the components in a way that wasn't intended.

Here's a suggestion on how to possibly improve the code:

const SelectedChatPage = (): JSX.Element => {
  const { getRootProps } = useCustomDropzone();
  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();

  return (
    <div
      className={`flex flex-col flex-1 items-center justify-stretch w-full h-[100vh] overflow-hidden ${
        shouldDisplayFeedCard ? \"bg-chat-bg-gray\" : \"bg-white\"
      } dark:bg-black transition-colors ease-out duration-500`}
      data-testid=\"chat-page\"
      {...getRootProps()}
    >
      <div
        className={`flex flex-col flex-1 w-full max-w-5xl h-full dark:shadow-primary/25 overflow-hidden p-2 sm:p-4 md:p-6 lg:p-8`}
      >
        <div className=\"flex flex-1 flex-col overflow-y-auto\">
          <ChatDialogueArea />
        </div>
        <ActionsBar />
      </div>
    </div>
  );
};

export default SelectedChatPage;

This way, you maintain the functionality of the ChatDialogueArea and ActionsBar components, as well as the getRootProps function, while still applying the new styles.

---

🔧🧹🎨

---

Powered by Code Review GPT