add list filter collections

src/shared/components/modal/modal.module.css

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
     margin-bottom: var(--theme-spacing-md);
-    background: var(--theme-colors-background);
+    background: none;
     border-radius: 0;
 }
 
@@ -14,14 +14,16 @@
 }
 
 .content {
-    padding: var(--theme-spacing-md);
+    padding: var(--theme-spacing-sm);
     overflow: hidden;
     background: var(--theme-colors-background);
     border: 2px solid var(--theme-colors-border);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
+    filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
 }
 
 .close {
     position: absolute;
-    top: var(--theme-spacing-md);
     right: var(--theme-spacing-md);
 }

src/shared/components/modal/modal.tsx

@@ -54,7 +54,7 @@ export const Modal = ({ children, classNames, handlers, ...rest }: ModalProps) =
                 backgroundOpacity: 0.5,
                 blur: 1,
             }}
-            radius="xl"
+            radius="md"
             scrollAreaComponent={ScrollArea}
             transitionProps={{
                 duration: 300,