Moved components to a new filters folder

components/filters/FilterBar/index.module.scss

@@ -3,6 +3,7 @@
   background: var(--bar-bg);
   border-radius: $card-corner;
   box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: row;
   gap: $unit-2x;
@@ -27,14 +28,20 @@
   }
 
   .filters {
-    display: flex;
+    display: grid;
+    grid-template-columns:
+      minmax($unit-20x, 1fr)
+      minmax($unit-20x, 1fr)
+      minmax($unit-20x, 1fr)
+      0.5fr;
     box-sizing: border-box;
     flex-direction: row;
     gap: $unit;
     width: auto;
 
     @include breakpoint(tablet) {
-      flex-direction: column;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
       width: 100%;
     }
   }
@@ -58,27 +65,4 @@
       font-size: $font-small;
     }
   }
-
-  .UserInfo {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    gap: $unit * 1.5;
-
-    img {
-      $diameter: $unit * 6;
-      border-radius: calc($diameter / 2);
-      height: $diameter;
-      width: $diameter;
-
-      &.gran {
-        background-color: #cee7fe;
-      }
-
-      &.djeeta {
-        background-color: #ffe1fe;
-      }
-    }
-  }
 }

components/filters/FilterBar/index.tsx

@@ -4,7 +4,7 @@ import { getCookie } from 'cookies-next'
 import classNames from 'classnames'
 import equals from 'fast-deep-equal'
 
-import FilterModal from '~components/FilterModal'
+import FilterModal from '~components/filters/FilterModal'
 import RaidCombobox from '~components/raids/RaidCombobox'
 import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'

components/filters/FilterModal/index.module.scss

@@ -13,3 +13,14 @@
     padding-right: 0;
   }
 }
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+  padding: 0 $unit-4x;
+
+  @include breakpoint(phone) {
+    gap: $unit-4x;
+  }
+}

components/filters/FilterModal/index.tsx

@@ -3,12 +3,9 @@ import { getCookie, setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 
-import {
-  Dialog,
-  DialogTrigger,
-  DialogClose,
-  DialogTitle,
-} from '~components/common/Dialog'
+import { Dialog, DialogTrigger } from '~components/common/Dialog'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 import DialogContent from '~components/common/DialogContent'
 
 import Button from '~components/common/Button'
@@ -20,7 +17,6 @@ import SelectItem from '~components/common/SelectItem'
 
 import type { DialogProps } from '@radix-ui/react-dialog'
 
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
 
 interface Props extends DialogProps {
@@ -389,20 +385,8 @@ const FilterModal = (props: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader" ref={headerRef}>
-          <div className="DialogTop">
-            <DialogTitle className="DialogTitle">
-              {t('modals.filters.title')}
-            </DialogTitle>
-          </div>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
-
-        <div className="Fields">
+        <DialogHeader title={t('modals.filters.title')} />
+        <div className={styles.fields}>
           {chargeAttackField()}
           {fullAutoField()}
           {autoGuardField()}
@@ -415,21 +399,23 @@ const FilterModal = (props: Props) => {
           {userQualityField()}
           {originalOnlyField()}
         </div>
-        <div className="DialogFooter" ref={footerRef}>
-          <div className="Left"></div>
-          <div className="Right Buttons Spaced">
+        <DialogFooter
+          ref={footerRef}
+          rightElements={[
             <Button
               blended={true}
+              key="clear"
               text={t('modals.filters.buttons.clear')}
               onClick={resetFilters}
-            />
+            />,
             <Button
-              contained={true}
+              bound={true}
+              key="confirm"
               text={t('modals.filters.buttons.confirm')}
               onClick={saveFilters}
-            />
-          </div>
-        </div>
+            />,
+          ]}
+        />
       </DialogContent>
     </Dialog>
   )