fix(frontend): brain studio ui audit implem (#2800)

QuivrHQ · Jul 8, 2024 · f78464c · f78464c
1 parent 10bc945
commit f78464c
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 49 deletions.
diff --git 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
@@ -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;
     }
   }
-}
+}
diff --git a/...app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.module.scss b/...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
@@ -32,28 +32,32 @@ export const KnowledgeTab = ({
 
   if (allKnowledge.length === 0) {
     return (
-      <div className={styles.knowledge_tab_wrapper}>
-        <MessageInfoBox type="warning">
-          This brain is empty! You can add knowledge by clicking on
-          <QuivrButton
-            label="Add knowledge"
-            color="primary"
-            iconName="add"
-            onClick={() => setShouldDisplayFeedCard(true)}
-          />
-          .
-        </MessageInfoBox>
+      <div className={styles.knowledge_tab_container}>
+        <div className={styles.knowledge_tab_wrapper}>
+          <MessageInfoBox type="warning">
+            This brain is empty! You can add knowledge by clicking on
+            <QuivrButton
+              label="Add knowledge"
+              color="primary"
+              iconName="add"
+              onClick={() => setShouldDisplayFeedCard(true)}
+            />
+            .
+          </MessageInfoBox>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className={styles.knowledge_tab_wrapper}>
-      <motion.div layout className="w-full flex flex-col gap-5">
-        <AnimatePresence mode="popLayout">
-          <KnowledgeTable knowledgeList={allKnowledge} />
-        </AnimatePresence>
-      </motion.div>
+    <div className={styles.knowledge_tab_container}>
+      <div className={styles.knowledge_tab_wrapper}>
+        <motion.div layout className="w-full flex flex-col gap-5">
+          <AnimatePresence mode="popLayout">
+            <KnowledgeTable knowledgeList={allKnowledge} />
+          </AnimatePresence>
+        </motion.div>
+      </div>
     </div>
   );
 };
diff --git a/...Id]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.module.scss b/...Id]/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
@@ -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;
     }
   }
-}
+}
diff --git 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 => {
           </div>
         </div>
       </form>
-      <div className={styles.section_wrapper}>
+      <div className={`${styles.section_wrapper} ${styles.last}`}>
         <span className={styles.section_title}>Users with access</span>
         <BrainUsers brainId={brainId} />
       </div>

diff --git a/...d/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.module.scss b/...d/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;
     }
   }
-}
+}
diff --git 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
@@ -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
@@ -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 @@
       }
     }
   }
-}
+}
diff --git 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;