diff --git a/frontend/public/Logos/hippa.svg b/frontend/public/Logos/hippa.svg
deleted file mode 100644
index 2a1b74b818..0000000000
--- a/frontend/public/Logos/hippa.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/public/Logos/signoz-brand-logo-new.svg b/frontend/public/Logos/signoz-brand-logo-new.svg
deleted file mode 100644
index f57d3c5def..0000000000
--- a/frontend/public/Logos/signoz-brand-logo-new.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/public/Logos/soc2.svg b/frontend/public/Logos/soc2.svg
deleted file mode 100644
index 234321c95c..0000000000
--- a/frontend/public/Logos/soc2.svg
+++ /dev/null
@@ -1,72 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/public/fonts/Satoshi-Regular.woff2 b/frontend/public/fonts/Satoshi-Regular.woff2
deleted file mode 100644
index 81c40ab08a..0000000000
Binary files a/frontend/public/fonts/Satoshi-Regular.woff2 and /dev/null differ
diff --git a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
index 1d1be4b0df..2f47e1d3e3 100644
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
@@ -83,3 +83,40 @@
}
}
}
+
+.lightMode {
+ .team-member-container {
+ .team-member-role-select {
+ .ant-select-selector {
+ border: 1px solid var(--bg-vanilla-300);
+ }
+ }
+
+ .team-member-email-input {
+ background-color: var(--bg-vanilla-100);
+
+ .ant-input,
+ .ant-input-group-addon {
+ background-color: var(--bg-vanilla-100) !important;
+ }
+ }
+ }
+
+ .questions-form-container {
+ .invite-users-error-message-container,
+ .invite-users-success-message-container {
+ .success-message {
+ color: var(--bg-success-500, #00b37e);
+ }
+ }
+
+ .partially-sent-invites-container {
+ border: 1px solid var(--bg-vanilla-300);
+ background-color: var(--bg-vanilla-100);
+
+ .partially-sent-invites-message {
+ color: var(--bg-warning-500, #fbbd23);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss
index 984b89828b..0b37c654be 100644
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss
@@ -20,8 +20,8 @@
}
.header-container .logo-text {
- font-family: 'Satoshi', sans-serif;
- color: #fff;
+ font-family: 'Work Sans', sans-serif;
+ color: var(--bg-vanilla-100);
font-size: 15.4px;
font-style: normal;
font-weight: 500;
@@ -38,8 +38,8 @@
gap: 6px;
flex-shrink: 0;
border-radius: 2px;
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- background: var(--Ink-300, #16181d);
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
box-shadow: none;
}
@@ -50,10 +50,16 @@
}
.header-container .get-help-text {
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ color: var(--bg-vanilla-400);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 10px;
letter-spacing: 0.12px;
}
+
+.lightMode {
+ .header-container .logo-text {
+ color: var(--bg-slate-300);
+ }
+}
diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx
index b8982baeb1..9d4df97676 100644
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx
@@ -4,7 +4,7 @@ export function OnboardingHeader(): JSX.Element {
return (
-
+
SigNoz
diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
index 5737379d40..22cf4c6b2a 100644
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
@@ -24,7 +24,7 @@
overflow-y: auto;
.questions-container {
- color: var(--Vanilla-100, #fff);
+ color: var(--bg-vanilla-100, #fff);
font-family: Inter;
font-size: 24px;
font-style: normal;
@@ -37,14 +37,14 @@
}
.title {
- color: var(--Vanilla-100, #fff) !important;
+ color: var(--bg-vanilla-100) !important;
font-size: 24px !important;
line-height: 32px !important;
margin-bottom: 8px !important;
}
.sub-title {
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3)) !important;
+ color: var(--bg-vanilla-400) !important;
font-size: 14px !important;
font-style: normal;
font-weight: 400 !important;
@@ -68,15 +68,15 @@
align-items: center;
gap: 24px;
border-radius: 4px;
- border: 1px solid var(--Greyscale-Slate-500, #161922);
- background: var(--Ink-400, #121317);
+ border: 1px solid var(--bg-slate-500);
+ background: var(--bg-ink-400);
.ant-form-item {
margin-bottom: 0px !important;
.ant-form-item-label {
label {
- color: var(--Vanilla-100, #fff) !important;
+ color: var(--bg-vanilla-100) !important;
font-size: 13px !important;
font-weight: 500;
line-height: 20px;
@@ -123,8 +123,8 @@
height: 32px;
background: var(--Ink-300, #16181d);
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ border: 1px solid var(--bg-slate-400);
+ color: var(--bg-vanilla-400);
}
.ant-input-group-addon {
@@ -134,13 +134,13 @@
background: var(--Ink-300, #16181d);
border: 1px solid var(--Greyscale-Slate-400, #1d212d);
border-left: 0px;
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ color: var(--bg-vanilla-400);
}
}
}
.question-label {
- color: var(--Vanilla-100, #fff);
+ color: var(--bg-vanilla-100);
font-size: 13px;
font-style: normal;
font-weight: 500;
@@ -148,7 +148,7 @@
}
.question-sub-label {
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ color: var(--bg-vanilla-400);
font-size: 11px;
font-style: normal;
font-weight: 400;
@@ -192,7 +192,7 @@
}
.question {
- color: var(--Vanilla-100, #fff);
+ color: var(--bg-vanilla-100);
font-size: 14px;
font-style: normal;
font-weight: 500;
@@ -209,9 +209,9 @@
border-radius: 2px;
font-size: 14px;
height: 40px;
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- background: var(--Ink-300, #16181d);
- color: #fff;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ color: var(--bg-vanilla-100);
&:focus-visible {
outline: none;
@@ -233,10 +233,10 @@
.grid-button,
.tool-button {
border-radius: 4px;
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- background: var(--Ink-300, #16181d);
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
padding: 12px;
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ color: var(--bg-vanilla-400);
font-size: 14px;
font-style: normal;
text-align: left;
@@ -271,9 +271,9 @@
align-items: center;
justify-content: space-between;
border-radius: 2px;
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- background: var(--Ink-300, #16181d);
- color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ color: var(--bg-vanilla-400);
box-shadow: none;
font-size: 14px;
font-style: normal;
@@ -310,10 +310,10 @@
align-items: center;
justify-content: center;
- border: 1px solid #1d212d;
+ border: 1px solid var(--bg-slate-400);
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
- background-color: #121317;
+ background-color: var(--bg-ink-300);
border-left: 0px;
border-top-left-radius: 0px;
@@ -336,9 +336,9 @@
.input-field {
flex: 0;
padding: 12px;
- border: 1px solid var(--Greyscale-Slate-400, #1d212d);
- background: var(--Ink-300, #16181d);
- color: #fff;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ color: var(--bg-vanilla-100);
border-radius: 4px;
font-size: 14px;
min-width: 258px;
@@ -366,7 +366,7 @@
.arrow {
font-size: 18px;
- color: #fff;
+ color: var(--bg-vanilla-100);
}
}
@@ -395,3 +395,194 @@
align-items: center;
margin: 0 auto;
}
+
+.lightMode {
+ .onboarding-questionaire-container {
+ .onboarding-questionaire-content {
+ .questions-container {
+ color: var(--bg-slate-300);
+ }
+
+ .title {
+ color: var(--bg-slate-300) !important;
+ }
+
+ .sub-title {
+ color: var(--bg-slate-400) !important;
+ }
+
+ .questions-form {
+ width: 100%;
+ display: flex;
+ min-height: 420px;
+ padding: 20px 24px 24px 24px;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ border-radius: 4px;
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+
+ .ant-form-item {
+ margin-bottom: 0px !important;
+
+ .ant-form-item-label {
+ label {
+ color: var(--bg-slate-300) !important;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 20px;
+ }
+ }
+ }
+
+ &.invite-team-members-form {
+ .invite-team-members-container {
+ max-height: 260px;
+ overflow-y: auto;
+
+ &::-webkit-scrollbar {
+ width: 0.1rem;
+ }
+ &::-webkit-scrollbar-corner {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: rgb(136, 136, 136);
+ border-radius: 0.625rem;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ }
+ }
+ }
+
+ .invite-team-members-container {
+ .ant-input-group {
+ .ant-input {
+ background: var(--bg-vanilla-100);
+ border: 1px solid var(--bg-vanilla-300);
+ color: var(--bg-slate-300);
+ }
+
+ .ant-input-group-addon {
+ font-size: 11px;
+ height: 32px;
+ min-width: 80px;
+ background: var(--bg-vanilla-100);
+ border: 1px solid var(--bg-vanilla-300);
+ border-left: 0px;
+ color: var(--bg-slate-300);
+ }
+ }
+ }
+
+ .question-label {
+ color: var(--bg-slate-300);
+ }
+
+ .question-sub-label {
+ color: var(--bg-slate-400);
+ }
+
+ .question {
+ color: var(--bg-slate-300);
+ }
+
+ input[type='text'] {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+
+ .radio-button,
+ .grid-button,
+ .tool-button {
+ border-radius: 4px;
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ padding: 12px;
+ color: var(--bg-slate-300);
+ font-size: 14px;
+ font-style: normal;
+ text-align: left;
+ font-weight: 400;
+ transition: background-color 0.3s ease;
+ min-width: 258px;
+ cursor: pointer;
+ box-sizing: border-box;
+ }
+
+ .radio-button.active,
+ .grid-button.active,
+ .tool-button.active,
+ .radio-button:hover,
+ .grid-button:hover,
+ .tool-button:hover {
+ border: 1px solid rgba(78, 116, 248, 0.4);
+ background: rgba(78, 116, 248, 0.2);
+ }
+
+ .onboarding-questionaire-button,
+ .add-another-member-button,
+ .remove-team-member-button {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 2px;
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ color: var(--bg-ink-300);
+ box-shadow: none;
+ font-size: 14px;
+ font-style: normal;
+ text-align: left;
+ font-weight: 400;
+ transition: background-color 0.3s ease;
+ cursor: pointer;
+ height: 40px;
+ box-sizing: border-box;
+
+ &:hover {
+ border: 1px solid rgba(78, 116, 248, 0.4);
+ background: rgba(78, 116, 248, 0.2);
+ }
+
+ &:focus-visible {
+ outline: none;
+ }
+
+ &.active {
+ border: 1px solid rgba(78, 116, 248, 0.4);
+ background: rgba(78, 116, 248, 0.2);
+ }
+ }
+
+ .remove-team-member-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ border: 1px solid var(--bg-vanilla-300);
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ background-color: var(--bg-vanilla-100);
+
+ border-left: 0px;
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ }
+
+ .input-field {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+
+ .arrow {
+ color: var(--bg-slate-300);
+ }
+ }
+ }
+}