mirror of
https://github.com/SigNoz/signoz.git
synced 2026-04-24 04:40:29 +01:00
Compare commits
2 Commits
e2e/alert_
...
chore/remo
| Author | SHA1 | Date | |
|---|---|---|---|
|
ee02d96114 | ||
|
|
c595506a09 |
1
.github/workflows/integrationci.yaml
vendored
1
.github/workflows/integrationci.yaml
vendored
@@ -39,7 +39,6 @@ jobs:
|
||||
matrix:
|
||||
suite:
|
||||
- alerts
|
||||
- alertmanager
|
||||
- callbackauthn
|
||||
- cloudintegrations
|
||||
- dashboard
|
||||
|
||||
@@ -277,23 +277,8 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
|
||||
|
||||
annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
|
||||
for name, value := range r.Annotations().Map() {
|
||||
// no need to expand custom templating annotations — they get expanded in the notifier layer
|
||||
if ruletypes.IsCustomTemplatingAnnotation(name) {
|
||||
annotations = append(annotations, ruletypes.Label{Name: name, Value: value})
|
||||
continue
|
||||
}
|
||||
annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
|
||||
}
|
||||
// Add values to be used in notifier layer for notification templates
|
||||
annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationValue, Value: value})
|
||||
annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationThresholdValue, Value: threshold})
|
||||
annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationCompareOp, Value: smpl.CompareOperator.Literal()})
|
||||
annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationMatchType, Value: smpl.MatchType.Literal()})
|
||||
|
||||
if smpl.IsRecovering {
|
||||
lb.Set(ruletypes.LabelIsRecovering, "true")
|
||||
}
|
||||
|
||||
if smpl.IsMissing {
|
||||
lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
|
||||
lb.Set(ruletypes.NoDataLabel, "true")
|
||||
|
||||
@@ -286,6 +286,8 @@
|
||||
// Prevents useStore.getState() - export standalone actions instead
|
||||
"signoz/no-navigator-clipboard": "error",
|
||||
// Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
|
||||
"signoz/no-raw-absolute-path": "warn",
|
||||
// Prevents window.open(path), window.location.origin + path, window.location.href = path
|
||||
"no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
@@ -597,8 +599,9 @@
|
||||
"rules": {
|
||||
"import/first": "off",
|
||||
// Should ignore due to mocks
|
||||
"signoz/no-navigator-clipboard": "off"
|
||||
// Tests can use navigator.clipboard directly
|
||||
"signoz/no-navigator-clipboard": "off",
|
||||
// Tests can use navigator.clipboard directly,
|
||||
"signoz/no-raw-absolute-path":"off"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// oxlint-disable-next-line typescript/no-require-imports
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="[[.BaseHref]]" />
|
||||
<meta
|
||||
http-equiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate, max-age: 0"
|
||||
@@ -59,7 +60,7 @@
|
||||
<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
|
||||
<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
|
||||
<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body data-theme="default">
|
||||
<script>
|
||||
@@ -136,7 +137,7 @@
|
||||
})(document, 'script');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="/css/uPlot.min.css" />
|
||||
<link rel="stylesheet" href="css/uPlot.min.css" />
|
||||
<script type="module" src="./src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
152
frontend/plugins/rules/no-raw-absolute-path.mjs
Normal file
152
frontend/plugins/rules/no-raw-absolute-path.mjs
Normal file
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* Rule: no-raw-absolute-path
|
||||
*
|
||||
* Catches patterns that break at runtime when the app is served from a
|
||||
* sub-path (e.g. /signoz/):
|
||||
*
|
||||
* 1. window.open(path, '_blank')
|
||||
* → use openInNewTab(path) which calls withBasePath internally
|
||||
*
|
||||
* 2. window.location.origin + path / `${window.location.origin}${path}`
|
||||
* → use getAbsoluteUrl(path)
|
||||
*
|
||||
* 3. frontendBaseUrl: window.location.origin (bare origin usage)
|
||||
* → use getBaseUrl() to include the base path
|
||||
*
|
||||
* 4. window.location.href = path
|
||||
* → use withBasePath(path) or navigate() for internal navigation
|
||||
*
|
||||
* External URLs (first arg starts with "http") are explicitly allowed.
|
||||
*/
|
||||
|
||||
function isOriginAccess(node) {
|
||||
return (
|
||||
node.type === 'MemberExpression' &&
|
||||
!node.computed &&
|
||||
node.property.name === 'origin' &&
|
||||
node.object.type === 'MemberExpression' &&
|
||||
!node.object.computed &&
|
||||
node.object.property.name === 'location' &&
|
||||
node.object.object.type === 'Identifier' &&
|
||||
node.object.object.name === 'window'
|
||||
);
|
||||
}
|
||||
|
||||
function isHrefAccess(node) {
|
||||
return (
|
||||
node.type === 'MemberExpression' &&
|
||||
!node.computed &&
|
||||
node.property.name === 'href' &&
|
||||
node.object.type === 'MemberExpression' &&
|
||||
!node.object.computed &&
|
||||
node.object.property.name === 'location' &&
|
||||
node.object.object.type === 'Identifier' &&
|
||||
node.object.object.name === 'window'
|
||||
);
|
||||
}
|
||||
|
||||
function isExternalUrl(node) {
|
||||
if (node.type === 'Literal' && typeof node.value === 'string') {
|
||||
return node.value.startsWith('http://') || node.value.startsWith('https://');
|
||||
}
|
||||
if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
|
||||
const raw = node.quasis[0].value.raw;
|
||||
return raw.startsWith('http://') || raw.startsWith('https://');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
|
||||
function isSafeHelperCall(node) {
|
||||
return (
|
||||
node.type === 'CallExpression' &&
|
||||
node.callee.type === 'Identifier' &&
|
||||
(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
meta: {
|
||||
type: 'suggestion',
|
||||
docs: {
|
||||
description:
|
||||
'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
|
||||
category: 'Base Path Safety',
|
||||
},
|
||||
schema: [],
|
||||
messages: {
|
||||
windowOpen:
|
||||
'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
|
||||
originConcat:
|
||||
'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
|
||||
originDirect:
|
||||
'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
|
||||
hrefAssign:
|
||||
'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
|
||||
},
|
||||
},
|
||||
|
||||
create(context) {
|
||||
return {
|
||||
// window.open(path, ...) — allow only external first-arg URLs
|
||||
CallExpression(node) {
|
||||
const { callee, arguments: args } = node;
|
||||
if (
|
||||
callee.type !== 'MemberExpression' ||
|
||||
callee.object.type !== 'Identifier' ||
|
||||
callee.object.name !== 'window' ||
|
||||
callee.property.name !== 'open'
|
||||
)
|
||||
{return;}
|
||||
if (args.length === 0) {return;}
|
||||
if (isExternalUrl(args[0])) {return;}
|
||||
if (isSafeHelperCall(args[0])) {return;}
|
||||
|
||||
context.report({ node, messageId: 'windowOpen' });
|
||||
},
|
||||
|
||||
// window.location.origin + path
|
||||
BinaryExpression(node) {
|
||||
if (node.operator !== '+') {return;}
|
||||
if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
|
||||
context.report({ node, messageId: 'originConcat' });
|
||||
}
|
||||
},
|
||||
|
||||
// `${window.location.origin}${path}`
|
||||
TemplateLiteral(node) {
|
||||
if (node.expressions.some(isOriginAccess)) {
|
||||
context.report({ node, messageId: 'originConcat' });
|
||||
}
|
||||
},
|
||||
|
||||
// window.location.origin used directly (not in concatenation)
|
||||
// Catches: frontendBaseUrl: window.location.origin
|
||||
MemberExpression(node) {
|
||||
if (!isOriginAccess(node)) {return;}
|
||||
|
||||
const parent = node.parent;
|
||||
// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
|
||||
if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
|
||||
// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
|
||||
if (parent.type === 'TemplateLiteral') {return;}
|
||||
|
||||
context.report({ node, messageId: 'originDirect' });
|
||||
},
|
||||
|
||||
// window.location.href = path
|
||||
AssignmentExpression(node) {
|
||||
if (node.operator !== '=') {return;}
|
||||
if (!isHrefAccess(node.left)) {return;}
|
||||
|
||||
// Allow external URLs
|
||||
if (isExternalUrl(node.right)) {return;}
|
||||
// Allow safe helper calls
|
||||
if (isSafeHelperCall(node.right)) {return;}
|
||||
|
||||
context.report({ node, messageId: 'hrefAssign' });
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -8,6 +8,7 @@
|
||||
import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
|
||||
import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
|
||||
import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
|
||||
import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
|
||||
|
||||
export default {
|
||||
meta: {
|
||||
@@ -17,5 +18,6 @@ export default {
|
||||
'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
|
||||
'no-navigator-clipboard': noNavigatorClipboard,
|
||||
'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
|
||||
'no-raw-absolute-path': noRawAbsolutePath,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
|
||||
import i18n from 'i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
import Backend from 'i18next-http-backend';
|
||||
import { getBasePath } from 'utils/basePath';
|
||||
|
||||
import cacheBursting from '../../i18n-translations-hash.json';
|
||||
|
||||
@@ -24,7 +25,7 @@ i18n
|
||||
const ns = namespace[0];
|
||||
const pathkey = `/${language}/${ns}`;
|
||||
const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
|
||||
return `/locales/${language}/${namespace}.json?h=${hash}`;
|
||||
return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
|
||||
},
|
||||
},
|
||||
react: {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
interceptorRejected,
|
||||
interceptorsRequestBasePath,
|
||||
interceptorsRequestResponse,
|
||||
interceptorsResponse,
|
||||
} from 'api';
|
||||
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
|
||||
return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
|
||||
};
|
||||
|
||||
generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
|
||||
generatedAPIAxiosInstance.interceptors.response.use(
|
||||
interceptorsResponse,
|
||||
|
||||
@@ -11,6 +11,7 @@ import axios, {
|
||||
import { ENVIRONMENT } from 'constants/env';
|
||||
import { Events } from 'constants/events';
|
||||
import { LOCALSTORAGE } from 'constants/localStorage';
|
||||
import { getBasePath } from 'utils/basePath';
|
||||
import { eventEmitter } from 'utils/getEventEmitter';
|
||||
|
||||
import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
|
||||
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
|
||||
return value;
|
||||
};
|
||||
|
||||
// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
|
||||
// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
|
||||
function prependBase(base: string, path: string): string {
|
||||
return path.startsWith(base) ? path : base + path.slice(1);
|
||||
}
|
||||
|
||||
// Prepends the runtime base path to outgoing requests so API calls work under
|
||||
// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
|
||||
// (dev baseURL is a full http:// URL, not an absolute path).
|
||||
export const interceptorsRequestBasePath = (
|
||||
value: InternalAxiosRequestConfig,
|
||||
): InternalAxiosRequestConfig => {
|
||||
const basePath = getBasePath();
|
||||
if (basePath === '/') {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (value.baseURL?.startsWith('/')) {
|
||||
// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
|
||||
value.baseURL = prependBase(basePath, value.baseURL);
|
||||
} else if (value.baseURL?.startsWith('http')) {
|
||||
// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
|
||||
const url = new URL(value.baseURL);
|
||||
url.pathname = prependBase(basePath, url.pathname);
|
||||
value.baseURL = url.toString();
|
||||
} else if (!value.baseURL && value.url?.startsWith('/')) {
|
||||
// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
|
||||
value.url = prependBase(basePath, value.url);
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
export const interceptorRejected = async (
|
||||
value: AxiosResponse<any>,
|
||||
): Promise<AxiosResponse<any>> => {
|
||||
@@ -133,6 +167,7 @@ const instance = axios.create({
|
||||
});
|
||||
|
||||
instance.interceptors.request.use(interceptorsRequestResponse);
|
||||
instance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
|
||||
|
||||
export const AxiosAlertManagerInstance = axios.create({
|
||||
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
|
||||
interceptorRejected,
|
||||
);
|
||||
ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
|
||||
ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
|
||||
// axios V3
|
||||
export const ApiV3Instance = axios.create({
|
||||
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
|
||||
interceptorRejected,
|
||||
);
|
||||
ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
|
||||
ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
//
|
||||
|
||||
// axios V4
|
||||
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
|
||||
interceptorRejected,
|
||||
);
|
||||
ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
|
||||
ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
//
|
||||
|
||||
// axios V5
|
||||
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
|
||||
interceptorRejected,
|
||||
);
|
||||
ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
|
||||
ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
//
|
||||
|
||||
// axios Base
|
||||
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
|
||||
interceptorRejectedBase,
|
||||
);
|
||||
LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
|
||||
LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
//
|
||||
|
||||
AxiosAlertManagerInstance.interceptors.response.use(
|
||||
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
|
||||
interceptorRejected,
|
||||
);
|
||||
AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
|
||||
AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
|
||||
|
||||
export { apiV1 };
|
||||
export default instance;
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: radial-gradient(circle, #fff 10%, transparent 0);
|
||||
background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
@@ -99,36 +99,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.auth-error-container {
|
||||
.error-content {
|
||||
&__error-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&__message-badge-label-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-shaking {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -87,23 +87,3 @@
|
||||
background: var(--l3-background);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.auth-footer-content {
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.auth-footer-icon {
|
||||
filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
|
||||
hue-rotate(192deg) brightness(80%) contrast(95%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.auth-footer-text {
|
||||
color: var(--text-neutral-light-200);
|
||||
}
|
||||
|
||||
.auth-footer-link-icon {
|
||||
color: var(--text-neutral-light-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,28 +143,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.bg-dot-pattern {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--l3-background) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
.auth-page-gradient {
|
||||
background: radial-gradient(
|
||||
ellipse at center top,
|
||||
color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.8;
|
||||
filter: blur(200px);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
filter: blur(300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,18 +238,7 @@
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.celery-task-graph-grid-container {
|
||||
.celery-task-graph-worker-count {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.configure-option-Info {
|
||||
border: 1px dashed var(--bg-robin-400);
|
||||
background-color: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
|
||||
import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
|
||||
import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
|
||||
import { GlobalReducer } from 'types/reducer/globalTime';
|
||||
import { withBasePath } from 'utils/basePath';
|
||||
|
||||
export interface NavigateToExplorerProps {
|
||||
filters: TagFilterItem[];
|
||||
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
|
||||
QueryParams.compositeQuery
|
||||
}=${JSONCompositeQuery}`;
|
||||
|
||||
window.open(newExplorerPath, sameTab ? '_self' : '_blank');
|
||||
window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
|
||||
},
|
||||
[
|
||||
prepareQuery,
|
||||
|
||||
@@ -77,11 +77,11 @@
|
||||
width: 280px;
|
||||
|
||||
&::placeholder {
|
||||
color: white;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
color: rgba($color: #ffffff, $alpha: 0.4);
|
||||
color: rgba($color: var(--l1-foreground), $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -113,42 +113,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.time-options-container {
|
||||
.time-options-item {
|
||||
&.active {
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.2);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeSelection-input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
padding-left: 0px !important;
|
||||
|
||||
input::placeholder {
|
||||
color: var(---bg-ink-300);
|
||||
}
|
||||
|
||||
input:focus::placeholder {
|
||||
color: rgba($color: #000000, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-time-popover__footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
padding: 8px 14px;
|
||||
@@ -300,34 +264,3 @@
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.timezone-container {
|
||||
.timezone {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
&__icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-time-picker {
|
||||
.timeSelection-input {
|
||||
&:hover {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timezone-badge {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
}
|
||||
|
||||
.time-input-suffix-icon-badge {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
|
||||
&:hover {
|
||||
background: rgb(179 179 179 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,20 +129,3 @@ $item-spacing: 8px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.timezone-picker {
|
||||
&__search {
|
||||
.search-icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.timezone-name-wrapper {
|
||||
&__selected-icon {
|
||||
.check-icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
.dropdown-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-button--dark {
|
||||
color: #000;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { EllipsisOutlined } from '@ant-design/icons';
|
||||
import { Button, Dropdown, MenuProps } from 'antd';
|
||||
import { useIsDarkMode } from 'hooks/useDarkMode';
|
||||
|
||||
import './DropDown.styles.scss';
|
||||
|
||||
@@ -12,8 +11,6 @@ function DropDown({
|
||||
element: JSX.Element[];
|
||||
onDropDownItemClick?: MenuProps['onClick'];
|
||||
}): JSX.Element {
|
||||
const isDarkMode = useIsDarkMode();
|
||||
|
||||
const items: MenuProps['items'] = element.map(
|
||||
(e: JSX.Element, index: number) => ({
|
||||
label: e,
|
||||
@@ -35,7 +32,7 @@ function DropDown({
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
|
||||
className={`dropdown-button`}
|
||||
onClick={(e): void => {
|
||||
e.preventDefault();
|
||||
setDdOpen(true);
|
||||
|
||||
@@ -196,17 +196,3 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.members-table {
|
||||
.ant-table-tbody {
|
||||
> tr.members-table-row--tinted > td {
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
> tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,22 +167,3 @@
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.config-btn {
|
||||
&.missing-config-btn {
|
||||
background: var(--bg-amber-100);
|
||||
color: var(--bg-amber-500);
|
||||
|
||||
&:hover {
|
||||
color: var(--bg-amber-600) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.missing-config-btn {
|
||||
.config-btn-content {
|
||||
border-right: 1px solid var(--bg-amber-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ $custom-border-color: #2c3044;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
// Base styles are for dark mode
|
||||
@@ -48,10 +48,6 @@ $custom-border-color: #2c3044;
|
||||
visibility: visible !important;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selection-placeholder {
|
||||
@@ -67,10 +63,6 @@ $custom-border-color: #2c3044;
|
||||
color: var(--l2-foreground);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
@@ -114,7 +106,7 @@ $custom-border-color: #2c3044;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
// Customize tags in multiselect (dark mode by default)
|
||||
@@ -180,7 +172,9 @@ $custom-border-color: #2c3044;
|
||||
.custom-multiselect-dropdown-container {
|
||||
z-index: 1050 !important;
|
||||
padding: 0;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.5),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.4),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
@@ -215,7 +209,7 @@ $custom-border-color: #2c3044;
|
||||
.empty-message {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -573,7 +567,7 @@ $custom-border-color: #2c3044;
|
||||
.empty-message {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
@@ -804,8 +798,10 @@ $custom-border-color: #2c3044;
|
||||
.custom-multiselect-dropdown-container {
|
||||
background-color: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.empty-message {
|
||||
color: var(--l2-foreground);
|
||||
@@ -976,11 +972,9 @@ $custom-border-color: #2c3044;
|
||||
font-weight: 500;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
visibility 0.2s ease;
|
||||
}
|
||||
|
||||
&:focus-within .all-text {
|
||||
|
||||
@@ -249,57 +249,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-aggregation-container {
|
||||
.aggregation-container {
|
||||
.query-aggregation-select-container {
|
||||
.query-aggregation-select-editor {
|
||||
.cm-editor {
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--l1-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
backdrop-filter: none;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:hover,
|
||||
&[aria-selected='true'] {
|
||||
background: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
::-moz-selection {
|
||||
background: var(--l2-background) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--l1-background) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
.cm-function {
|
||||
color: var(--primary-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.query-aggregation-error-popover {
|
||||
.ant-popover-inner {
|
||||
background-color: var(--l1-background);
|
||||
border: none;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-aggregation-error-popover {
|
||||
.ant-popover-inner {
|
||||
background-color: var(--l1-border);
|
||||
|
||||
@@ -121,44 +121,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.qb-trace-operator {
|
||||
&-arrow {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--l3-background),
|
||||
var(--l3-background) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
&::after {
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
&.non-list-view {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--l3-background),
|
||||
var(--l3-background) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&-label-with-input {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
background: var(--l1-background) !important;
|
||||
|
||||
.label {
|
||||
color: var(--l1-foreground) !important;
|
||||
border-right: 1px solid var(--l1-border) !important;
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: radial-gradient(circle, #fff 10%, transparent 0);
|
||||
background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
@@ -197,17 +197,3 @@
|
||||
background-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.sa-table {
|
||||
.ant-table-tbody {
|
||||
> tr.sa-table-row--tinted > td {
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
> tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,9 +169,12 @@
|
||||
gap: 3px;
|
||||
background: var(--l1-border);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
0px 4px 9px 0px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
@@ -183,29 +186,3 @@
|
||||
letter-spacing: -0.06px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.warning-content {
|
||||
&__warning-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
&__warning-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
&__message-badge {
|
||||
&-label-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.key-value-label__value {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
&__docs-button {
|
||||
background: var(--l1-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,9 +157,3 @@
|
||||
.view-all-drawer {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ant-table {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,7 +134,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -224,54 +226,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.api-quick-filter-left-section {
|
||||
.api-quick-filters-header {
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
}
|
||||
|
||||
.api-module-right-section {
|
||||
.toolbar {
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
}
|
||||
|
||||
.no-filtered-domains-message-container {
|
||||
.no-filtered-domains-message-content {
|
||||
.no-filtered-domains-message {
|
||||
.no-domain-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.no-domain-subtitle {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
.attribute {
|
||||
font-family: 'Space Mono';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.api-monitoring-domain-list-table {
|
||||
.ant-table {
|
||||
.ant-table-cell {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.table-row-light {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.table-row-dark {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.round-metric-tag {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
@@ -463,135 +463,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-description-container {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
.dashboard-details {
|
||||
.left-section {
|
||||
.dashboard-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.right-section {
|
||||
.icons {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.configure-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-description-section {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-settings {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section-1 {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.section-2 {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename-dashboard {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.dashboard-content {
|
||||
.name-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dashboard-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.dashboard-rename {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-naming {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.section-naming-content {
|
||||
.name-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.section-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.dashboard-rename {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,58 +141,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.overview-content {
|
||||
.overview-settings {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.name-icon-input {
|
||||
.dashboard-image-input {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.description-text-area {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.overview-settings-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.unsaved {
|
||||
.unsaved-dot {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
.unsaved-changes {
|
||||
color: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
.footer-action-btns {
|
||||
.discard-btn {
|
||||
color: var(--l1-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,27 +100,6 @@
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.variable-item {
|
||||
.variable-name {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--bg-robin-300);
|
||||
}
|
||||
|
||||
.variable-value {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
outline: 1px solid var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-error-alert {
|
||||
margin-bottom: 12px;
|
||||
padding: 4px 12px;
|
||||
|
||||
@@ -116,50 +116,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.panel-type-selection-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.panel-selection {
|
||||
.selected {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-card-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
background: var(--primary-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,11 +61,3 @@
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-breadcrumbs {
|
||||
.dashboard-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,32 +57,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.download-logs-popover {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: linear-gradient(
|
||||
139deg,
|
||||
color-mix(in srgb, var(--card) 80%, transparent) 0%,
|
||||
color-mix(in srgb, var(--card) 90%, transparent) 98.68%
|
||||
);
|
||||
|
||||
box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
|
||||
|
||||
.download-logs-content {
|
||||
.action-btns {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.action-btns:hover {
|
||||
&.ant-btn-text {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
.export-heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,8 +138,8 @@ function ChartPreview({
|
||||
if (startTime && endTime && startTime !== endTime) {
|
||||
dispatch(
|
||||
UpdateTimeInterval('custom', [
|
||||
Number.parseInt(getTimeString(startTime), 10),
|
||||
Number.parseInt(getTimeString(endTime), 10),
|
||||
parseInt(getTimeString(startTime), 10),
|
||||
parseInt(getTimeString(endTime), 10),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -119,41 +119,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.main-container {
|
||||
.plot-tag {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-foreground);
|
||||
.ant-modal-confirm-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-modal-confirm-content {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-confirm-btns {
|
||||
button:nth-of-type(1) {
|
||||
background-color: var(--l3-background);
|
||||
border: none;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-help-btns {
|
||||
.doc-redirection-btn {
|
||||
color: var(--bg-aqua-600) !important;
|
||||
border-color: var(--bg-aqua-600) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-notification-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -369,7 +369,7 @@ function FormAlertRules({
|
||||
// onQueryCategoryChange handles changes to query category
|
||||
// in state as well as sets additional defaults
|
||||
const onQueryCategoryChange = (val: EQueryType): void => {
|
||||
const element = document.querySelector('#top');
|
||||
const element = document.getElementById('top');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
@@ -174,23 +174,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-empty-state {
|
||||
.dashboard-content {
|
||||
.heading {
|
||||
.icons {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.welcome {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.welcome-info {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -333,100 +333,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.fullscreen-grid-container {
|
||||
.react-grid-layout {
|
||||
.row-panel {
|
||||
background: var(--l2-background);
|
||||
|
||||
.settings-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.row-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-full-view {
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-foreground);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-settings {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.menu-content {
|
||||
.section-1 {
|
||||
.rename-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
.remove-section {
|
||||
color: var(--bg-cherry-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename-section {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
.action-btns {
|
||||
.cancel-btn {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-onclick-show-button {
|
||||
background: var(--l2-background);
|
||||
border-color: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
.menu-item {
|
||||
&:hover {
|
||||
background-color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,14 +55,6 @@
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.widget-header-container {
|
||||
.ant-input-group-addon {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.long-tooltip {
|
||||
.ant-tooltip-content {
|
||||
max-height: 500px;
|
||||
|
||||
@@ -227,7 +227,9 @@
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 11px !important;
|
||||
font-style: normal;
|
||||
@@ -480,10 +482,10 @@
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.selected {
|
||||
background: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@ import { DataSource } from 'types/common/queryBuilder';
|
||||
import { USER_ROLES } from 'types/roles';
|
||||
|
||||
import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
|
||||
import logsUrl from '@/assets/Icons/logs.svg';
|
||||
|
||||
import { getItemIcon } from '../constants';
|
||||
import { ScrollText } from '@signozhq/icons';
|
||||
|
||||
export default function SavedViews({
|
||||
onUpdateChecklistDoneItem,
|
||||
@@ -54,17 +54,20 @@ export default function SavedViews({
|
||||
isError: metricsViewsError,
|
||||
} = useGetAllViews(DataSource.METRICS);
|
||||
|
||||
const logsViews = useMemo(() => [...(logsViewsData?.data.data || [])], [
|
||||
logsViewsData,
|
||||
]);
|
||||
const logsViews = useMemo(
|
||||
() => [...(logsViewsData?.data.data || [])],
|
||||
[logsViewsData],
|
||||
);
|
||||
|
||||
const tracesViews = useMemo(() => [...(tracesViewsData?.data.data || [])], [
|
||||
tracesViewsData,
|
||||
]);
|
||||
const tracesViews = useMemo(
|
||||
() => [...(tracesViewsData?.data.data || [])],
|
||||
[tracesViewsData],
|
||||
);
|
||||
|
||||
const metricsViews = useMemo(() => [...(metricsViewsData?.data.data || [])], [
|
||||
metricsViewsData,
|
||||
]);
|
||||
const metricsViews = useMemo(
|
||||
() => [...(metricsViewsData?.data.data || [])],
|
||||
[metricsViewsData],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEntity === 'logs') {
|
||||
@@ -348,7 +351,7 @@ export default function SavedViews({
|
||||
className={selectedEntity === 'logs' ? 'selected tab' : 'tab'}
|
||||
onClick={(): void => handleTabChange('logs')}
|
||||
>
|
||||
<img src={logsUrl} alt="logs-icon" className="logs-icon" />
|
||||
<ScrollText size={14} />
|
||||
Logs
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -132,7 +132,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -146,50 +148,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-metric-traces-header {
|
||||
.filter-section {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces-table {
|
||||
.ant-table {
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th:has(.entityname-column-header) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell:has(.entityname-column-value) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entityname-column-value {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,63 +192,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ant-drawer-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entity-detail-drawer {
|
||||
.title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.entity-detail-drawer__entity {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.views-tabs {
|
||||
.tab {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.selected_view {
|
||||
background: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.selected_view::before {
|
||||
background: var(--l3-background);
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.compass-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabs-and-search {
|
||||
.action-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces {
|
||||
margin-top: 1rem;
|
||||
|
||||
@@ -382,7 +325,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -397,53 +342,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-metric-traces-header {
|
||||
.filter-section {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces-table {
|
||||
.ant-table {
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th:has(.entityname-column-header) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell:has(.entityname-column-value) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entityname-column-value {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metrics-logs-container {
|
||||
margin-top: 1rem;
|
||||
|
||||
|
||||
@@ -202,7 +202,11 @@
|
||||
letter-spacing: -0.07px;
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,7 +255,11 @@
|
||||
> a {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'case' on,
|
||||
'cpsp' on;
|
||||
font-size: var(--font-size-sm);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -765,206 +773,6 @@
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-key-container {
|
||||
.ingestion-key-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-render {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-collapse {
|
||||
border: none;
|
||||
|
||||
.ant-collapse-header {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-collapse-content {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.title-with-action {
|
||||
.ingestion-key-title {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-value {
|
||||
background: var(--l3-background);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.copy-key-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-details {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
|
||||
.ingestion-key-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ingestion-key-last-used-at {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-ingestion-key-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ingestion-key-input {
|
||||
.ant-input {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-info-container {
|
||||
.user-email {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.limits-data {
|
||||
border: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-modal {
|
||||
.ant-modal-content {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
padding: 0;
|
||||
|
||||
.ant-modal-header {
|
||||
background: none;
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-access-role {
|
||||
.ant-radio-button-wrapper {
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
&::before {
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyable-text {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.ingestion-key-expires-at {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.expires-at .ant-picker {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -1077,26 +885,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-setup-details-links {
|
||||
background: color-mix(in srgb, var(--primary-background) 10%, transparent);
|
||||
color: var(--accent-primary);
|
||||
|
||||
.learn-more {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-tooltip {
|
||||
.ingestion-url-error-content {
|
||||
.ingestion-url-error-code {
|
||||
color: var(--bg-amber-500);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
|
||||
.licenses-page-header-title {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 13px;
|
||||
@@ -54,38 +56,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.licenses-page {
|
||||
.licenses-page-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.licenses-page-header-title {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.licenses-page-content-container {
|
||||
.licenses-page-content {
|
||||
background: var(--l1-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,15 +176,3 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.info-text {
|
||||
color: var(--bg-robin-600) !important;
|
||||
}
|
||||
|
||||
.info-link-container {
|
||||
.anticon {
|
||||
color: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,7 +224,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -249,7 +253,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -273,7 +281,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -307,7 +319,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -328,7 +344,11 @@
|
||||
> a {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'case' on,
|
||||
'cpsp' on;
|
||||
font-size: var(--font-size-sm);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -932,7 +952,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -966,7 +990,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -988,7 +1016,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -1022,7 +1054,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -1078,305 +1114,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboards-list-container {
|
||||
.dashboards-list-view-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-list-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.dashboard-title {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.title-with-action {
|
||||
.dashboard-title {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-details {
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.created-by {
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.updated-by {
|
||||
.text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dashboard-created-at {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-search {
|
||||
.text {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.all-dashboards-header {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-empty-state {
|
||||
.text {
|
||||
.no-dashboard {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.info {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-error-state {
|
||||
.error-text {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
.retry-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-view-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.save-view-input {
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-actions {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.dashboard-action-content {
|
||||
.section-1 {
|
||||
.action-btn {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-dashboards {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.sort-content {
|
||||
.sort-heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.sort-btns {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-group {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
.configure-content {
|
||||
.configure-btn {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-metadata-root {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.configure-content {
|
||||
.configure-preview {
|
||||
border: 0.915px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.header {
|
||||
.title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.createdAt {
|
||||
.formatted-time {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.user {
|
||||
.user-tag {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updatedAt {
|
||||
.formatted-time {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.user {
|
||||
.user-tag {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-action {
|
||||
.connection-line {
|
||||
border: 1px dashed var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.save-changes {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-toolip {
|
||||
.ant-tooltip-content {
|
||||
.ant-tooltip-inner {
|
||||
|
||||
@@ -194,76 +194,3 @@
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.new-dashboard-templates-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.new-dashboard-templates-content-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.new-dashboard-templates-content {
|
||||
.new-dashboard-templates-list {
|
||||
border-right: 1px solid var(--l1-border);
|
||||
|
||||
.templates-list {
|
||||
.template-list-item {
|
||||
.template-name {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-dashboard-template-preview {
|
||||
.template-preview-header {
|
||||
.template-preview-title {
|
||||
.template-preview-icon {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.template-info {
|
||||
.template-name {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
.template-description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-dashboard-btn {
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-preview-image {
|
||||
img {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,3 @@
|
||||
.delete-btn:hover {
|
||||
background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.delete-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,14 +58,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.table-view-actions-content {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background) !important;
|
||||
backdrop-filter: none;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,55 +160,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.login-form-card {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.login-error-container {
|
||||
.error-content {
|
||||
background: color-mix(in srgb, var(--danger-background) 10%, transparent);
|
||||
border-color: color-mix(in srgb, var(--danger-background) 20%, transparent);
|
||||
|
||||
&__error-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&__docs-button {
|
||||
color: var(--l1-foreground);
|
||||
border-color: var(--l1-border);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--l2-foreground);
|
||||
border-color: var(--l1-border);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__message-badge-label-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-label-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -10,10 +10,6 @@ export const Label = styled.label`
|
||||
color: var(--l1-foreground);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
|
||||
.lightMode & {
|
||||
color: var(--text-ink-500);
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormContainer = styled(Form)`
|
||||
@@ -50,20 +46,10 @@ export const FormContainer = styled(Form)`
|
||||
background: var(--l3-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
.lightMode & {
|
||||
background: var(--bg-vanilla-200) !important;
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
color: var(--text-ink-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .ant-input::placeholder {
|
||||
color: var(--l3-foreground) !important;
|
||||
|
||||
.lightMode & {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .ant-input:focus,
|
||||
|
||||
@@ -323,50 +323,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.logs-list-view-container {
|
||||
.logs-list-table-view-container {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
background-color: var(--l1-background) !important;
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-header-table-container {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +102,9 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
transition:
|
||||
background-color 120ms ease,
|
||||
color 120ms ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--l2-background-hover);
|
||||
@@ -143,10 +145,12 @@
|
||||
left: 50%;
|
||||
width: 4px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transition: background 120ms ease, width 120ms ease;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
width 120ms ease;
|
||||
}
|
||||
|
||||
.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.logs-table-virtuoso-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--bg-slate-300) transparent;
|
||||
scrollbar-color: var(--l3-background) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
@@ -16,23 +16,11 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
background: var(--l3-background);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode .logs-table-virtuoso-scroll {
|
||||
scrollbar-color: var(--bg-vanilla-300) transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-vanilla-100);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -263,24 +263,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.logs-explorer-views-container {
|
||||
.views-tabs-container {
|
||||
.views-tabs {
|
||||
.selected_view {
|
||||
background: white;
|
||||
color: var(--text-robin-400);
|
||||
border: 1px solid var(--bg-robin-400);
|
||||
}
|
||||
|
||||
.selected_view::before {
|
||||
background: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-by-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -179,16 +179,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metrics-explorer-explore-container {
|
||||
.explore-tabs {
|
||||
.selected-view {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboards-and-alerts-popover-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@@ -280,7 +280,7 @@ function Explorer(): JSX.Element {
|
||||
[],
|
||||
);
|
||||
|
||||
const [warning, setWarning] = useState<Warning | undefined>();
|
||||
const [warning, setWarning] = useState<Warning | undefined>(undefined);
|
||||
|
||||
const oneChartPerQueryDisabledTooltip = useMemo(() => {
|
||||
if (splitedQueries.length <= 1) {
|
||||
@@ -292,7 +292,7 @@ function Explorer(): JSX.Element {
|
||||
if (disableOneChartPerQuery) {
|
||||
return 'One chart per query cannot be disabled for multiple queries with different units.';
|
||||
}
|
||||
return;
|
||||
return undefined;
|
||||
}, [disableOneChartPerQuery, splitedQueries.length, units.length]);
|
||||
|
||||
// Show the y axis unit selector if -
|
||||
|
||||
@@ -221,7 +221,7 @@ function Inspect({
|
||||
);
|
||||
}
|
||||
|
||||
if (inspectMetricsTimeSeries.length === 0) {
|
||||
if (!inspectMetricsTimeSeries.length) {
|
||||
return renderFallback(
|
||||
'inspect-metrics-empty',
|
||||
<Empty description="No time series found for this metric to inspect." />,
|
||||
|
||||
@@ -256,10 +256,10 @@ export function useInspectMetrics(
|
||||
const valuesMap = new Map<number, number>();
|
||||
|
||||
series.values.forEach(({ timestamp, value }) => {
|
||||
valuesMap.set(timestamp, Number.parseFloat(value));
|
||||
valuesMap.set(timestamp, parseFloat(value));
|
||||
});
|
||||
|
||||
return timestamps.map((timestamp) => valuesMap.get(timestamp) ?? Number.NaN);
|
||||
return timestamps.map((timestamp) => valuesMap.get(timestamp) ?? NaN);
|
||||
});
|
||||
|
||||
const rawData = [timestamps, ...timeseriesArray];
|
||||
@@ -273,7 +273,7 @@ export function useInspectMetrics(
|
||||
labels.add(label);
|
||||
});
|
||||
});
|
||||
return [...labels];
|
||||
return Array.from(labels);
|
||||
}, [inspectMetricsData]);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
|
||||
@@ -382,81 +382,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metric-details-header {
|
||||
.ant-btn {
|
||||
background-color: var(--bg-white-400);
|
||||
}
|
||||
}
|
||||
|
||||
.metric-details-content {
|
||||
.metrics-accordion {
|
||||
.metrics-accordion-header {
|
||||
.action-menu {
|
||||
.action-button {
|
||||
.ant-typography {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metrics-accordion-content {
|
||||
.metric-metadata-key {
|
||||
.field-renderer-container {
|
||||
.label {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.all-attributes-key {
|
||||
.all-attributes-contribution {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-metadata-value {
|
||||
background-color: var(--l3-background);
|
||||
.all-attributes-value {
|
||||
.ant-btn {
|
||||
background-color: var(--l2-foreground);
|
||||
.ant-typography {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-renderer-container {
|
||||
.label {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-attributes-content {
|
||||
.top-attributes-item-progress {
|
||||
.top-attributes-item-progress-bar {
|
||||
background-color: var(--bg-robin-400);
|
||||
}
|
||||
|
||||
.top-attributes-item-count {
|
||||
background-color: var(--bg-robin-300);
|
||||
}
|
||||
|
||||
.top-attributes-item-key,
|
||||
.top-attributes-item-count {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-metadata-value {
|
||||
.y-axis-unit-selector-component {
|
||||
.ant-select {
|
||||
@@ -585,24 +510,6 @@
|
||||
color: var(--bg-robin-400) !important;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.attribute-key-popover-overlay,
|
||||
.all-values-popover-overlay {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l2-foreground);
|
||||
background: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.all-values-popover {
|
||||
.all-values-item {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-out {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@@ -177,7 +177,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -228,29 +230,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metrics-table-container {
|
||||
.ant-table {
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
.ant-pagination-item {
|
||||
&-active {
|
||||
background: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
|
||||
a {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-type-renderer {
|
||||
border-radius: 50px;
|
||||
max-height: 24px;
|
||||
|
||||
@@ -57,28 +57,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.license-section {
|
||||
.license-section-header {
|
||||
.license-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.license-section-content {
|
||||
.license-section-content-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.license-section-content-item-title-action {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.license-section-content-item-description {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,62 +153,3 @@
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.user-info-section {
|
||||
.user-info-section-header {
|
||||
.user-info-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-info-section-subtitle {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-preference-section {
|
||||
.user-preference-section-header {
|
||||
.user-preference-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-preference-section-subtitle {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.user-preference-section-content {
|
||||
.user-preference-section-content-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.user-preference-section-content-item-title-action {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-preference-section-content-item-description {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.auto-theme-info {
|
||||
background: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.auto-theme-status {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
strong {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
|
||||
@@ -32,17 +32,3 @@
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.widget-graph {
|
||||
background-color: var(--l1-background);
|
||||
background-image: radial-gradient(var(--l2-foreground) 1px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
|
||||
.header {
|
||||
.plot-tag {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,11 +38,3 @@
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.column-unit-selector {
|
||||
.heading {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,25 +68,3 @@
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.context-link-form-container {
|
||||
.url-parameters-section {
|
||||
.parameter-row {
|
||||
.delete-parameter-btn {
|
||||
color: var(--l1-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--danger-background) !important;
|
||||
border-color: var(--danger-background) !important;
|
||||
background-color: var(--bg-cherry-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-link-footer {
|
||||
border-top-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,35 +111,3 @@
|
||||
.add-context-link-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.context-links-text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.context-link-item {
|
||||
&:hover {
|
||||
background-color: var(--l2-background);
|
||||
}
|
||||
|
||||
.context-link-label {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.context-link-url {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.drag-handle-icon {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.delete-context-link-btn {
|
||||
&:hover {
|
||||
color: var(--danger-background);
|
||||
border-color: var(--danger-background);
|
||||
background-color: var(--bg-cherry-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,28 +142,3 @@
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.legend-colors-container {
|
||||
.legend-colors-content {
|
||||
.legend-items {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
scrollbar-color: var(--l2-foreground) transparent;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
&:hover {
|
||||
background-color: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -222,95 +222,3 @@
|
||||
line-height: 16px; /* 133.333% */
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.right-container {
|
||||
background-color: var(--l1-background);
|
||||
.section-heading,
|
||||
.section-heading-small {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.header {
|
||||
.header-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-config {
|
||||
.panel-type-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.select-option {
|
||||
.display {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.y-axis-unit-selector-v2 {
|
||||
.y-axis-unit-selector-component {
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.fill-gaps-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.toggle-card-description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-time-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.y-axis-unit-selector,
|
||||
.y-axis-unit-selector-v2 {
|
||||
.heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
.soft-min-max {
|
||||
.container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.input {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-option {
|
||||
.display {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,20 +36,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.histogram-settings__bucket-config {
|
||||
.histogram-settings__merge-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.histogram-settings__bucket-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.color-selector-button {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
|
||||
@@ -3,17 +3,8 @@
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.custom-color-typography-dark {
|
||||
color: #fff !important;
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
}
|
||||
|
||||
.custom-color-typography-light {
|
||||
color: #000 !important;
|
||||
.custom-color-text {
|
||||
color: var(--l1-foreground) !important;
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
|
||||
@@ -1,24 +1,14 @@
|
||||
import { Typography } from 'antd';
|
||||
import { useIsDarkMode } from 'hooks/useDarkMode';
|
||||
|
||||
import { CustomColorProps } from './types';
|
||||
|
||||
import './CustomColor.styles.scss';
|
||||
|
||||
function CustomColor({ color }: CustomColorProps): JSX.Element {
|
||||
const isDarkMode = useIsDarkMode();
|
||||
return (
|
||||
<div className="custom-color-container">
|
||||
<div className="custom-color-tag" style={{ background: color }} />
|
||||
<Typography.Text
|
||||
className={
|
||||
isDarkMode
|
||||
? `custom-color-typography-dark`
|
||||
: `custom-color-typograph-light`
|
||||
}
|
||||
>
|
||||
{color}
|
||||
</Typography.Text>
|
||||
<Typography.Text className={`custom-color-text`}>{color}</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.edit-action-btns {
|
||||
@@ -38,11 +38,11 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
background: var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.ant-btn + .ant-btn {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
@@ -57,7 +57,7 @@
|
||||
.time-series-alerts {
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
@@ -81,7 +81,7 @@
|
||||
width: 80%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2px;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
color: var(--l1-foreground);
|
||||
@@ -139,7 +139,7 @@
|
||||
.threshold-units-selector {
|
||||
display: flex;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
height: 32px;
|
||||
@@ -161,7 +161,7 @@
|
||||
.unit-selection {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l2-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
@@ -188,14 +188,14 @@
|
||||
.unit-selection-prev {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l2-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,9 +203,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0px 0px 2px 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
border-top: none;
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
@@ -220,7 +220,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
@@ -230,8 +230,9 @@
|
||||
.color-format {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l1-background);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -247,21 +248,21 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background-color: unset;
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.color-format-prev {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l1-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -281,8 +282,8 @@
|
||||
gap: 6px;
|
||||
flex: 1 0 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -319,123 +320,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.operator-input-root {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.threshold-container {
|
||||
.threshold-card-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.edit-action-btns {
|
||||
.ant-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.ant-btn + .ant-btn {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.time-series-alerts {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.label-input {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
color: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value-table-alerts {
|
||||
.operator-input {
|
||||
.ant-select-selector {
|
||||
background-color: var(--l3-background) !important;
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.typography {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.typography-preview {
|
||||
color: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
.threshold-units-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
|
||||
.unit-input {
|
||||
color: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.unit-selection {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l2-background);
|
||||
|
||||
.ant-select-selector {
|
||||
background-color: var(--l3-background);
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
.unit-selection-prev {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.thresholds-color-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
border-top: 1px solid var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
|
||||
.color-selector {
|
||||
color: var(--l3-background);
|
||||
background: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
border-top: 1px solid var(--l1-foreground);
|
||||
}
|
||||
.color-format {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l3-background);
|
||||
|
||||
.ant-select-selector {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
.color-format-prev {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l3-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-action-button {
|
||||
.discard-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.save-changes {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,22 +32,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.threshold-selector-container {
|
||||
.threshold-select {
|
||||
.icon {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.left-section {
|
||||
.icon {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.fill-mode-selector {
|
||||
.fill-mode-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.line-interpolation-selector {
|
||||
.line-interpolation-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.line-style-selector {
|
||||
.line-style-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
// border: 1px solid #1d212d;
|
||||
border-radius: 3px;
|
||||
|
||||
.no-logs-container-content {
|
||||
|
||||
@@ -70,12 +70,6 @@ div[class*='-setup-instructions-container'] {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dataSourceName {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.supported-languages-container {
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
@@ -180,80 +180,6 @@
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-value {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
|
||||
.environment,
|
||||
.supported-language {
|
||||
&.selected {
|
||||
color: var(--accent-primary);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-primary);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-container {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
}
|
||||
|
||||
.error-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.steps-container {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
|
||||
.steps-container-header {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-user-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,7 +190,9 @@
|
||||
opacity: 0.6 !important;
|
||||
cursor: pointer;
|
||||
padding: 0 !important;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
opacity 0.2s;
|
||||
box-shadow: none !important;
|
||||
|
||||
svg {
|
||||
@@ -371,144 +373,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.invite-team-members-table-header {
|
||||
.table-header-cell {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.team-member-email-input {
|
||||
background: var(--l2-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
input {
|
||||
background: var(--l2-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.team-member-role-select {
|
||||
.ant-select-selector {
|
||||
background: var(--l3-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: var(--l3-foreground) !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-item {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: var(--l3-foreground) !important;
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
|
||||
&:hover .ant-select-selector {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-team-member-button {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
color: var(--danger-background) !important;
|
||||
|
||||
svg {
|
||||
color: var(--danger-background) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--bg-cherry-400) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
color: var(--danger-background) !important;
|
||||
|
||||
svg {
|
||||
color: var(--danger-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-another-member-button {
|
||||
border: 1px dashed var(--l1-border) !important;
|
||||
background: transparent !important;
|
||||
color: var(--l3-foreground);
|
||||
|
||||
svg,
|
||||
[class*='icon'] {
|
||||
color: var(--l3-foreground) !important;
|
||||
display: inline-block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
border-style: dashed !important;
|
||||
color: var(--l1-foreground);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
|
||||
svg,
|
||||
[class*='icon'] {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.questions-form-container {
|
||||
.invite-users-error-message-container,
|
||||
.invite-users-success-message-container {
|
||||
.success-message {
|
||||
color: var(--bg-success-500);
|
||||
}
|
||||
}
|
||||
|
||||
.partially-sent-invites-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-foreground);
|
||||
|
||||
.partially-sent-invites-message {
|
||||
color: var(--bg-warning-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-shaking {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -17,17 +17,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-url-error-tooltip {
|
||||
.ingestion-url-error-content {
|
||||
.ingestion-url-error-code {
|
||||
color: var(--bg-amber-500);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -603,10 +603,6 @@
|
||||
color: var(--accent-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.lightMode & {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-question {
|
||||
@@ -1253,399 +1249,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-setup-details-links {
|
||||
color: var(--accent-primary);
|
||||
|
||||
.learn-more {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-header-container-close-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.setup-flow {
|
||||
&__header {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
&--sticky {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&__question-block {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
&:before {
|
||||
background-color: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__radio-custom {
|
||||
background-color: var(--l1-background);
|
||||
color: var(--l2-foreground);
|
||||
background: var(--l1-background);
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-background);
|
||||
box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2);
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
color: var(--l2-foreground);
|
||||
box-shadow: 0 4px 10px rgba(58, 134, 255, 0.4);
|
||||
}
|
||||
|
||||
&--animating {
|
||||
animation: selectPulse 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&__category {
|
||||
width: 100%;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__content-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__category-filter {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&__category-filter-item {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
&--selected {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
&__description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-block {
|
||||
color: var(--l2-foreground);
|
||||
background-color: transparent !important;
|
||||
|
||||
&:before {
|
||||
background-color: var(--bg-robin-100);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&.answered {
|
||||
&:before {
|
||||
background-color: var(--primary-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 50px;
|
||||
bottom: -80px;
|
||||
width: 1px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-robin-400) 0%,
|
||||
var(--bg-robin-400) 50%,
|
||||
transparent 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 2px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes selectPulse {
|
||||
0% {
|
||||
background-color: var(--l2-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
20% {
|
||||
background-color: rgba(58, 134, 255, 0.5);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
40% {
|
||||
background-color: var(--l2-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
60% {
|
||||
background-color: rgba(58, 134, 255, 0.8);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
100% {
|
||||
background-color: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-v2 {
|
||||
.get-help-btn,
|
||||
.invite-teammate-btn {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--l3-background) !important;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none !important;
|
||||
outline-offset: 0px !important;
|
||||
}
|
||||
|
||||
&.rounded-btn {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--primary-background);
|
||||
color: var(--l2-foreground) !important;
|
||||
border: none !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: none !important;
|
||||
color: var(--l2-foreground) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-robin-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-title,
|
||||
.onboarding-filters-title,
|
||||
.onboarding-filters-item-title {
|
||||
color: var(--l2-foreground) !important;
|
||||
|
||||
&.selected {
|
||||
color: var(--accent-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.onboarding-data-source-button {
|
||||
color: var(--l2-foreground);
|
||||
background: var(--l3-background);
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
background: var(--l2-background) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
background: var(--l2-background) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
background: var(--l2-background) !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
|
||||
color: var(--text-robin-500) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
background: var(--l2-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.questionaire-footer {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.onboarding-configure-product-description {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.onboarding-data-source-search {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-input {
|
||||
background: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-add-data-source-container {
|
||||
.onboarding-question {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.question-title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.question-sub-title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-product-setup-container {
|
||||
&_left-section {
|
||||
.perlian-bg {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--l2-foreground) 10%,
|
||||
transparent 0
|
||||
);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
-webkit-mask-image: radial-gradient(
|
||||
circle at 50% 0,
|
||||
rgba(255, 255, 255, 0.1) 0,
|
||||
rgba(255, 255, 255, 0) 56.77%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&_right-section {
|
||||
.invite-user-section-content {
|
||||
.ant-btn {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.need-help-section-content-divider {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.need-help-section-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.configure-product-ingestion-section-content {
|
||||
.ingestion-endpoint-section {
|
||||
background: var(--l1-foreground);
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19) inset;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ingestion-endpoint-section-header {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-info-section {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-section-title {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-details-section {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-section-error-container {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-data-source-category-container {
|
||||
.onboarding-data-source-category-item {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-configure-container {
|
||||
.configure-product-docs-section {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.loading-container {
|
||||
.loading-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-product-ingestion-section {
|
||||
.configure-product-ingestion-section-content {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-team-member-modal {
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.invite-team-member-modal-content {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-header-container-close-icon {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,7 +215,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
@@ -238,7 +242,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
@@ -444,129 +452,3 @@
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.datePicker {
|
||||
.ant-picker-panel-container {
|
||||
background: var(--card) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.planned-downtime-container {
|
||||
.planned-downtime-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.schedule-created-at {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
border-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.planned-downtime-table {
|
||||
.ant-table-tbody {
|
||||
.collapse-list {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.ant-collapse-content-box {
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-schedule-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.save-view-input {
|
||||
.ant-input {
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.createDowntimeModal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--card);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-divider {
|
||||
border: 0.5px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.createForm {
|
||||
.ant-picker,
|
||||
input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-picker .ant-picker-input input {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.scheduleTimeInfoText {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.alert-rule-info {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { CheckOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
Divider,
|
||||
Form,
|
||||
FormInstance,
|
||||
Input,
|
||||
@@ -164,7 +163,7 @@ export function PlannedDowntimeForm(
|
||||
values.timezone,
|
||||
shouldKeepLocalTime,
|
||||
),
|
||||
)
|
||||
)
|
||||
: undefined,
|
||||
recurrence: values.recurrence as RuletypesRecurrenceDTO,
|
||||
},
|
||||
@@ -216,7 +215,7 @@ export function PlannedDowntimeForm(
|
||||
timezoneInitialValue,
|
||||
values.timezone,
|
||||
!isEditMode,
|
||||
)
|
||||
)
|
||||
: undefined,
|
||||
startTime: handleTimeConversion(
|
||||
values.startTime,
|
||||
@@ -228,7 +227,7 @@ export function PlannedDowntimeForm(
|
||||
? undefined
|
||||
: values.recurrence?.repeatOn,
|
||||
repeatType: values.recurrence?.repeatType,
|
||||
};
|
||||
};
|
||||
|
||||
const payloadValues = {
|
||||
...values,
|
||||
@@ -442,11 +441,9 @@ export function PlannedDowntimeForm(
|
||||
centered
|
||||
open={isOpen}
|
||||
className="createDowntimeModal"
|
||||
width={384}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
>
|
||||
<Divider plain />
|
||||
<Form<PlannedDowntimeFormData>
|
||||
name={initialValues.editMode ? 'edit-form' : 'create-form'}
|
||||
form={form}
|
||||
|
||||
@@ -122,36 +122,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-functions-container {
|
||||
.add-function-btn {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.query-functions-list {
|
||||
.query-function {
|
||||
border: 1px solid var(--l1-border);
|
||||
.query-function-name-selector {
|
||||
.ant-select-selector {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.query-function-value {
|
||||
background: var(--l3-background);
|
||||
|
||||
&:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--l3-background);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,15 +23,8 @@
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
//not using var here to support opacity 60%. To be handled at design system level.
|
||||
background: color-mix(in srgb, var(--l3-background) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--l1-background) 60%, transparent);
|
||||
color: var(--l1-foreground);
|
||||
line-height: 1;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.cmd-hint {
|
||||
color: var(--l2-foreground);
|
||||
//not using var here to support opacity 60%. To be handled at design system level.
|
||||
background: color-mix(in srgb, var(--l3-background) 80%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ describe('RunQueryBtn', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('renders run state and triggers on click', async () => {
|
||||
test('renders run state and triggers on click', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRun = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
@@ -35,7 +35,7 @@ describe('RunQueryBtn', () => {
|
||||
expect(onRun).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows cancel state and calls handleCancelQuery', async () => {
|
||||
test('shows cancel state and calls handleCancelQuery', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRun = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
@@ -51,19 +51,19 @@ describe('RunQueryBtn', () => {
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('disabled when disabled prop is true', () => {
|
||||
test('disabled when disabled prop is true', () => {
|
||||
render(<RunQueryBtn disabled />);
|
||||
expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('disabled when no props provided', () => {
|
||||
test('disabled when no props provided', () => {
|
||||
render(<RunQueryBtn />);
|
||||
expect(
|
||||
screen.getByRole('button', { name: /run query/i }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows Command + CornerDownLeft on mac', () => {
|
||||
test('shows Command + CornerDownLeft on mac', () => {
|
||||
const { container } = render(
|
||||
<RunQueryBtn
|
||||
onStageRunQuery={jest.fn()}
|
||||
@@ -77,7 +77,7 @@ describe('RunQueryBtn', () => {
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows ChevronUp + CornerDownLeft on non-mac', () => {
|
||||
test('shows ChevronUp + CornerDownLeft on non-mac', () => {
|
||||
(getUserOperatingSystem as jest.Mock).mockReturnValue(
|
||||
UserOperatingSystem.WINDOWS,
|
||||
);
|
||||
@@ -95,7 +95,7 @@ describe('RunQueryBtn', () => {
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders custom label when provided', () => {
|
||||
test('renders custom label when provided', () => {
|
||||
render(
|
||||
<RunQueryBtn
|
||||
onStageRunQuery={jest.fn()}
|
||||
|
||||
@@ -230,7 +230,7 @@
|
||||
align-items: center;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 0px;
|
||||
|
||||
@@ -299,14 +299,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-builder-search-v2 {
|
||||
.qb-search-bar-tokenised-tags {
|
||||
.ant-tag {
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,12 +22,3 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.resourceAttributesFilter-container {
|
||||
.resource-attributes-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -295,7 +295,9 @@
|
||||
color: var(--destructive);
|
||||
opacity: 0.6;
|
||||
padding: 0;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
opacity 0.2s;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@@ -371,15 +373,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.role-details-page {
|
||||
.role-details-permission-item {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,16 +250,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.roles-table-section-header {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.roles-table-row {
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
}
|
||||
|
||||
.create-role-modal {
|
||||
.ant-modal-content {
|
||||
padding: 0;
|
||||
|
||||
@@ -353,128 +353,3 @@
|
||||
line-height: 20px; /* 142.857% */
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.routing-policies-container {
|
||||
.routing-policies-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.routing-policies-table {
|
||||
.ant-table-tbody {
|
||||
.policy-list-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.policy-list-item-header {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.policy-list-item-content {
|
||||
.policy-list-item-content-row {
|
||||
.ant-typography:first-child {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-typography:last-child,
|
||||
div .ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-policy-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--card);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-divider {
|
||||
border: 0.5px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-policy-container {
|
||||
.input-group {
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:hover .ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-policy-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: var(--danger-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--bg-cherry-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,10 @@
|
||||
background: var(--l1-background);
|
||||
|
||||
padding-bottom: 48px;
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
|
||||
.brand-container {
|
||||
padding: 8px 15px;
|
||||
@@ -295,7 +298,9 @@
|
||||
.nav-section-title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.08s ease, transform 0.08s ease;
|
||||
transition:
|
||||
opacity 0.08s ease,
|
||||
transform 0.08s ease;
|
||||
|
||||
&.reorder {
|
||||
display: none;
|
||||
@@ -332,7 +337,10 @@
|
||||
|
||||
display: none;
|
||||
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
transition-delay: 0.03s;
|
||||
}
|
||||
|
||||
@@ -456,7 +464,10 @@
|
||||
width: 54px;
|
||||
// width: 100%; // temp
|
||||
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
@@ -573,7 +584,11 @@
|
||||
|
||||
color: var(--primary-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'case' on,
|
||||
'cpsp' on,
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
@@ -586,7 +601,11 @@
|
||||
.sidenav-beta-tag {
|
||||
color: var(--l1-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'case' on,
|
||||
'cpsp' on,
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
@@ -736,7 +755,8 @@
|
||||
background: var(--l2-background);
|
||||
|
||||
/* Drop Shadow */
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
@@ -916,7 +936,8 @@
|
||||
background: var(--l2-background);
|
||||
|
||||
/* Drop Shadow */
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
@@ -1024,16 +1045,6 @@
|
||||
width: 360px !important;
|
||||
border-radius: 3px !important;
|
||||
|
||||
// Glass blur
|
||||
// background: rgba(18, 19, 23, 0.6); /* based on #121317 */
|
||||
// backdrop-filter: blur(16px);
|
||||
// -webkit-backdrop-filter: blur(16px);
|
||||
// border: 1px solid color-mix(in srgb, var(--l1-foreground) 8%, transparent);
|
||||
// border-radius: 12px;
|
||||
// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
// color: white;
|
||||
// padding: 8px 0;
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l2-foreground);
|
||||
@@ -1285,225 +1296,6 @@
|
||||
background-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.sideNav {
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
|
||||
.brand {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-title-section {
|
||||
.license-type {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.version-container {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.version {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.get-started-nav-items {
|
||||
.get-started-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
svg {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
// Hover state (light mode)
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
color: var(--l1-foreground);
|
||||
|
||||
svg {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-nav-items {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
var(--l1-background) 27.11%
|
||||
);
|
||||
|
||||
.collapse-expand-handlers {
|
||||
svg {
|
||||
color: var(--l2-foreground);
|
||||
fill: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pinned):hover,
|
||||
&.dropdown-open {
|
||||
background: var(--l1-background);
|
||||
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-overlay {
|
||||
.ant-dropdown-menu {
|
||||
.ant-dropdown-menu-item {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&:hover:not(.ant-dropdown-menu-item-disabled) {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-items-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-items-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.reorder-shortcut-nav-item {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.reorder-shortcut-nav-item-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-color-picker-trigger {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
> button {
|
||||
background: var(--primary-background) !important;
|
||||
color: var(--primary-foreground) !important;
|
||||
|
||||
&.secondary-btn {
|
||||
background-color: var(--l3-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-tooltip-overlay {
|
||||
.ant-tooltip-inner {
|
||||
background-color: var(--card);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user