Skip to content

Commit

Permalink
(PC-32277)[PRO] fix: better-written styles on Income and its subcompo…
Browse files Browse the repository at this point in the history 
…nents
  • Loading branch information
@asaez-pass
asaez-pass committed Oct 21, 2024
1 parent ecad854 commit faa637e
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 139 deletions.
171 changes: 87 additions & 84 deletions pro/src/pages/Reimbursements/Income/Income.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,106 @@
@use "styles/variables/_size.scss" as size;
@use "styles/mixins/_rem.scss" as rem;

.income-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-grey-semi-dark);
text-align: center;

.icon {
margin-bottom: rem.torem(32px);
}
}

.income-filters {
display: flex;
flex-flow: row wrap;
margin-bottom: rem.torem(20px);
row-gap: rem.torem(10px);

@media (min-width: size.$tablet) {
margin-bottom: rem.torem(12px);
}
}

.income-filters-divider {
display: none;

@media (min-width: size.$tablet) {
display: block;
margin: rem.torem(31.75px) rem.torem(24px) 0 0;
width: rem.torem(1px);
height: rem.torem(30px);
background: var(--color-grey-semi-dark);
}
}

.income-year-filters {
display: flex;
flex-flow: row wrap;
flex-direction: row;
gap: rem.torem(8px);
.income {
&-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-grey-semi-dark);
text-align: center;

@media (width >= 634px) {
height: rem.torem(66.75px);
align-items: end;
&-icon {
margin-bottom: rem.torem(32px);
}
}

li button {
&-filters {
display: flex;
justify-content: center;
align-items: center;
background: none;
cursor: pointer;
padding: rem.torem(10px);
color: var(--color-black);
border: solid rem.torem(1px) var(--color-grey-dark);
border-radius: rem.torem(4px);
}
flex-flow: row wrap;
margin-bottom: rem.torem(20px);
row-gap: rem.torem(10px);

li button:hover, li button:focus {
outline: rem.torem(1px) solid var(--color-primary);
}
@media (min-width: size.$tablet) {
margin-bottom: rem.torem(12px);
}

.active-year button {
@include fonts.button;
&-divider {
display: none;

border-color: var(--color-black);
@media (min-width: size.$tablet) {
display: block;
margin: rem.torem(31.75px) 0 0 rem.torem(24px);
width: rem.torem(1px);
height: rem.torem(30px);
background: var(--color-grey-semi-dark);
}
}

&::before {
content: '';
display: block;
width: rem.torem(8px);
height: rem.torem(8px);
background-color: var(--color-secondary-light);
border-radius: 50%;
margin-right: rem.torem(8px);
&-by-year {
display: flex;
flex-flow: row wrap;
flex-direction: row;
gap: rem.torem(8px);

@media (width >= 634px) {
height: rem.torem(66.75px);
margin-left: rem.torem(24px);
align-items: end;
}

&-button {
display: flex;
justify-content: center;
align-items: center;
background: none;
cursor: pointer;
padding: rem.torem(10px);
color: var(--color-black);
border: solid rem.torem(1px) var(--color-grey-dark);
border-radius: rem.torem(4px);

&:hover, &:focus {
outline: rem.torem(1px) solid var(--color-primary);
}

&-active {
@include fonts.button;

border-color: var(--color-black);

&::before {
content: '';
display: block;
width: rem.torem(8px);
height: rem.torem(8px);
background-color: var(--color-secondary-light);
border-radius: 50%;
margin-right: rem.torem(8px);
}
}
}
}
}
}

.income-no-data {
display: flex;
flex-direction: column;
align-items: center;
&-no-data {
display: flex;
flex-direction: column;
align-items: center;

.icon {
margin-bottom: rem.torem(20px);
}
&-icon {
margin-bottom: rem.torem(20px);
}

.text-with-link {
display: flex;
margin-top: rem.torem(10px);
flex-wrap: wrap;
justify-content: center;
}
&-text-with-link {
display: flex;
margin-top: rem.torem(10px);
flex-wrap: wrap;
justify-content: center;

.link {
margin: 0 rem.torem(10px);
&-buttonlink {
margin: 0 rem.torem(10px);
}
}
}
}
20 changes: 11 additions & 9 deletions pro/src/pages/Reimbursements/Income/Income.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import classnames from 'classnames'
import isEqual from 'lodash.isequal'
import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
Expand Down Expand Up @@ -113,7 +114,7 @@ export const Income = () => {
return (
<div className={styles['income-error']}>
<SvgIcon
className={styles['icon']}
className={styles['income-error-icon']}
src={strokePageNotFoundIcon}
viewBox="0 0 130 100"
alt=""
Expand Down Expand Up @@ -142,20 +143,21 @@ export const Income = () => {
</>
)}
<ul
className={styles['income-year-filters']}
className={styles['income-filters-by-year']}
aria-label="Filtrage par année"
>
{years.map((year) => (
<li
key={year}
className={year === activeYear ? styles['active-year'] : ''}
>
<li key={year}>
<button
type="button"
onClick={() => setActiveYear(year)}
aria-label={`Afficher les revenus de l'année ${year}`}
aria-controls="income-results"
aria-current={year === activeYear}
className={classnames(styles['income-filters-by-year-button'], {
[styles['income-filters-by-year-button-active']]:
year === activeYear,
})}
>
{year}
</button>
Expand All @@ -178,19 +180,19 @@ export const Income = () => {
) : (
<div className={styles['income-no-data']}>
<SvgIcon
className={styles['icon']}
className={styles['income-no-data-icon']}
src={strokeBookingHoldIcon}
alt=""
width="128"
/>
Vous n’avez aucune réservation sur cette période.
<div className={styles['text-with-link']}>
<div className={styles['income-no-data-text-with-link']}>
Découvrez nos
<ButtonLink
isExternal
opensInNewTab
to="https://passcultureapp.notion.site/pass-Culture-Documentation-323b1a0ec309406192d772e7d803fbd0"
className={styles['link']}
className={styles['income-no-data-text-with-link-buttonlink']}
onClick={() =>
logEvent(Events.CLICKED_BEST_PRACTICES_STUDIES, {
from: location.pathname,
Expand Down
58 changes: 25 additions & 33 deletions pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,33 @@
@media (min-width: size.$tablet) {
min-width: rem.torem(300px);
}
}

.income-results-block-title {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
margin-bottom: rem.torem(10px);
}

.income-results-block-tooltip {
margin-left: rem.torem(10px);
min-height: auto;
border: 0;
padding: 0;
background: none;

svg {
color: var(--color-primary) !important;
&-title {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
margin-bottom: rem.torem(10px);
}

&:hover {
&-tooltip {
margin-left: rem.torem(10px);
min-height: auto;
border: 0;
padding: 0;
background: none;
}
}

.income-results-block-tooltip-content {
top: calc(100% - rem.torem(10px));
}
&-content {
top: calc(100% - rem.torem(10px));
}
}

.income-results-block-number {
@include fonts.bold;
&-number {
@include fonts.bold;

font-size: rem.torem(21px);
text-align: left;
font-size: rem.torem(21px);
text-align: left;
}
}

.income-results-box {
Expand All @@ -53,10 +45,10 @@
&:first-child {
margin-bottom: rem.torem(24px);
}
}

.income-results-subbox {
display: flex;
flex-flow: row wrap;
row-gap: rem.torem(20px);
&-subbox {
display: flex;
flex-flow: row wrap;
row-gap: rem.torem(20px);
}
}
4 changes: 3 additions & 1 deletion pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import fullHelpIcon from 'icons/full-help.svg'
import { BoxRounded } from 'ui-kit/BoxRounded/BoxRounded'
import { Button } from 'ui-kit/Button/Button'
import { ButtonVariant } from 'ui-kit/Button/types'

import { IncomeType, IncomeResults } from '../types'

Expand Down Expand Up @@ -29,6 +30,7 @@ const IncomeResultsSubBox = ({ title, number, help }: IncomeSubBoxProps) => {
iconAlt="À propos"
type="button"
hasTooltip
variant={ButtonVariant.SECONDARY}
>
{help}
</Button>
Expand Down Expand Up @@ -70,7 +72,7 @@ export const IncomeResultsBox = ({ type, income }: IncomeResultsBoxProps) => {
help={totalHelp}
/>
{shouldDisplayIncomeDetails && (
<div className={styles['income-results-subbox']}>
<div className={styles['income-results-box-subbox']}>
{income.individual && (
<IncomeResultsSubBox
title="Part individuelle"
Expand Down
19 changes: 9 additions & 10 deletions pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
@use "styles/mixins/_rem.scss" as rem;
@use "styles/variables/_size.scss" as size;

.income-venue-selector {
.income-venue-select-autocomplete {
max-width: rem.torem(300px);
margin-right: rem.torem(24px);
}

ul {
width: calc(100vw - rem.torem(24px) * 2);
.income-venue-selected-tags {
width: calc(100vw - rem.torem(24px) * 2);

@media (min-width: size.$mobile) {
width: calc(100vw - (size.$main-content-padding) * 2)
}
@media (min-width: size.$mobile) {
width: calc(100vw - (size.$main-content-padding) * 2)
}

@media (min-width: size.$laptop) {
width: calc(100vw - (size.$main-content-padding * 2) - 16.75rem)
}
@media (min-width: size.$laptop) {
width: calc(100vw - (size.$main-content-padding * 2) - 16.75rem)
}
}
3 changes: 2 additions & 1 deletion pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const IncomeVenueSelector = ({
return (
<FormikProvider value={formik}>
<SelectAutocomplete
className={styles['income-venue-selector']}
className={styles['income-venue-select-autocomplete']}
selectedValuesTagsClassName={styles['income-venue-selected-tags']}
name="selectedVenues"
label="Partenaire(s) sélectionné(s)"
options={venues}
Expand Down
Loading

0 comments on commit faa637e

Please sign in to comment.