diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss index 1ca8bd7529..7db18f400e 100644 --- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss +++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss @@ -2,6 +2,10 @@ display: flex; gap: 4px; + .ant-select-dropdown { + padding: 0px; + } + .show-all-filters { .content { .rc-virtual-list-holder { @@ -259,3 +263,110 @@ } } } + +.lightMode { + .query-builder-search-v2 { + .content { + .operator-for { + .operator-for-text { + color: var(--bg-ink-200); + } + + .operator-for-value { + background: rgba(255, 255, 255, 0.1); + color: var(--bg-ink-200); + } + } + + .value-for { + .value-for-text { + color: var(--bg-ink-200); + } + + .value-for-value { + background: rgba(255, 255, 255, 0.1); + color: var(--bg-ink-400); + } + } + .example-queries { + cursor: default; + .heading { + color: var(--bg-slate-50); + } + + .query-container { + .example-query { + background: var(--bg-vanilla-200); + color: var(--bg-ink-400); + } + + .example-query:hover { + color: var(--bg-ink-100); + } + } + } + } + + .keyboard-shortcuts { + border: 1px solid var(--bg-vanilla-300); + background: var(--bg-vanilla-200); + + .icons { + border-top: 1.143px solid var(--bg-ink-200); + border-right: 1.143px solid var(--bg-ink-200); + border-bottom: 2.286px solid var(--bg-ink-200); + border-left: 1.143px solid var(--bg-ink-200); + background: var(--bg-vanilla-300); + } + + .keyboard-text { + color: var(--bg-ink-400); + } + + .navigate { + border-right: 1px solid #1d212d; + } + + .show-all-filter-items { + border-left: 1px solid #1d212d; + } + } + + .qb-search-bar-tokenised-tags { + .ant-tag { + border: 1px solid var(--bg-slate-100); + background: var(--bg-vanilla-300); + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); + + .ant-typography { + color: var(--bg-ink-100); + } + + &.resource { + border: 1px solid rgba(242, 71, 105, 0.2); + + .ant-typography { + color: var(--bg-sakura-400); + background: rgba(245, 108, 135, 0.1); + } + + .ant-tag-close-icon { + background: rgba(245, 108, 135, 0.1); + } + } + &.tag { + border: 1px solid rgba(189, 153, 121, 0.2); + + .ant-typography { + color: var(--bg-sienna-400); + background: rgba(189, 153, 121, 0.1); + } + + .ant-tag-close-icon { + background: rgba(189, 153, 121, 0.1); + } + } + } + } + } +} diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss index bd7ad36a5a..9fb2f50e55 100644 --- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss +++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss @@ -168,3 +168,59 @@ } } } + +.lightMode { + .text { + color: var(--bg-ink-400); + } + + .option { + .container { + display: flex; + align-items: center; + justify-content: space-between; + + .right-section { + .data-type { + background: var(--bg-vanilla-300); + } + } + .option-meta-data-container { + display: flex; + gap: 8px; + } + } + + .container-without-tag { + .left { + .OPERATOR { + color: var(--bg-ink-400); + } + + .VALUE { + color: var(--bg-ink-400); + } + } + + .right { + .data-type { + background: var(--bg-vanilla-300); + } + } + } + } + .option:hover { + .container { + .left-section { + .value { + color: var(--bg-ink-100); + } + } + } + .container-without-tag { + .value { + color: var(--bg-ink-100); + } + } + } +}