Update Search bar styles

beda-software · Dec 2, 2024 · 2d4ace6 · 2d4ace6
1 parent 35cd4dd
commit 2d4ace6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/src/components/SearchBar/SearchBar.styles.ts b/src/components/SearchBar/SearchBar.styles.ts
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
@@ -1,27 +1,27 @@
 import { Trans } from '@lingui/macro';
-import { Button, Row } from 'antd';
+import { Button } from 'antd';
 
-import { S } from './SearchBar.styles';
 import { SearchBarColumn } from './SearchBarColumn';
+import { S } from './styles';
 import { SearchBarData } from './types';
 
 export function SearchBar(props: SearchBarData) {
     const { columnsFilterValues, onChangeColumnFilter, onResetFilters } = props;
 
     return (
         <S.Container>
-            <Row gutter={[32, 16]}>
+            <S.LeftColumn>
                 {columnsFilterValues.map((columnFilterValue) => (
                     <SearchBarColumn
                         key={`search-bar-column-${columnFilterValue.column.id}`}
                         columnFilterValue={columnFilterValue}
                         onChange={onChangeColumnFilter}
                     />
                 ))}
-            </Row>
+            </S.LeftColumn>
 
             <Button onClick={onResetFilters}>
-                <Trans>Reset</Trans>
+                <Trans>Clear filters</Trans>
             </Button>
         </S.Container>
     );

diff --git a/src/components/SearchBar/styles.ts b/src/components/SearchBar/styles.ts
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const S = {
+    Container: styled.div`
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+
+        .ant-input-search,
+        .ant-picker,
+        .react-select__control {
+            width: 270px;
+        }
+    `,
+    LeftColumn: styled.div`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px 8px;
+    `,
+};
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
@@ -32,6 +32,11 @@ export const S = {
             color: ${({ theme }) => theme.antdTheme?.colorTextPlaceholder};
         }
 
+        .react-select__loading-indicator {
+            justify-content: center;
+            align-items: center;
+        }
+
         .react-select__placeholder {
             margin: 0;
             color: ${({ theme }) => theme.antdTheme?.colorTextDisabled};
@@ -40,6 +45,10 @@ export const S = {
         .react-select__input-container {
             margin: 0;
             padding: 0;
+
+            input {
+                color: ${({ theme }) => theme.antdTheme?.colorText} !important;
+            }
         }
 
         .react-select__indicator-separator {