(PC-33445)[PRO] feat: align status input with other filters in indiv.…

… offer list
pass-culture · Dec 11, 2024 · 3b4543e · 3b4543e
1 parent 1627a2b
commit 3b4543e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 60 deletions.
diff --git a/...tainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.module.scss b/...tainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.module.scss
@@ -8,34 +8,6 @@ $status-filter-margin-top: rem.torem(24px);
   margin-bottom: rem.torem(32px);
 }
 
-.offerer-filter {
-  @include fonts.caption;
-
-  align-items: center;
-  background-color: var(--color-accent-light);
-  border: none;
-  border-radius: rem.torem(24px);
-  display: flex;
-  height: rem.torem(32px);
-  justify-content: space-between;
-  margin-bottom: rem.torem(16px);
-  padding: rem.torem(5px) rem.torem(15px);
-  width: max-content;
-
-  button {
-    align-items: center;
-    background: none;
-    border: none;
-    display: flex;
-    margin-left: rem.torem(8px);
-
-    img {
-      height: rem.torem(14px);
-      width: rem.torem(14px);
-    }
-  }
-}
-
 .search-separator {
   align-items: center;
   display: flex;
@@ -61,19 +33,6 @@ $status-filter-margin-top: rem.torem(24px);
   color: var(--color-black);
 }
 
-.status-filter {
-  margin-top: rem.torem(24px);
-  width: fit-content;
-  margin-bottom: 0;
-}
-
-.status-filter-label {
-  margin-top: $status-filter-margin-top;
-  display: flex;
-  align-items: center;
-  gap: rem.torem(8px);
-}
-
 .filter-creation-mode {
   min-width: rem.torem(140px);
 }
@@ -83,11 +42,6 @@ $status-filter-margin-top: rem.torem(24px);
 }
 
 @media (min-width: size.$laptop) {
-  .status-filter {
-    margin-top: 0;
-    margin-bottom: rem.torem(8px);
-  }
-
   .reset-filters-row {
     flex-direction: row;
     align-items: center;

diff --git a/...ffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.tsx b/...ffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.tsx
@@ -209,20 +209,6 @@ export const IndividualOffersSearchFilters = ({
               value={selectedFilters.creationMode}
             />
           </FieldLayout>
-
-          <fieldset>
-            <legend>Période de l’évènement</legend>
-
-            <PeriodSelector
-              onBeginningDateChange={onBeginningDateChange}
-              onEndingDateChange={onEndingDateChange}
-              isDisabled={disableAllFilters}
-              periodBeginningDate={selectedFilters.periodBeginningDate}
-              periodEndingDate={selectedFilters.periodEndingDate}
-            />
-          </fieldset>
-        </FormLayout.Row>
-        <FormLayout.Row inline className={styles['reset-filters-row']}>
           <FieldLayout
             label="Statut"
             name="status"
@@ -237,6 +223,18 @@ export const IndividualOffersSearchFilters = ({
               options={statusFilterOptions}
             />
           </FieldLayout>
+          <fieldset>
+            <legend>Période de l’évènement</legend>
+            <PeriodSelector
+              onBeginningDateChange={onBeginningDateChange}
+              onEndingDateChange={onEndingDateChange}
+              isDisabled={disableAllFilters}
+              periodBeginningDate={selectedFilters.periodBeginningDate}
+              periodEndingDate={selectedFilters.periodEndingDate}
+            />
+          </fieldset>
+        </FormLayout.Row>
+        <FormLayout.Row inline className={styles['reset-filters-row']}>
           <Button
             icon={fullRefreshIcon}
             disabled={!hasSearchFilters(selectedFilters)}