From b968ed5f1f4802feef77fe962c4f0c6b72328c37 Mon Sep 17 00:00:00 2001 From: Antoine Dewez <44063631+Zewed@users.noreply.github.com> Date: Tue, 27 Aug 2024 17:43:59 +0200 Subject: [PATCH] feat(frontend): revamp of some basics components (#3105) # 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): --- .../ModelSelection/ModelSelection.module.scss | 2 +- .../ui/MessageInfoBox/MessageInfoBox.module.scss | 9 +++------ .../components/ui/QuivrButton/QuivrButton.module.scss | 11 +++++++++++ .../lib/components/ui/QuivrButton/QuivrButton.tsx | 2 +- .../ui/SingleSelector/SingleSelector.module.scss | 6 +++--- .../ui/TextAreaInput/TextAreaInput.module.scss | 8 ++++---- .../lib/components/ui/TextInput/TextInput.module.scss | 8 ++++---- 7 files changed, 27 insertions(+), 19 deletions(-) diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.module.scss index 02dd9570999e..dda150a632fc 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.module.scss +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.module.scss @@ -24,7 +24,7 @@ width: 80%; height: 15px; border-radius: Radius.$normal; - background: var(--primary-1); + background: var(--background-primary-1); outline: none; -webkit-transition: 0.2s; transition: opacity 0.2s; diff --git a/frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss b/frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss index d5972257adb3..1e8b65ee5634 100644 --- a/frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss +++ b/frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss @@ -1,5 +1,6 @@ @use "styles/Radius.module.scss"; @use "styles/Spacings.module.scss"; +@use "styles/Typography.module.scss"; .message_info_box_wrapper { padding: Spacings.$spacing03; @@ -7,35 +8,31 @@ align-items: center; gap: Spacings.$spacing03; width: fit-content; - border: 1px solid var(--border-2); color: var(--text-3); border-radius: Radius.$normal; + font-size: Typography.$small; &.success { - border-color: var(--success); color: var(--success); background-color: var(--success-lightest); } &.info { - border-color: var(--primary-0); color: var(--primary-0); background-color: var(--primary-2); } &.warning { - border-color: var(--warning); color: var(--warning); background-color: var(--warning-lightest); } &.tutorial { - border-color: var(--gold); color: var(--gold); background-color: var(--gold-lightest); } &.dark { - background-color: var(--background-primary-0); + background-color: var(--background-1); } } diff --git a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss index 7739f4457762..56f228485c3e 100644 --- a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss +++ b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss @@ -20,6 +20,17 @@ text-transform: uppercase; } + &.dark { + background-color: var(--background-1); + + &:hover, + &.important { + .label { + color: var(--white-0); + } + } + } + &.hidden { display: none; } diff --git a/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx b/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx index fcdb319b610b..eea79bcfb883 100644 --- a/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx +++ b/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx @@ -35,7 +35,7 @@ export const QuivrButton = ({ const useIconColor = () => { if ((hovered && !disabled) || (important && !disabled)) { - return "white"; + return isDarkMode ? "black" : "white"; } if (disabled) { return "grey"; diff --git a/frontend/lib/components/ui/SingleSelector/SingleSelector.module.scss b/frontend/lib/components/ui/SingleSelector/SingleSelector.module.scss index 3ca5c480369a..b2290790bb06 100644 --- a/frontend/lib/components/ui/SingleSelector/SingleSelector.module.scss +++ b/frontend/lib/components/ui/SingleSelector/SingleSelector.module.scss @@ -8,20 +8,20 @@ display: flex; flex-direction: column; position: relative; - background-color: var(--background-0); font-size: Typography.$small; .first_line_wrapper { display: flex; justify-content: space-between; border: 1px solid var(--border-2); - border-radius: Radius.$normal; + border-radius: Radius.$big; align-items: center; + background-color: var(--background-1); cursor: pointer; display: flex; &.unfolded { - border-radius: Radius.$normal Radius.$normal 0 0; + border-radius: Radius.$big Radius.$big 0 0; } .left { diff --git a/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss index 45bb4003cebd..edf30bd479a4 100644 --- a/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss +++ b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss @@ -6,10 +6,10 @@ display: flex; border: 1px solid var(--border-0); gap: Spacings.$spacing03; - border-radius: Radius.$normal; + border-radius: Radius.$big; align-items: center; width: 100%; - background-color: var(--background-0); + background-color: var(--background-1); &.simple { border: none; @@ -34,8 +34,8 @@ resize: none; background-color: transparent; font-size: Typography.$small; - padding-block: Spacings.$spacing02; - padding-inline: Spacings.$spacing03; + padding-block: calc(Spacings.$spacing02 + Spacings.$spacing01); + padding-inline: Spacings.$spacing05; &:focus { box-shadow: none; diff --git a/frontend/lib/components/ui/TextInput/TextInput.module.scss b/frontend/lib/components/ui/TextInput/TextInput.module.scss index 8f7c6ce7ebb8..3ce7ba9ae8fc 100644 --- a/frontend/lib/components/ui/TextInput/TextInput.module.scss +++ b/frontend/lib/components/ui/TextInput/TextInput.module.scss @@ -6,12 +6,12 @@ display: flex; border: 1px solid var(--border-2); gap: Spacings.$spacing02; - padding-block: Spacings.$spacing02; - padding-inline: Spacings.$spacing03; - border-radius: Radius.$normal; + padding-block: calc(Spacings.$spacing02 + Spacings.$spacing01); + padding-inline: Spacings.$spacing05; + border-radius: Radius.$big; align-items: center; width: 100%; - background-color: var(--background-0); + background-color: var(--background-1); &.simple { border: none;