mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 10:20:35 +03:00
feat(frontend): better UI for big modals (#2805)
# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
Antoine Dewez
GitHub
parent
e0736d4d01
commit
80a9304187
@ -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 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = ({
|
||||
<motion.div
|
||||
{...handleModalContentAnimation(size, !!unforceWhite)}
|
||||
>
|
||||
<Dialog.Title
|
||||
className="m-0 text-2xl font-bold"
|
||||
data-testid="modal-title"
|
||||
>
|
||||
<Dialog.Title className={styles.title}>
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
<Dialog.Description
|
||||
className="opacity-50"
|
||||
data-testid="modal-description"
|
||||
>
|
||||
<Dialog.Description className={styles.subtitle}>
|
||||
{desc}
|
||||
</Dialog.Description>
|
||||
{children}
|
||||
@ -126,7 +120,12 @@ export const Modal = ({
|
||||
className={styles.close_button_wrapper}
|
||||
aria-label="Close"
|
||||
>
|
||||
<MdClose />
|
||||
<Icon
|
||||
name="close"
|
||||
color="black"
|
||||
size="normal"
|
||||
handleHover={true}
|
||||
/>
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
)}
|
||||
|
||||
@ -16,6 +16,10 @@
|
||||
background-color: var(--background-0);
|
||||
height: fit-content;
|
||||
|
||||
&.important {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user