diff --git a/kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap
index ca3219b8bd..4aee6b864c 100644
--- a/kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap
@@ -1,23 +1,223 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Search when placeholder is not provided matches the snapshot 1`] = `
-
+
+ .c1 {
+ position: absolute;
+ top: 50%;
+ line-height: 0;
+ z-index: 1;
+ left: 12px;
+ right: unset;
+ height: 11px;
+ width: 11px;
+ color: #454F54;
+}
+
+.c2 {
+ border: 1px #ABB5BA solid;
+ border-radius: 4px;
+ height: 32px;
+ width: 100%;
+ padding-left: 36px;
+ font-size: 14px;
+}
+
+.c2::-webkit-input-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2::-moz-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2:-ms-input-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2::placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2:hover {
+ border-color: #73848C;
+}
+
+.c2:focus {
+ outline: none;
+ border-color: #454F54;
+}
+
+.c2:focus::-webkit-input-placeholder {
+ color: transparent;
+}
+
+.c2:focus::-moz-placeholder {
+ color: transparent;
+}
+
+.c2:focus:-ms-input-placeholder {
+ color: transparent;
+}
+
+.c2:focus::placeholder {
+ color: transparent;
+}
+
+.c2:disabled {
+ color: #ABB5BA;
+ border-color: #E3E6E8;
+ cursor: not-allowed;
+}
+
+.c2:read-only {
+ color: #171A1C;
+ border: none;
+ background-color: #F1F2F3;
+ cursor: not-allowed;
+}
+
+.c2:-moz-read-only:focus::placeholder {
+ color: #ABB5BA;
+}
+
+.c2:read-only:focus::placeholder {
+ color: #ABB5BA;
+}
+
+.c0 {
+ position: relative;
+}
+
+
+
`;
exports[`Search when placeholder is provided matches the snapshot 1`] = `
-
+.c1 {
+ position: absolute;
+ top: 50%;
+ line-height: 0;
+ z-index: 1;
+ left: 12px;
+ right: unset;
+ height: 11px;
+ width: 11px;
+ color: #454F54;
+}
+
+.c2 {
+ border: 1px #ABB5BA solid;
+ border-radius: 4px;
+ height: 32px;
+ width: 100%;
+ padding-left: 36px;
+ font-size: 14px;
+}
+
+.c2::-webkit-input-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2::-moz-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2:-ms-input-placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2::placeholder {
+ color: #ABB5BA;
+ font-size: 14px;
+}
+
+.c2:hover {
+ border-color: #73848C;
+}
+
+.c2:focus {
+ outline: none;
+ border-color: #454F54;
+}
+
+.c2:focus::-webkit-input-placeholder {
+ color: transparent;
+}
+
+.c2:focus::-moz-placeholder {
+ color: transparent;
+}
+
+.c2:focus:-ms-input-placeholder {
+ color: transparent;
+}
+
+.c2:focus::placeholder {
+ color: transparent;
+}
+
+.c2:disabled {
+ color: #ABB5BA;
+ border-color: #E3E6E8;
+ cursor: not-allowed;
+}
+
+.c2:read-only {
+ color: #171A1C;
+ border: none;
+ background-color: #F1F2F3;
+ cursor: not-allowed;
+}
+
+.c2:-moz-read-only:focus::placeholder {
+ color: #ABB5BA;
+}
+
+.c2:read-only:focus::placeholder {
+ color: #ABB5BA;
+}
+
+.c0 {
+ position: relative;
+}
+
+
+
+
`;