From 2bce73eec73d6f795bd983cf2ebfc54e38981390 Mon Sep 17 00:00:00 2001 From: Praveen K B Date: Mon, 23 Dec 2024 16:09:35 +0530 Subject: [PATCH] fix: Fixed input and dropdown styles --- src/components/Header/Dropdown.tsx | 6 +- .../Header/styles/LogQuery.module.css | 33 ++-- src/components/Misc/DeleteOrResetModal.tsx | 8 +- .../Misc/styles/DeleteOrResetModal.module.css | 4 + src/pages/AccessManagement/PrivilegeTR.tsx | 3 + src/pages/AccessManagement/RoleTR.tsx | 1 + src/pages/AccessManagement/Roles.tsx | 5 + src/pages/AccessManagement/Users.tsx | 2 + .../styles/AccessManagement.module.css | 159 ++++++++++-------- src/pages/Dashboards/CreateDashboardModal.tsx | 5 +- src/pages/Dashboards/CreateTileForm.tsx | 13 +- src/pages/Dashboards/Dashboard.tsx | 2 +- .../styles/CreateDashboardModal.module.css | 26 ++- .../styles/DashboardView.module.css | 42 ++--- src/pages/Dashboards/styles/Form.module.css | 90 ++++++---- src/pages/Home/CreateStreamModal.tsx | 26 ++- src/pages/Home/index.tsx | 1 + .../Home/styles/CreateStreamModal.module.css | 48 ++++-- src/pages/Home/styles/Home.module.css | 56 +++--- src/pages/Login/index.tsx | 1 + src/pages/Login/styles/Login.module.css | 18 +- src/pages/Stream/Views/Explore/JSONView.tsx | 1 + .../Stream/Views/Explore/LogsViewConfig.tsx | 8 +- src/pages/Stream/Views/Manage/Settings.tsx | 4 +- .../Views/Manage/UpdateTimePartitionLimit.tsx | 1 + .../components/Querier/FilterQueryBuilder.tsx | 10 +- .../components/Querier/QueryCodeEditor.tsx | 1 + .../components/Querier/SaveFilterModal.tsx | 3 + .../styles/SavedFiltersModalStyles.module.css | 28 ++- src/pages/Stream/styles/Column.module.css | 117 ++++++------- src/pages/Stream/styles/JSONView.module.css | 3 + .../Stream/styles/LogsViewConfig.module.css | 40 +++-- src/pages/Stream/styles/Management.module.css | 6 +- src/pages/Stream/styles/Querier.module.css | 12 ++ src/pages/Stream/styles/QueryCode.module.css | 6 +- 35 files changed, 496 insertions(+), 293 deletions(-) diff --git a/src/components/Header/Dropdown.tsx b/src/components/Header/Dropdown.tsx index 01a3a944..e1845ac1 100644 --- a/src/components/Header/Dropdown.tsx +++ b/src/components/Header/Dropdown.tsx @@ -23,7 +23,11 @@ const Dropdown: FC = (props) => { onChange={onChange} allowDeselect={false} value={value} - classNames={{ option: classes.dropdownOption, input: classes.dropdownBtn }} + classNames={{ + option: classes.dropdownOption, + input: classes.dropdownBtn, + description: classes.dropdownDescription, + }} /> ); }; diff --git a/src/components/Header/styles/LogQuery.module.css b/src/components/Header/styles/LogQuery.module.css index 8daf263d..93f8b16b 100644 --- a/src/components/Header/styles/LogQuery.module.css +++ b/src/components/Header/styles/LogQuery.module.css @@ -16,7 +16,7 @@ background: #fff; padding: 0; width: 36px; - color: #211F1F; + color: #211f1f; border: 1px #e9ecef solid; border-radius: rem(8px); @@ -26,12 +26,12 @@ } .refreshNowBtn:hover { - background-color: #E0E0E0; + background-color: #e0e0e0; } .streamButton { background: #fff; - color: #211F1F; + color: #211f1f; border: 1px #e9ecef solid; border-radius: rem(8px); } @@ -49,7 +49,7 @@ } .intervalbtn:hover { - background-color: #E0E0E0; + background-color: #e0e0e0; } .homeIcon { @@ -97,7 +97,6 @@ background: #424242; font-weight: 600; color: #fff; - } .customRangeContainer { @@ -158,7 +157,7 @@ background-color: white; padding: 6px 12px; margin-right: 0.625rem; - color: #211F1F; + color: #211f1f; border: 1px #e9ecef solid; } @@ -177,7 +176,7 @@ } .timeRangeBTn:hover { - background-color: #E0E0E0; + background-color: #e0e0e0; color: black; } @@ -187,10 +186,16 @@ } .dropdownOption { - color: #211F1F; + color: #211f1f; font-size: var(--mantine-font-size-md); } +.dropdownDescription { + font-size: 12px; + font-weight: 500; + color: var(--mantine-color-gray-6); +} + .liveTailFilterContainer { display: flex; gap: 12px; @@ -210,11 +215,11 @@ } .customTimeRangeApplyBtn { - background: #545BEB; + background: #545beb; color: white; &:hover { - background: #FC466B; + background: #fc466b; } } @@ -263,8 +268,6 @@ white-space: nowrap; } - - .modeContainer { width: 5rem; height: 100%; @@ -301,7 +304,7 @@ overflow: hidden; border-radius: rem(8px); align-items: center; - height: 1.6rem + height: 1.6rem; } .timeRangeCtrlIcon { @@ -310,7 +313,7 @@ justify-content: center; &:hover { - background-color: #E0E0E0; + background-color: #e0e0e0; color: black; } @@ -350,4 +353,4 @@ background-color: var(--mantine-color-gray-5); color: white; border-radius: 0.15rem; -} \ No newline at end of file +} diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 686f0def..29b9886a 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -98,7 +98,13 @@ const DeleteOrResetModal = ({ Please type {`"${confirmationText}"`} to confirm {type === 'delete' ? 'deletion' : 'reset'}. - + )} diff --git a/src/components/Misc/styles/DeleteOrResetModal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css index d50dc802..2f1938f5 100644 --- a/src/components/Misc/styles/DeleteOrResetModal.module.css +++ b/src/components/Misc/styles/DeleteOrResetModal.module.css @@ -35,3 +35,7 @@ align-items: center; justify-content: flex-end; } + +.inputField { + border-radius: rem(8px); +} diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 7934c442..19ca009c 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -321,6 +321,7 @@ const PrivilegeTR: FC = (props) => { onChange={(value) => { setSelectedPrivilege(value ?? ''); }} + classNames={{ input: classes.selectInput, description: classes.selectDescription }} value={selectedPrivilege} nothingFoundMessage="No options" /> @@ -340,6 +341,7 @@ const PrivilegeTR: FC = (props) => { onDropdownOpen={() => setStreamSearchValue('')} data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []} searchable + classNames={{ input: classes.selectInput, description: classes.selectDescription }} label="Select a stream to assign" required /> @@ -348,6 +350,7 @@ const PrivilegeTR: FC = (props) => { type="text" placeholder={'Please enter the Tag.'} label="Tag" + classNames={{ input: styles.inputField }} onChange={(e) => { setTagInput(e.target.value); }} diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index b1b19fb7..4d7bd3ed 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -283,6 +283,7 @@ const RoleTR: FC = (props) => { onChange={(value) => { setSelectedRole(value ?? ''); }} + classNames={{ input: styles.selectInput, description: styles.selectDescription }} nothingFoundMessage="No roles found" value={selectedRole} searchValue={roleSearchValue} diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx index 127c2b67..95669b5a 100644 --- a/src/pages/AccessManagement/Roles.tsx +++ b/src/pages/AccessManagement/Roles.tsx @@ -220,6 +220,7 @@ const Roles: FC = () => { onChange={(value) => { setInputDefaultRole(value ?? ''); }} + classNames={{ input: classes.selectInput, description: classes.selectDescription }} value={inputDefaultRole} nothingFoundMessage="No options" searchable @@ -259,6 +260,7 @@ const Roles: FC = () => { onChange={(e) => { setCreateRoleInput(e.target.value); }} + classNames={{ input: classes.inputField }} value={createRoleInput} required /> @@ -270,6 +272,7 @@ const Roles: FC = () => { setSelectedPrivilege(value ?? ''); }} value={selectedPrivilege} + classNames={{ input: classes.selectInput, description: classes.selectDescription }} nothingFoundMessage="No options" required /> @@ -282,6 +285,7 @@ const Roles: FC = () => { onChange={(value) => { setSelectedStream(value ?? ''); }} + classNames={{ input: classes.selectInput, description: classes.selectDescription }} value={SelectedStream} searchValue={streamSearchValue} onSearchChange={(value) => setStreamSearchValue(value)} @@ -300,6 +304,7 @@ const Roles: FC = () => { onChange={(e) => { setTagInput(e.target.value); }} + classNames={{ input: classes.inputField }} /> ) : ( '' diff --git a/src/pages/AccessManagement/Users.tsx b/src/pages/AccessManagement/Users.tsx index 70c7a6ea..87c6c21f 100644 --- a/src/pages/AccessManagement/Users.tsx +++ b/src/pages/AccessManagement/Users.tsx @@ -150,6 +150,7 @@ const Users: FC = () => { onChange={(e) => { setCreateUserInput(e.target.value); }} + classNames={{ input: classes.inputField }} value={createUserInput} required /> @@ -165,6 +166,7 @@ const Users: FC = () => { onDropdownClose={() => setRoleSearchValue(selectedRole)} onDropdownOpen={() => setRoleSearchValue('')} data={getRolesData?.data || []} + classNames={{ input: classes.selectInput, description: classes.selectDescription }} searchable label="Select a role to assign" required diff --git a/src/pages/AccessManagement/styles/AccessManagement.module.css b/src/pages/AccessManagement/styles/AccessManagement.module.css index 8dab7a43..19adb10f 100644 --- a/src/pages/AccessManagement/styles/AccessManagement.module.css +++ b/src/pages/AccessManagement/styles/AccessManagement.module.css @@ -6,129 +6,124 @@ margin: 1rem; border-radius: 0.5rem; border: 1px solid var(--mantine-color-gray-2); - } - - .container:first-of-type { +} + +.container:first-of-type { margin-right: 0; - } - - .header { +} + +.header { justify-content: space-between; align-items: center; border-bottom: 1px solid var(--mantine-color-gray-1); flex-direction: row; padding: 1rem; - } - - .createBtn { +} + +.createBtn { height: 34px; padding: 0 15px; margin-inline-end: 0.625rem; color: #777777; border-color: #828282; - } - - .createBtn:disabled, - .createBtn:disabled:hover { +} + +.createBtn:disabled, +.createBtn:disabled:hover { background-color: var(--mantine-color-gray-4); color: white; - } - +} - .tableContainer { - /* height: calc(100% - 70px); */ - } - - .tableStyle { +.tableStyle { overflow: scroll; width: 100%; height: 100%; padding: 0; - } - - .theadStyle { +} + +.theadStyle { position: sticky; z-index: 1; top: 0; height: 50px; background-color: white; text-align: left; - } - - .theadStyle tr th { +} + +.theadStyle tr th { padding: 0.625rem; - } - - .trStyle:nth-child(odd) { +} + +.trStyle:nth-child(odd) { background-color: #ececec80; - } - - .trStyle td { +} + +.trStyle td { height: 100%; vertical-align: middle; padding: 0.625rem; - } - - .passwordPrims .mantine-Tooltip-tooltip { +} + +.passwordPrims .mantine-Tooltip-tooltip { background-color: #757575; color: #ffffff; - } - - .passwordPrims .mantine-Prism-code { +} + +.passwordPrims .mantine-Prism-code { background-color: white !important; border: 1px solid #e0e0e0 !important; - } - - .modalStyle .mantine-Paper-root { +} + +.modalStyle .mantine-Paper-root { overflow-y: inherit; - } - - .modalStyle .mantine-Modal-header { +} + +.modalStyle .mantine-Modal-header { border-radius: 8px 8px 0px 0px; background-color: #f5f5f5; - } - - .modalStyle .mantine-Modal-title { +} + +.modalStyle .mantine-Modal-title { font-weight: bold; - } - - .modalStyle .mantine-Modal-body { +} + +.modalStyle .mantine-Modal-body { padding-top: 1rem !important; - } - - .passwordText { +} + +.passwordText { font-weight: 500; font-size: 0.875rem; - } - - .modalCancelBtn { +} + +.modalCancelBtn { border-color: #ced4da; color: #000000; - } - - .modalActionBtn { - background-color: #545BEB; +} + +.modalActionBtn { + background-color: #545beb; color: white; - } - - .modalActionBtn:disabled, - .modalActionBtn:disabled:hover { +} + +.modalActionBtn:disabled, +.modalActionBtn:disabled:hover { background-color: var(--mantine-color-gray-4); color: white; - } +} - .actionBtn { +.actionBtn { height: 24px; width: 24px; padding: 0; margin-inline-end: 0.625rem; color: #777777; border-color: #828282; - } - - .actionBtn:hover { - color: #545BEB; - } +} + +.actionBtn:hover { + color: #545beb; +} .createUserBtn { display: flex; @@ -136,16 +131,32 @@ align-items: center; height: auto; background-color: white; - color: #211F1F; + color: #211f1f; border: 1px #e9ecef solid; margin-right: 0.625rem; border-radius: rem(8px); &:hover { background-color: var(--mantine-color-gray-0); - color: #211F1F;; + color: #211f1f; } } .tableHeader { font-weight: 600; -} \ No newline at end of file +} + +.inputField { + border-radius: rem(8px); +} + +.selectDescription { + font-size: 12px; + font-weight: 500; + color: var(--mantine-color-gray-6); +} + +.selectInput { + cursor: pointer; + border: 1px var(--mantine-color-gray-2) solid; + border-radius: rem(8px); +} diff --git a/src/pages/Dashboards/CreateDashboardModal.tsx b/src/pages/Dashboards/CreateDashboardModal.tsx index 07b571de..e39b9855 100644 --- a/src/pages/Dashboards/CreateDashboardModal.tsx +++ b/src/pages/Dashboards/CreateDashboardModal.tsx @@ -113,13 +113,13 @@ const CreateDashboardModal = () => { { Time Range { title={Duplicate Tile}> - + diff --git a/src/pages/Dashboards/styles/CreateDashboardModal.module.css b/src/pages/Dashboards/styles/CreateDashboardModal.module.css index cf0671b1..9896da0a 100644 --- a/src/pages/Dashboards/styles/CreateDashboardModal.module.css +++ b/src/pages/Dashboards/styles/CreateDashboardModal.module.css @@ -1,9 +1,25 @@ .modalTitle { - font-size: 0.9rem; - font-weight: 600; + font-size: 0.9rem; + font-weight: 600; } .fieldTitle { - font-weight: 500; - font-size: 0.7rem; -} \ No newline at end of file + font-weight: 500; + font-size: 0.7rem; +} + +.inputField { + border-radius: rem(8px); +} + +.selectDescription { + font-size: 12px; + font-weight: 500; + color: var(--mantine-color-gray-6); +} + +.selectInput { + cursor: pointer; + border: 1px var(--mantine-color-gray-2) solid; + border-radius: rem(8px); +} diff --git a/src/pages/Dashboards/styles/DashboardView.module.css b/src/pages/Dashboards/styles/DashboardView.module.css index 84f5148d..197a28fe 100644 --- a/src/pages/Dashboards/styles/DashboardView.module.css +++ b/src/pages/Dashboards/styles/DashboardView.module.css @@ -1,36 +1,40 @@ .noDashboardsContainer { - /* border: 1px solid var(--mantine-color-gray-1); */ - flex: 1; - margin: 4rem; - border-radius: 0.25rem; - align-items: center; - justify-content: center; - padding: 0 20rem; + /* border: 1px solid var(--mantine-color-gray-1); */ + flex: 1; + margin: 4rem; + border-radius: 0.25rem; + align-items: center; + justify-content: center; + padding: 0 20rem; } .dashboardIconContainer { - width: fit-content; - background-color: var(--mantine-color-brandPrimary-0); - border-radius: 50%; - padding: 0.5rem; - align-self: center; + width: fit-content; + background-color: var(--mantine-color-brandPrimary-0); + border-radius: 50%; + padding: 0.5rem; + align-self: center; } .tilesViewContainer { - margin-bottom: 1rem; + margin-bottom: 1rem; } .dashboardIcon { - color: var(--mantine-color-brandPrimary-4); + color: var(--mantine-color-brandPrimary-4); } .noDashboardsViewTitle { - font-weight: 500; - font-size: 0.9rem; - text-align: center; + font-weight: 500; + font-size: 0.9rem; + text-align: center; } .noDashboardsViewDescription { - font-size: 0.8rem; - text-align: center; + font-size: 0.8rem; + text-align: center; +} + +.inputField { + border-radius: rem(8px); } diff --git a/src/pages/Dashboards/styles/Form.module.css b/src/pages/Dashboards/styles/Form.module.css index 2e1e7370..d21aaca0 100644 --- a/src/pages/Dashboards/styles/Form.module.css +++ b/src/pages/Dashboards/styles/Form.module.css @@ -1,77 +1,93 @@ .sectionContainer { - height: 50%; - border-radius: 0.4rem; - border: 1px solid var(--mantine-color-gray-2); + height: 50%; + border-radius: 0.4rem; + border: 1px solid var(--mantine-color-gray-2); } .sectionHeader { - border-bottom: 1px solid var(--mantine-color-gray-2); - padding: 0.75rem; - flex-direction: row; - align-items: center; - justify-content: space-between; - height: 3rem; + border-bottom: 1px solid var(--mantine-color-gray-2); + padding: 0.75rem; + flex-direction: row; + align-items: center; + justify-content: space-between; + height: 3rem; } .configContainer { - height: 100%; + height: 100%; } .fieldTitle { - font-weight: 500; - font-size: 0.7rem; + font-weight: 500; + font-size: 0.7rem; } .queryCodeContainer { - height: 22rem; - border: 1px solid var(--mantine-color-gray-2); - border-radius: 0.2rem; - padding: 1rem; + height: 22rem; + border: 1px solid var(--mantine-color-gray-2); + border-radius: 0.2rem; + padding: 1rem; } .schemaListContainer { - width: 30%; - overflow: hidden; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - border: 1px solid var(--mantine-color-gray-1); + width: 30%; + overflow: hidden; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + border: 1px solid var(--mantine-color-gray-1); } .schemaTableHeader { - background-color: var(--mantine-color-gray-1); - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - padding: 0.5rem; + background-color: var(--mantine-color-gray-1); + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + padding: 0.5rem; } .schemaList { - overflow: scroll; - padding: 0.5rem 0rem; + overflow: scroll; + padding: 0.5rem 0rem; } .schemaListItem { - padding: 0 0.5rem; - border-bottom: 1px solid var(--mantine-color-gray-1); + padding: 0 0.5rem; + border-bottom: 1px solid var(--mantine-color-gray-1); } .schemaItemText { - font-size: 0.7rem; + font-size: 0.7rem; } .schemaItemDataType { - font-size: 0.7rem; + font-size: 0.7rem; } .warningText { - color: var(--mantine-color-gray-5); - font-size: 0.75rem; + color: var(--mantine-color-gray-5); + font-size: 0.75rem; } .warningIcon { - color: var(--mantine-color-gray-5); + color: var(--mantine-color-gray-5); } .arrowLeftIcon { - color: var(--mantine-color-gray-7); - cursor: pointer; -} \ No newline at end of file + color: var(--mantine-color-gray-7); + cursor: pointer; +} + +.inputField { + border-radius: rem(8px); +} + +.selectDescription { + font-size: 12px; + font-weight: 500; + color: var(--mantine-color-gray-6); +} + +.selectInput { + cursor: pointer; + border: 1px var(--mantine-color-gray-2) solid; + border-radius: rem(8px); +} diff --git a/src/pages/Home/CreateStreamModal.tsx b/src/pages/Home/CreateStreamModal.tsx index 1c1539c7..2a4f1b73 100644 --- a/src/pages/Home/CreateStreamModal.tsx +++ b/src/pages/Home/CreateStreamModal.tsx @@ -129,8 +129,21 @@ const FieldRow = (props: { const rmvBtnProps = _.isFunction(props.onRemove) ? { onClick: props.onRemove } : { color: 'gray' }; return ( - - @@ -176,7 +189,12 @@ const SchemaTypeField = (props: { inputProps: GetInputPropsReturnType }) => { Choose dynamic or static schema - ); }; @@ -562,7 +580,7 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => { { key="search-stream" value={searchTerm} rightSection={shortcutKeyElement} + classNames={{ input: homeStyles.searchBar }} rightSectionWidth={80} onChange={(event) => { setSearchTerm(event.target.value); diff --git a/src/pages/Home/styles/CreateStreamModal.module.css b/src/pages/Home/styles/CreateStreamModal.module.css index b5e10db7..3f0cf8a6 100644 --- a/src/pages/Home/styles/CreateStreamModal.module.css +++ b/src/pages/Home/styles/CreateStreamModal.module.css @@ -1,32 +1,48 @@ .aboutTitle { - font-size: 0.8rem; - font-weight: 500; + font-size: 0.8rem; + font-weight: 500; } .fieldTitle { - font-size: var(--mantine-font-size-md); - font-weight: 500; + font-size: var(--mantine-font-size-md); + font-weight: 500; } .fieldDescription { - font-size: var(--mantine-font-size-sm); - color: var(--mantine-color-gray-6); + font-size: var(--mantine-font-size-sm); + color: var(--mantine-color-gray-6); } .fieldsSectionContainer { - border: 1px solid var(--mantine-color-gray-4); - padding: var(--mantine-spacing-md); - padding-bottom: 0; - border-radius: 0.2rem; + border: 1px solid var(--mantine-color-gray-4); + padding: var(--mantine-spacing-md); + padding-bottom: 0; + border-radius: 0.2rem; } .fieldsContainer { - max-height: 10rem; - overflow: scroll; - padding-bottom: var(--mantine-spacing-md); + max-height: 10rem; + overflow: scroll; + padding-bottom: var(--mantine-spacing-md); } .infoTooltipIcon { - color: var(--mantine-color-gray-5); - cursor: pointer; -} \ No newline at end of file + color: var(--mantine-color-gray-5); + cursor: pointer; +} + +.inputField { + border-radius: rem(8px); +} + +.selectDescription { + font-size: 12px; + font-weight: 500; + color: var(--mantine-color-gray-6); +} + +.selectInput { + cursor: pointer; + border: 1px var(--mantine-color-gray-2) solid; + border-radius: rem(8px); +} diff --git a/src/pages/Home/styles/Home.module.css b/src/pages/Home/styles/Home.module.css index 049580bf..2408eca0 100644 --- a/src/pages/Home/styles/Home.module.css +++ b/src/pages/Home/styles/Home.module.css @@ -1,39 +1,43 @@ .container { - flex: 1; - display: flex; - position: relative; - flex-direction: column; + flex: 1; + display: flex; + position: relative; + flex-direction: column; } .noDataViewContainer { - height: 100%; - flex-direction: column; - justify-content: center; - align-items: center; - display: flex; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + display: flex; } .messageStyle { - margin-top: 1rem; - color: #D4D4D4; + margin-top: 1rem; + color: #d4d4d4; } .btnStyle { - margin-top: 1rem; - color: #FFFFFF; - background: #545BEB; + margin-top: 1rem; + color: #ffffff; + background: #545beb; } .createStreamButton { - background-color: white; - color: #211F1F; - border: 1px #e9ecef solid; - margin-right: 0.625rem; - border-radius: rem(8px); - text-transform: capitalize; - height: 1.65rem; - &:hover { - background-color: #E0E0E0; - color: black; - } -} \ No newline at end of file + background-color: white; + color: #211f1f; + border: 1px #e9ecef solid; + margin-right: 0.625rem; + border-radius: rem(8px); + text-transform: capitalize; + height: 1.65rem; + &:hover { + background-color: #e0e0e0; + color: black; + } +} + +.searchBar { + border-radius: rem(8px); +} diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 9c2183a4..53337244 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -58,6 +58,7 @@ const Login: FC = () => { )} { { label: 'Schema Fields', value: 'schema' }, ]} value={configViewType} + classNames={{ input: classes.streamInput, description: classes.streamSelectDescription }} allowDeselect={false} onChange={(value) => onChange(value)} style={{ width: '100%', height: '100%' }} @@ -73,7 +74,12 @@ const SearchBar = (props: { const { placeholder, value, onChangeHandler } = props; return ( - + ); }; diff --git a/src/pages/Stream/Views/Manage/Settings.tsx b/src/pages/Stream/Views/Manage/Settings.tsx index b7096348..d291851e 100644 --- a/src/pages/Stream/Views/Manage/Settings.tsx +++ b/src/pages/Stream/Views/Manage/Settings.tsx @@ -77,7 +77,7 @@ const RetentionForm = (props: { updateRetentionConfig: ({ config }: { config: an style={{ width: '50%' }} /> onChange(e)} diff --git a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx index fe5fcff2..6a7b93e1 100644 --- a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx +++ b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx @@ -99,8 +99,16 @@ const RuleView = (props: RuleViewType) => { const isError = !isDisabled ? value === '' : false; return ( - +