From 3b4543e3bfe201cb587298d079fd33ccdb1b2c91 Mon Sep 17 00:00:00 2001
From: Andrea Saez <andrea.saez@passculture.app>
Date: Fri, 6 Dec 2024 16:03:11 +0100
Subject: [PATCH] (PC-33445)[PRO] feat: align status input with other filters
 in indiv. offer list

---
 .../IndividualOffersSearchFilters.module.scss | 46 -------------------
 .../IndividualOffersSearchFilters.tsx         | 26 +++++------
 2 files changed, 12 insertions(+), 60 deletions(-)

diff --git a/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.module.scss b/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.module.scss
index 064890a61e2..95fc66726b9 100644
--- a/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.module.scss
+++ b/pro/src/pages/IndividualOffers/IndividualOffersContainer/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/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.tsx b/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.tsx
index e8513c93305..2d101fdbf13 100644
--- a/pro/src/pages/IndividualOffers/IndividualOffersContainer/components/IndividualOffersSearchFilters/IndividualOffersSearchFilters.tsx
+++ b/pro/src/pages/IndividualOffers/IndividualOffersContainer/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)}