From f78464c941aed8a8625f58ccdbdbbb1db424a05f Mon Sep 17 00:00:00 2001 From: Antoine Dewez <44063631+Zewed@users.noreply.github.com> Date: Mon, 8 Jul 2024 11:04:56 +0200 Subject: [PATCH] fix(frontend): brain studio ui audit implem (#2800) --- frontend/app/globals.css | 6 +-- .../Analytics/Analytics.module.scss | 4 +- .../KnowledgeTab/KnowledgeTab.module.scss | 14 +++++-- .../components/KnowledgeTab/KnowledgeTab.tsx | 38 ++++++++++--------- .../KnowledgeTable/KnowledgeTable.module.scss | 2 +- .../PeopleTab/PeopleTab.module.scss | 16 ++++---- .../components/PeopleTab/PeopleTab.tsx | 2 +- .../SettingsTab/SettingsTab.module.scss | 16 +++----- .../Connections/Connections.module.scss | 2 +- .../components/Settings/Settings.module.scss | 2 +- .../lib/components/ui/Tabs/Tabs.module.scss | 5 ++- .../ui/TextInput/TextInput.module.scss | 2 +- 12 files changed, 60 insertions(+), 49 deletions(-) diff --git a/frontend/app/globals.css b/frontend/app/globals.css index b7110a5ce29a..8cdfba2e4fec 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -98,9 +98,9 @@ body.dark_mode { --background-blur: rgba(0, 0, 0, 0.9); /* Borders */ - --border-0: var(--white-0); - --border-1: var(--grey-2); - --border-2: var(--grey-3); + --border-0: var(--black-5); + --border-1: var(--black-6); + --border-2: var(--black-7); /* Icons */ --icon-0: var(--black-0); diff --git a/frontend/app/studio/BrainsTabs/components/Analytics/Analytics.module.scss b/frontend/app/studio/BrainsTabs/components/Analytics/Analytics.module.scss index bdf6d85d466e..afb3fbe3fdf4 100644 --- a/frontend/app/studio/BrainsTabs/components/Analytics/Analytics.module.scss +++ b/frontend/app/studio/BrainsTabs/components/Analytics/Analytics.module.scss @@ -1,7 +1,7 @@ @use "styles/Spacings.module.scss"; .analytics_wrapper { - padding: Spacings.$spacing06; + padding-block: Spacings.$spacing06; display: flex; flex-direction: column; @@ -13,4 +13,4 @@ width: 300px; } } -} \ No newline at end of file +} diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.module.scss index 3afe7cd9939f..f8f436593383 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.module.scss +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.module.scss @@ -1,7 +1,15 @@ +@use "styles/Radius.module.scss"; +@use "styles/BoxShadow.module.scss"; @use "styles/Spacings.module.scss"; -.knowledge_tab_wrapper { - display: flex; - justify-content: center; +.knowledge_tab_container { padding-block: Spacings.$spacing05; + + .knowledge_tab_wrapper { + display: flex; + flex-direction: column; + width: 100%; + gap: Spacings.$spacing05; + padding-block: Spacings.$spacing05; + } } diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.tsx index 37e41011f8a7..e264fdbd17a4 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.tsx +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.tsx @@ -32,28 +32,32 @@ export const KnowledgeTab = ({ if (allKnowledge.length === 0) { return ( -
- - This brain is empty! You can add knowledge by clicking on - setShouldDisplayFeedCard(true)} - /> - . - +
+
+ + This brain is empty! You can add knowledge by clicking on + setShouldDisplayFeedCard(true)} + /> + . + +
); } return ( -
- - - - - +
+
+ + + + + +
); }; diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.module.scss index 59223eed8fe2..8c110ab7c8b5 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.module.scss +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.module.scss @@ -10,7 +10,7 @@ border-radius: Radius.$normal; .title { - @include Typography.H3; + @include Typography.H2; } .table_header { diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.module.scss index a3a9eaccdd7c..a2b3bc1493b7 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.module.scss +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.module.scss @@ -5,21 +5,23 @@ .people_tab_wrapper { display: flex; - padding: Spacings.$spacing05; + padding-block: Spacings.$spacing05; flex-direction: column; gap: Spacings.$spacing05; .section_wrapper { - border-radius: Radius.$big; - background-color: var(--background-1); - padding: Spacings.$spacing05; - box-shadow: BoxShadow.$small; + padding-block: Spacings.$spacing05; + border-bottom: 1px solid var(--border-2); display: flex; flex-direction: column; gap: Spacings.$spacing05; + &.last { + border-bottom: none; + } + .section_title { - @include Typography.H3; + @include Typography.H2; } .buttons_wrapper { @@ -28,4 +30,4 @@ align-items: center; } } -} \ No newline at end of file +} diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.tsx index 740c6005c6b0..06e3aafba833 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.tsx +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/PeopleTab.tsx @@ -61,7 +61,7 @@ export const PeopleTab = ({ brainId }: ShareBrainModalProps): JSX.Element => {
-
+
Users with access
diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.module.scss index eb7040f17b6f..548210e64b80 100644 --- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.module.scss +++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.module.scss @@ -15,13 +15,11 @@ flex-direction: column; width: 100%; gap: Spacings.$spacing05; - box-shadow: BoxShadow.$small; - border-radius: Radius.$big; - padding: Spacings.$spacing06; - background-color: var(--background-1); + border-bottom: 1px solid var(--border-2); + padding-block: Spacings.$spacing05; .section_title { - @include Typography.H3; + @include Typography.H2; } .inputs_wrapper { @@ -63,13 +61,11 @@ flex-direction: column; width: 100%; gap: Spacings.$spacing05; - box-shadow: BoxShadow.$small; border-radius: Radius.$big; - padding: Spacings.$spacing06; - background-color: var(--background-1); + padding-block: Spacings.$spacing05; .section_title { - @include Typography.H3; + @include Typography.H2; } } -} \ No newline at end of file +} diff --git a/frontend/app/user/components/Connections/Connections.module.scss b/frontend/app/user/components/Connections/Connections.module.scss index 03fcf4e323ec..3544f1531b56 100644 --- a/frontend/app/user/components/Connections/Connections.module.scss +++ b/frontend/app/user/components/Connections/Connections.module.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; gap: Spacings.$spacing05; - padding: Spacings.$spacing06; + padding-block: Spacings.$spacing06; flex-direction: column; width: 100%; diff --git a/frontend/app/user/components/Settings/Settings.module.scss b/frontend/app/user/components/Settings/Settings.module.scss index ada6444344ec..d8b6b09ef27f 100644 --- a/frontend/app/user/components/Settings/Settings.module.scss +++ b/frontend/app/user/components/Settings/Settings.module.scss @@ -7,7 +7,7 @@ flex-direction: column; gap: Spacings.$spacing07; width: auto; - padding: Spacings.$spacing06; + padding-block: Spacings.$spacing06; max-width: 700px; .title { diff --git a/frontend/lib/components/ui/Tabs/Tabs.module.scss b/frontend/lib/components/ui/Tabs/Tabs.module.scss index 8e410c320d3a..f84ccc673dea 100644 --- a/frontend/lib/components/ui/Tabs/Tabs.module.scss +++ b/frontend/lib/components/ui/Tabs/Tabs.module.scss @@ -12,7 +12,7 @@ align-items: center; justify-content: center; flex: 1; - border-bottom: 2px solid var(--border-0); + border-bottom: 1px solid var(--border-2); padding-block: Spacings.$spacing03; cursor: pointer; box-sizing: border-box; @@ -43,6 +43,7 @@ display: flex; position: relative; gap: Spacings.$spacing02; + font-size: Typography.$small; .label_badge { border-radius: Radius.$circle; @@ -57,4 +58,4 @@ } } } -} \ No newline at end of file +} diff --git a/frontend/lib/components/ui/TextInput/TextInput.module.scss b/frontend/lib/components/ui/TextInput/TextInput.module.scss index 2742537d3ef8..1f3da9590ac5 100644 --- a/frontend/lib/components/ui/TextInput/TextInput.module.scss +++ b/frontend/lib/components/ui/TextInput/TextInput.module.scss @@ -4,7 +4,7 @@ .text_input_container { display: flex; - border: 1px solid var(--border-0); + border: 1px solid var(--border-2); gap: Spacings.$spacing03; padding-block: Spacings.$spacing02; padding-inline: Spacings.$spacing03;