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

2024-12-14 17:03:29 +03:00 · 2024-07-08 11:04:56 +02:00 · 2024-07-08 11:04:56 +02:00 · f78464c941
commit f78464c941
parent 10bc945564
12 changed files with 60 additions and 49 deletions
--- 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);
--- 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;

--- 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;
+  }
 }
--- 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>
  );
 };
--- 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 {
--- 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 {
--- 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>
--- 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;
    }
  }
 }
--- 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%;

--- 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 {
--- 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;
--- 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;