From 1603e5b835c9452aba32d1d1ab2dd1167f02f239 Mon Sep 17 00:00:00 2001 From: Zewed Date: Mon, 8 Jul 2024 16:36:01 +0200 Subject: [PATCH] feat: Uniformize brain icon and add small property to textInput --- .../FromDocuments/FromDocuments.module.scss | 7 +++- .../AddBrainModal/AddBrainModal.module.scss | 8 ++--- .../BrainMainInfosStep.module.scss | 7 ++-- .../FeedBrainStep/FeedBrainStep.module.scss | 5 ++- .../components/Stepper/Stepper.module.scss | 34 +++++++++++++------ .../ui/FieldHeader/FieldHeader.module.scss | 5 +-- .../lib/components/ui/Modal/Modal.module.scss | 17 ++++++++-- frontend/lib/components/ui/Modal/Modal.tsx | 19 +++++------ .../ui/QuivrButton/QuivrButton.module.scss | 4 +++ .../ui/TextInput/TextInput.module.scss | 5 +-- 10 files changed, 71 insertions(+), 40 deletions(-) diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss index f4da5ca881b5..dbaacabab0ed 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss @@ -10,12 +10,17 @@ cursor: pointer; height: 100%; overflow: scroll; + transition: border-color 0.3s ease 0.2s, border-width 0.1s ease 0.1s; &.dragging { border: 3px dashed var(--accent); background-color: var(--background-3); } + &:hover { + border: 3px dashed var(--accent); + } + .box_content { padding: Spacings.$spacing05; display: flex; @@ -39,4 +44,4 @@ } } } -} \ No newline at end of file +} diff --git a/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss b/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss index f2638da7166b..6655484a0cf0 100644 --- a/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss +++ b/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss @@ -2,21 +2,19 @@ .add_brain_modal_container { display: flex; - padding-block: Spacings.$spacing05; + padding-top: Spacings.$spacing06; flex-direction: column; width: 100%; - max-height: 90%; - min-height: 90%; + flex-grow: 1; overflow: hidden; gap: Spacings.$spacing05; .stepper_container { width: 100%; - padding-inline: Spacings.$spacing08; } .content_wrapper { flex-grow: 1; overflow: auto; } -} \ No newline at end of file +} diff --git a/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss index 6035c09be61e..e4efd7112125 100644 --- a/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss +++ b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss @@ -7,11 +7,10 @@ flex-direction: column; justify-content: space-between; height: 100%; - padding-inline: Spacings.$spacing08; - gap: Spacings.$spacing03; + gap: Spacings.$spacing05; .title { - @include Typography.H2; + @include Typography.H3; } .inputs_wrapper { @@ -35,4 +34,4 @@ display: flex; justify-content: flex-end; } -} \ No newline at end of file +} diff --git a/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss b/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss index e994f7492cc4..f0c6ce5af044 100644 --- a/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss +++ b/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss @@ -5,7 +5,6 @@ display: flex; flex-direction: column; justify-content: space-between; - padding-inline: Spacings.$spacing08; height: 100%; .tutorial { @@ -19,7 +18,7 @@ height: 100%; .title { - @include Typography.H2; + @include Typography.H3; } } @@ -40,4 +39,4 @@ display: flex; justify-content: space-between; } -} \ No newline at end of file +} diff --git a/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss index 4fe7831a2698..f1563704e27f 100644 --- a/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss +++ b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss @@ -6,6 +6,7 @@ display: flex; width: 100%; justify-content: space-between; + overflow: visible; .step { display: flex; @@ -32,6 +33,20 @@ } } + .step_info { + margin-top: Spacings.$spacing03; + display: flex; + flex-direction: column; + font-size: Typography.$tiny; + width: 1.75rem; + align-items: center; + + .step_index { + white-space: nowrap; + color: var(--text-1); + } + } + &.done_step { .circle { background-color: var(--success); @@ -75,16 +90,15 @@ } } - .step_info { - margin-top: Spacings.$spacing03; - display: flex; - flex-direction: column; - font-size: Typography.$tiny; - width: 1.75rem; + &:first-child { + .step_info { + align-items: start; + } + } - .step_index { - white-space: nowrap; - color: var(--text-1); + &:last-child { + .step_info { + align-items: end; } } } @@ -101,4 +115,4 @@ background-color: var(--success); } } -} \ No newline at end of file +} diff --git a/frontend/lib/components/ui/FieldHeader/FieldHeader.module.scss b/frontend/lib/components/ui/FieldHeader/FieldHeader.module.scss index 1e72bd6d6608..9802a2fba314 100644 --- a/frontend/lib/components/ui/FieldHeader/FieldHeader.module.scss +++ b/frontend/lib/components/ui/FieldHeader/FieldHeader.module.scss @@ -1,14 +1,15 @@ @use "styles/Colors.module.scss"; @use "styles/Spacings.module.scss"; +@use "styles/Typography.module.scss"; .field_header_wrapper { display: flex; gap: Spacings.$spacing03; - font-weight: 500; align-items: center; padding-bottom: Spacings.$spacing02; + font-size: Typography.$small; .mandatory { color: Colors.$dangerous; } -} \ No newline at end of file +} diff --git a/frontend/lib/components/ui/Modal/Modal.module.scss b/frontend/lib/components/ui/Modal/Modal.module.scss index dd7c46824faf..4a2825c2969a 100644 --- a/frontend/lib/components/ui/Modal/Modal.module.scss +++ b/frontend/lib/components/ui/Modal/Modal.module.scss @@ -2,6 +2,7 @@ @use "styles/Radius.module.scss"; @use "styles/ScreenSizes.module.scss"; @use "styles/Spacings.module.scss"; +@use "styles/Typography.module.scss"; @use "styles/ZIndexes.module.scss"; .modal_container { @@ -19,7 +20,8 @@ flex-direction: column; border-radius: Radius.$big; background-color: var(--background-0); - padding: Spacings.$spacing05; + padding-inline: Spacings.$spacing08; + padding-block: Spacings.$spacing06; cursor: auto; box-shadow: BoxShadow.$medium; max-width: 90vw; @@ -27,6 +29,14 @@ height: 80vh; overflow: auto; + .title { + @include Typography.H1; + } + + .subtitle { + font-size: Typography.$small; + } + &.auto { height: auto; } @@ -50,9 +60,10 @@ position: absolute; top: 0; right: 0; - padding: Spacings.$spacing05; + padding: Spacings.$spacing06; + padding-inline: Spacings.$spacing08; border-radius: 50; outline: none; } } -} \ No newline at end of file +} diff --git a/frontend/lib/components/ui/Modal/Modal.tsx b/frontend/lib/components/ui/Modal/Modal.tsx index b318894caa73..07432ced6a41 100644 --- a/frontend/lib/components/ui/Modal/Modal.tsx +++ b/frontend/lib/components/ui/Modal/Modal.tsx @@ -5,11 +5,11 @@ import * as Dialog from "@radix-ui/react-dialog"; import { AnimatePresence, motion } from "framer-motion"; import { ReactNode, useState } from "react"; import { useTranslation } from "react-i18next"; -import { MdClose } from "react-icons/md"; import styles from "./Modal.module.scss"; import Button from "../Button"; +import Icon from "../Icon/Icon"; type CommonModalProps = { title?: string; @@ -98,16 +98,10 @@ export const Modal = ({ - + {title} - + {desc} {children} @@ -126,7 +120,12 @@ export const Modal = ({ className={styles.close_button_wrapper} aria-label="Close" > - + )} diff --git a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss index aaff11edf47c..361444dbcd9a 100644 --- a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss +++ b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss @@ -16,6 +16,10 @@ background-color: var(--background-0); height: fit-content; + &.important { + text-transform: uppercase; + } + &.hidden { display: none; } diff --git a/frontend/lib/components/ui/TextInput/TextInput.module.scss b/frontend/lib/components/ui/TextInput/TextInput.module.scss index 1f3da9590ac5..556689ef377c 100644 --- a/frontend/lib/components/ui/TextInput/TextInput.module.scss +++ b/frontend/lib/components/ui/TextInput/TextInput.module.scss @@ -5,8 +5,8 @@ .text_input_container { display: flex; border: 1px solid var(--border-2); - gap: Spacings.$spacing03; - padding-block: Spacings.$spacing02; + gap: Spacings.$spacing02; + padding-block: Spacings.$spacing01; padding-inline: Spacings.$spacing03; border-radius: Radius.$big; align-items: center; @@ -43,6 +43,7 @@ border: none; flex: 1; background-color: transparent; + padding: Spacings.$spacing03; &:focus { box-shadow: none;