fix selector and imput search style

EyeSeeTea · Jun 28, 2024 · 8f16245 · 8f16245
1 parent 6814e18
commit 8f16245
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-27T12:51:45.020Z\n"
-"PO-Revision-Date: 2024-06-27T12:51:45.020Z\n"
+"POT-Creation-Date: 2024-06-28T07:18:27.936Z\n"
+"PO-Revision-Date: 2024-06-28T07:18:27.936Z\n"
 
 msgid "Add new option"
 msgstr ""
@@ -35,6 +35,9 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Filter"
+msgstr ""
+
 msgid "Incident Management Team Builder"
 msgstr ""
 

diff --git a/i18n/es.po b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-06-27T12:51:45.020Z\n"
+"POT-Creation-Date: 2024-06-28T07:18:27.936Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -35,6 +35,9 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Filter"
+msgstr ""
+
 msgid "Incident Management Team Builder"
 msgstr ""
 

diff --git a/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx b/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import _ from "lodash";
 import {
     Table,
@@ -12,6 +12,7 @@ import styled from "styled-components";
 import { SearchInput } from "../../search-input/SearchInput";
 import { Selector } from "../../selector/Selector";
 import { Maybe } from "../../../../utils/ts-utils";
+import i18n from "../../../../utils/i18n";
 
 export type TableColumn = {
     value: string;
@@ -162,19 +163,21 @@ export const PerformanceOverviewTable: React.FC<PerformanceOverviewTableProps> =
         return (
             <React.Fragment>
                 <Container>
-                    <StyledSelector
-                        id="filter"
-                        selected={filterValue}
-                        options={[...columns]}
-                        onChange={(value: string) => {
-                            setFilterValue(value);
-                            console.log(value);
-                        }}
-                    />
-                    <StyledSearchInput
-                        value={searchTerm}
-                        onChange={value => setSearchTerm(value)}
-                    />
+                    <StyledSelectorWrapper>
+                        <Selector
+                            id="filter"
+                            selected={filterValue}
+                            placeholder={i18n.t("Filter")}
+                            options={[...columns]}
+                            onChange={(value: string) => {
+                                setFilterValue(value);
+                                console.log(value);
+                            }}
+                        />
+                    </StyledSelectorWrapper>
+                    <StyledSearchInputWrapper>
+                        <SearchInput value={searchTerm} onChange={value => setSearchTerm(value)} />
+                    </StyledSearchInputWrapper>
                 </Container>
                 <StyledTableContainer>
                     <Table size="small">
@@ -260,18 +263,15 @@ const Container = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-block-end: 1rem;
-    margin-right: auto;
+    margin-bottom: 1rem;
+    width: 100%;
 `;
 
-const StyledSelector = styled(Selector)`
-    max-width: 10rem;
-    width: 100px;
-    height: 100%;
+const Wrapper = styled.div<{ width: string }>`
+    width: ${({ width }) => width};
+    max-width: ${({ width }) => width};
 `;
 
-const StyledSearchInput = styled(SearchInput)`
-    max-width: 19rem;
-    width: 100px;
-    height: 100%;
-`;
+const StyledSelectorWrapper = styled(Wrapper).attrs({ width: "10rem" })``;
+
+const StyledSearchInputWrapper = styled(Wrapper).attrs({ width: "19rem" })``;