review dropdown lolo

src/front/Components/DesignSystem/Dropdown/classes.module.scss

@@ -1,11 +1,15 @@
 @import "@Themes/constants.scss";
 
 .root {
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+	.container {
 		cursor: pointer;
-	height: 56px;
 
 		display: flex;
 		align-items: center;
+		height: 56px;
 
 		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
 		gap: var(--spacing-2, 16px);
@@ -15,6 +19,12 @@
 		background: var(--dropdown-input-background, #fff);
 
 		.content {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 24px;
+			.value {
 				width: 100%;
 				display: flex;
 				padding: 0px var(--spacing-2, 16px);
@@ -22,6 +32,14 @@
 				flex: 1 0 0;
 			}
 
+			svg {
+				width: 24px;
+				height: 24px;
+				cursor: pointer;
+				stroke: var(--button-icon-button-default-default);
+			}
+		}
+
 		&:hover {
 			border-color: var(--dropdown-input-border-hovered);
 		}
@@ -43,3 +61,4 @@
 			pointer-events: none;
 		}
 	}
+}

src/front/Components/DesignSystem/Dropdown/index.tsx

@@ -3,7 +3,6 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 
-import IconButton from "../IconButton";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 import DropdownMenu from "./DropdownMenu";
@@ -11,6 +10,7 @@ import { IOption } from "./DropdownMenu/DropdownOption";
 
 type IProps = {
 	options: IOption[];
+	label?: string;
 	placeholder?: string;
 	disabled?: boolean;
 	onSelect?: (option: IOption) => void;
@@ -36,9 +36,15 @@ export default function Dropdown(props: IProps) {
 
 	return (
 		<DropdownMenu options={options} openable={openable} onSelect={handleOnSelect} selectedOption={selectedOption}>
+			<div className={classes["root"]}>
+				{props.label && (
+					<Typography className={classes["label"]} typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.CONTRAST_DEFAULT}>
+						{props.label}
+					</Typography>
+				)}
 				<div
 					className={classNames([
-					classes["root"],
+						classes["container"],
 						openable.isOpen && classes["open"],
 						disabled && classes["disabled"],
 						!!selectedOption && classes["active"],
@@ -46,12 +52,14 @@ export default function Dropdown(props: IProps) {
 					onClick={openable.toggle}>
 					<div className={classes["content"]}>
 						<Typography
-						typo={ETypo.TEXT_MD_REGULAR}
+							className={classes["value"]}
+							typo={!!selectedOption ? ETypo.TEXT_MD_SEMIBOLD : ETypo.TEXT_MD_REGULAR}
 							color={!!selectedOption ? ETypoColor.DROPDOWN_CONTRAST_ACTIVE : ETypoColor.DROPDOWN_CONTRAST_DEFAULT}>
 							{getLabel(selectedOption) ?? placeholder}
 						</Typography>
+						<ChevronDownIcon />
+					</div>
 				</div>
-				<IconButton icon={<ChevronDownIcon />} />
 			</div>
 		</DropdownMenu>
 	);

src/front/Components/DesignSystem/SearchBar/classes.module.scss

@@ -41,6 +41,7 @@
 
 	.input-container {
 		display: flex;
+		align-items: center;
 		flex: 1;
 		gap: 8px;
 		padding: 0px var(--spacing-2, 16px);

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -127,6 +127,7 @@ export default function DesignSystem() {
 							},
 						]}
 						placeholder="Placeholder"
+						label="Label"
 					/>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Navigation latérale</Typography>
 					<SearchBlockList