diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx
index 1e919eb93..d21fd2288 100644
--- a/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx
+++ b/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx
@@ -252,6 +252,15 @@ export const StyledRightColumn = styled.div`
flex: 1;
`;
+export const StyledTitleAccordion = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ > h2 {
+ margin-bottom: 0;
+ }
+`;
+
export const StyledCVPageContentInformations = styled.div`
background-color: #ffffffe5;
padding: 30px;
@@ -427,7 +436,6 @@ export const StyledCVPageContentFooter = styled.div`
`;
export const StyledChevronIcon = styled(Icon)`
- position: absolute;
top: 30px;
right: 30px;
svg {
diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.tsx
index 2066789f0..d5c369a27 100644
--- a/src/components/partials/CV/PageCvContent/PageCVContent.tsx
+++ b/src/components/partials/CV/PageCvContent/PageCVContent.tsx
@@ -34,6 +34,7 @@ import {
StyledCVExperienceDate,
StyledCVExperienceDescription,
StyledCVExperienceDateMobile,
+ StyledTitleAccordion,
} from 'src/components/partials/CV/PageCvContent/PageCVContent.styles';
import { Button, Icon } from 'src/components/utils';
import { CarouselSwiper } from 'src/components/utils/CarouselSwiper';
@@ -231,11 +232,10 @@ export const PageCVContent = ({
!isDesktop ? 'mobile' : ''
}`}
>
- {!isDesktop && }
{isDesktop ? (
) : (
- {
setOpenedPanel({
...openedPanel,
@@ -244,7 +244,8 @@ export const PageCVContent = ({
}}
>
-
+
+
)}
{cv.contracts && cv.contracts.length > 0 && (
@@ -338,10 +339,7 @@ export const PageCVContent = ({
!isDesktop ? 'mobile' : ''
}`}
>
- {!isDesktop && }
-
- {/* {isDesktop ?: */}
- {
setOpenedPanel({
...openedPanel,
@@ -350,7 +348,8 @@ export const PageCVContent = ({
}}
>
-
+
+
{cv.experiences?.map((experience) => {
return (
@@ -423,8 +422,7 @@ export const PageCVContent = ({
!isDesktop ? 'mobile' : ''
}`}
>
- {!isDesktop && }
- {
setOpenedPanel({
...openedPanel,
@@ -433,7 +431,8 @@ export const PageCVContent = ({
}}
>
-
+
+
{cv.formations.map((formation) => {
return (
@@ -507,11 +506,10 @@ export const PageCVContent = ({
!isDesktop ? 'mobile' : ''
}`}
>
- {!isDesktop && }
{isDesktop ? (
) : (
- {
setOpenedPanel({
...openedPanel,
@@ -520,7 +518,8 @@ export const PageCVContent = ({
}}
>
-
+
+
)}
{cv?.passions?.map(({ name }) => {
diff --git a/src/components/utils/Inputs/Inputs.styles.ts b/src/components/utils/Inputs/Inputs.styles.ts
index 4450129fd..5eedbd65c 100644
--- a/src/components/utils/Inputs/Inputs.styles.ts
+++ b/src/components/utils/Inputs/Inputs.styles.ts
@@ -64,9 +64,16 @@ export const StyledAnnotationsErrorMessage = styled(FieldErrorMessage)`
bottom: 0 !important;
`;
+export const StyledLimitContainer = styled.div`
+ display: flex;
+ > :first-child {
+ margin-right: 5px;
+ }
+`;
+
export const StyledLimit = styled.div`
color: ${({ warning }) => {
- return warning ? COLORS.noRed : COLORS.darkGray;
+ return warning ? COLORS.darkOrange : COLORS.darkGray;
}};
font-size: 12px;
line-height: 12px;
diff --git a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
index 8aff6656a..0517a5f08 100644
--- a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
+++ b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
@@ -5,6 +5,7 @@ import {
StyledAnnotationsErrorMessage,
StyledInputLabel,
StyledLimit,
+ StyledLimitContainer,
} from '../../Inputs.styles';
import { CommonInputProps } from '../../Inputs.types';
import {
@@ -109,7 +110,8 @@ export function SelectCreatable({
max={maxItems}
maxLength={maxChar}
isValidNewOption={(inputValue) => {
- return maxChar ? inputValue.length < maxChar : true;
+ const isEmpty = inputValue.trim().length === 0;
+ return maxChar ? inputValue.length < maxChar && !isEmpty : !isEmpty;
}}
/>
@@ -117,18 +119,20 @@ export function SelectCreatable({
- {maxChar && (
-
-
- Chaque élément ne doit pas dépasser {maxChar} caractères.
-
-
- )}
- {maxItems && (
-
- {remainingItems} élément(s) restant(s)
-
- )}
+
+ {maxChar && (
+
+
+ Chaque élément ne doit pas dépasser {maxChar} caractères.
+
+
+ )}
+ {maxItems && (
+
+ {remainingItems} élément(s) restant(s)
+
+ )}
+
);
diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx
index aa28618e8..36d058cdc 100644
--- a/src/components/utils/Inputs/TextArea/TextArea.tsx
+++ b/src/components/utils/Inputs/TextArea/TextArea.tsx
@@ -42,16 +42,12 @@ export function TextArea({
}: TextAreaProps) {
const isMobile = useIsMobile();
- const { textAreaRef, remainingLines, textAreaWidth } = useLineLimit(
- value,
- name,
- onChange,
- maxLines?.lines
- );
+ const { textAreaRef, remainingLines, maxLinesReached, textAreaWidth } =
+ useLineLimit(value, name, onChange, maxLines?.lines);
useEffect(() => {
if (!maxLines) return null;
- if (remainingLines <= 0) {
+ if (maxLinesReached) {
setIsMaxLinesReached(true);
} else {
setIsMaxLinesReached(false);
diff --git a/src/components/utils/Inputs/TextArea/useLineLimit.ts b/src/components/utils/Inputs/TextArea/useLineLimit.ts
index df07e5cb5..88ca697b9 100644
--- a/src/components/utils/Inputs/TextArea/useLineLimit.ts
+++ b/src/components/utils/Inputs/TextArea/useLineLimit.ts
@@ -52,8 +52,9 @@ export function useLineLimit(
}
}, []);
- const remainingLines =
- maxLines - numberOfLines < 0 ? 0 : maxLines - numberOfLines;
+ const maxLinesReached = maxLines - numberOfLines < 0;
+
+ const remainingLines = maxLinesReached ? 0 : maxLines - numberOfLines;
useEffect(() => {
if (maxLines && ref && ref.current && value !== prevValue) {
@@ -118,5 +119,5 @@ export function useLineLimit(
}
}, [windowWidth]);
- return { remainingLines, textAreaRef: ref, textAreaWidth };
+ return { remainingLines, maxLinesReached, textAreaRef: ref, textAreaWidth };
}