fix: remaining dark mode issues - light backgrounds and text colors

- Replace hardcoded light backgrounds (#EEF0FF, #FEE2E2, #f0f0ff, etc.)
  with rgba tints that work on both light and dark backgrounds
- Fix FilterButton text color to use theme.colors.neutral800
- Fix hover states to use theme.colors.neutral100
- Replace #F3F4F6 backgrounds with rgba(128,128,128,0.08)
- Fix QueryBuilder placeholder text to use theme.colors.neutral500

Author: Schero94

admin/src/components/AdvancedFilterButton.tsx

@@ -25,15 +25,15 @@ const FilterButton = styled.button<{ $isActive?: boolean }>`
   border: 1px solid ${props => props.$isActive ? '#4945FF' : 'rgba(128, 128, 128, 0.25)'};
   border-radius: 4px;
   background: ${props => props.$isActive 
-    ? '#EEF0FF' 
+    ? 'rgba(73, 69, 255, 0.08)' 
     : props.theme.colors.neutral0};
-  color: ${props => props.$isActive ? '#4945FF' : '#32324d'};
+  color: ${props => props.$isActive ? '#4945FF' : props.theme.colors.neutral800};
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
   
   &:hover {
-    background: ${props => props.$isActive ? '#E0E7FF' : '#f6f6f9'};
+    background: ${props => props.$isActive ? 'rgba(73, 69, 255, 0.12)' : props.theme.colors.neutral100};
     border-color: ${props => props.$isActive ? '#4945FF' : 'rgba(128, 128, 128, 0.3)'};
   }
   
@@ -57,13 +57,13 @@ const ClearButton = styled.button`
   padding: 0;
   border: 1px solid rgba(239, 68, 68, 0.3);
   border-radius: 4px;
-  background: #fef2f2;
+  background: rgba(239, 68, 68, 0.06);
   color: #dc2626;
   cursor: pointer;
   transition: all 0.15s ease;
   
   &:hover {
-    background: #fee2e2;
+    background: rgba(239, 68, 68, 0.12);
     border-color: rgba(239, 68, 68, 0.4);
   }
   

admin/src/components/CreateViewModal.tsx

@@ -49,7 +49,7 @@ const IconButton = styled.button<{ $isSelected?: boolean }>`
   
   &:hover {
     border-color: #4945FF;
-    background: #EEF0FF;
+    background: rgba(73, 69, 255, 0.08);
     
     svg {
       color: #4945FF;

admin/src/components/CustomSelect.tsx

@@ -94,7 +94,7 @@ const DropdownItem = styled.button<{ $isSelected: boolean }>`
   
   &:focus {
     outline: none;
-    background: #f0f0ff;
+    background: rgba(73, 69, 255, 0.06);
   }
   
   @media (max-width: 768px) {

admin/src/components/QueryBuilder.tsx

@@ -258,7 +258,7 @@ const DesktopControls = styled.div`
 const DragHandle = styled.div`
   cursor: grab;
   padding: 8px 4px;
-  color: #9CA3AF;
+  color: ${(p) => p.theme.colors.neutral500};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -362,7 +362,7 @@ const ValueInput = styled.input`
   }
 
   &::placeholder {
-    color: #9CA3AF;
+    color: ${(p) => p.theme.colors.neutral500};
   }
 
   /* Mobile */
@@ -375,7 +375,7 @@ const ValueInput = styled.input`
 `;
 
 const DeleteButton = styled.button`
-  background: #FEE2E2;
+  background: rgba(239, 68, 68, 0.12);
   border: none;
   flex-shrink: 0;
   border-radius: 8px;

admin/src/components/RelationFieldSelector.tsx

@@ -116,7 +116,7 @@ const ClearButton = styled.button`
   width: 24px;
   height: 24px;
   border: none;
-  background: #FEE2E2;
+  background: rgba(239, 68, 68, 0.12);
   color: #DC2626;
   border-radius: 6px;
   cursor: pointer;
@@ -386,7 +386,7 @@ const RelationFieldSelector: React.FC<Props> = ({
             <MobileNestedLabel>Nested field:</MobileNestedLabel>
             <SelectWrapper $isNew={newLevel === 1} $level={1}>
               {loadingLevel === 1 ? (
-                <Box padding={3} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#F3F4F6', borderRadius: '8px', height: '40px', width: '100%' }}>
+                <Box padding={3} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(128, 128, 128, 0.08)', borderRadius: '8px', height: '40px', width: '100%' }}>
                   <Loader small /> Loading...
                 </Box>
               ) : (
@@ -416,7 +416,7 @@ const RelationFieldSelector: React.FC<Props> = ({
             <MobileNestedLabel>Deep nested:</MobileNestedLabel>
             <SelectWrapper $isNew={newLevel === 2} $level={2}>
               {loadingLevel === 2 ? (
-                <Box padding={3} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#F3F4F6', borderRadius: '8px', height: '40px', width: '100%' }}>
+                <Box padding={3} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(128, 128, 128, 0.08)', borderRadius: '8px', height: '40px', width: '100%' }}>
                   <Loader small /> Loading...
                 </Box>
               ) : (

admin/src/components/StrapiStyleFilterModal.tsx

@@ -97,13 +97,13 @@ const DeleteButton = styled.button`
   width: 32px;
   height: 32px;
   border: none;
-  background: #fef2f2;
+  background: rgba(239, 68, 68, 0.06);
   color: #dc2626;
   border-radius: 4px;
   cursor: pointer;
   flex-shrink: 0;
   &:hover {
-    background: #fee2e2;
+    background: rgba(239, 68, 68, 0.12);
   }
   svg {
     width: 14px;
@@ -126,7 +126,7 @@ const AddButton = styled.button`
   transition: all 0.15s ease;
   &:hover {
     border-color: #4945ff;
-    background: #f0f0ff;
+    background: rgba(73, 69, 255, 0.06);
   }
 `;
 

admin/src/components/ViewsListPopover.tsx

@@ -69,7 +69,7 @@ const BookmarksList = styled.div`
   }
   
   &::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: rgba(128, 128, 128, 0.12);
     border-radius: 3px;
   }
   
@@ -213,7 +213,7 @@ const ViewAllLink = styled.button`
   transition: all 0.15s ease;
   
   &:hover {
-    background: #eef0ff;
+    background: rgba(73, 69, 255, 0.08);
   }
   
   svg {

admin/src/pages/UpgradePage.tsx

@@ -169,7 +169,7 @@ const FeatureIcon = styled(Box)<FeatureIconProps>`
     background: rgba(34, 197, 94, 0.15);
     svg { color: #16A34A; }
   ` : `
-    background: #FEE2E2;
+    background: rgba(239, 68, 68, 0.12);
     svg { color: #DC2626; }
   `}
 `;