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;