Merge pull request #1631 from IFRCGo/fix/minor-styling

Minor styling fixes

Author: frozenhelium

app/src/components/domain/ActiveOperationMap/index.tsx

@@ -408,7 +408,7 @@ function ActiveOperationMap(props: Props) {
                         value={rawFilter.displacement}
                         onChange={setFilterField}
                     />
-                    <div>
+                    <div className={styles.clearButton}>
                         <Button
                             name={undefined}
                             onClick={handleClearFiltersButtonClick}

app/src/components/domain/ActiveOperationMap/styles.module.css

@@ -1,4 +1,9 @@
 .active-operation-map {
+    .clear-button {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
     .content {
         position: relative;
 

app/src/views/CountryOngoingActivitiesThreeWProjects/Filters/index.tsx

@@ -8,7 +8,6 @@ import {
     stringNameSelector,
     stringValueSelector,
 } from '@ifrc-go/ui/utils';
-import { _cs } from '@togglecorp/fujs';
 import { type EntriesAsList } from '@togglecorp/toggle-form';
 
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
@@ -17,7 +16,6 @@ import type { GoApiResponse } from '#utils/restRequest';
 import { useRequest } from '#utils/restRequest';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 type DistrictListItem = NonNullable<GoApiResponse<'/api/v2/district/'>['results']>[number];
 
@@ -35,7 +33,6 @@ function countrySocietyNameSelector(country: NationalSociety) {
 }
 
 interface Props {
-    className?: string;
     value: FilterValue;
     onChange: React.Dispatch<React.SetStateAction<FilterValue>>;
     disabled?: boolean;
@@ -44,7 +41,6 @@ interface Props {
 
 function Filters(props: Props) {
     const {
-        className,
         value,
         onChange,
         disabled,
@@ -83,7 +79,7 @@ function Filters(props: Props) {
     }, [onChange]);
 
     return (
-        <div className={_cs(styles.filters, className)}>
+        <>
             <MultiSelectInput
                 name="reporting_ns"
                 placeholder={strings.threeWFilterReportingNs}
@@ -144,7 +140,7 @@ function Filters(props: Props) {
                 onChange={handleInputChange}
                 disabled={disabled}
             />
-        </div>
+        </>
     );
 }
 

app/src/views/CountryOngoingActivitiesThreeWProjects/Filters/styles.module.css

@@ -6,14 +6,12 @@ import {
     stringLabelSelector,
     stringValueSelector,
 } from '@ifrc-go/ui/utils';
-import { _cs } from '@togglecorp/fujs';
 
 import NationalSocietyMultiSelectInput from '#components/domain/NationalSocietyMultiSelectInput';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import { useRequest } from '#utils/restRequest';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 export interface FilterValue {
     reporting_ns: number[];
@@ -23,15 +21,13 @@ export interface FilterValue {
 }
 
 interface Props {
-    className?: string;
     value: FilterValue;
     onChange: React.Dispatch<React.SetStateAction<FilterValue>>;
     disabled?: boolean;
 }
 
 function Filters(props: Props) {
     const {
-        className,
         value,
         onChange,
         disabled,
@@ -64,7 +60,7 @@ function Filters(props: Props) {
     }, [onChange]);
 
     return (
-        <div className={_cs(styles.filters, className)}>
+        <>
             <NationalSocietyMultiSelectInput
                 name="reporting_ns"
                 placeholder={strings.threeWFilterReportingNs}
@@ -102,7 +98,7 @@ function Filters(props: Props) {
                 onChange={handleInputChange}
                 disabled={disabled}
             />
-        </div>
+        </>
     );
 }