Skip to content

UI Cleanup and Dark Mode Fixes #1019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ffrose merged 9 commits into from
May 21, 2026
Merged

UI Cleanup and Dark Mode Fixes #1019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8feccfe
chore(987): Modified translations and dark mode node selections
1AhmedYasser May 20, 2026
cd1ff0f
fix(987): Fixed Date & time / Separator dropdown going out of bounds
1AhmedYasser May 20, 2026
a84d34a
fix(987): Chat widget dark mode text color
1AhmedYasser May 20, 2026
697cf07
fix(987): Remove test tab from nodes
1AhmedYasser May 20, 2026
0a92a89
chore(987): Modified translations
1AhmedYasser May 20, 2026
6c5feff
chore(987): make edge selection more visible
1AhmedYasser May 20, 2026
df7e183
chore(987): Removed chat content height
1AhmedYasser May 20, 2026
7732a9e
chore(987): Aligned examples and keywords value fields spacing
1AhmedYasser May 20, 2026
99c2140
chore(987): Fixed format
1AhmedYasser May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions GUI/src/components/Collapsible/Collapsible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
background-color: get-color(white);
border-radius: 0 0 4px 4px;
overflow: hidden;

&[data-state='open'] {
overflow: visible;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion GUI/src/components/DynamicList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
tooltipText?: string;
};

const DynamicList: FC<DynamicListProps> = ({ label, labelWidth = 120, value, onChange, placeholder, tooltipText }) => {
const DynamicList: FC<DynamicListProps> = ({ label, labelWidth = 170, value, onChange, placeholder, tooltipText }) => {
const { t } = useTranslation();
const items = value?.length > 0 ? value : [''];

Expand All @@ -40,7 +40,7 @@
<div style={{ width: '100%' }}>
{items.map((value, index) => (
<div
key={index}

Check warning on line 43 in GUI/src/components/DynamicList/index.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Do not use Array index in keys 


See more on https://sonarcloud.io/project/issues?id=buerokratt_Service-Module&issues=AZ5FGusDRiG7CBVeqxEC&open=AZ5FGusDRiG7CBVeqxEC&pullRequest=1019
style={{
display: 'flex',
alignItems: 'center',
Expand Down
5 changes: 0 additions & 5 deletions GUI/src/components/FlowElementsPopup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,11 +450,6 @@ const FlowElementsPopup: React.FC = () => {
<Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.setup')}>
{t('serviceFlow.tabs.setup')}
</Tabs.Trigger>
{!isReadonly && (
<Tabs.Trigger className="vertical-tabs__trigger" value={t('serviceFlow.tabs.test')}>
{t('serviceFlow.tabs.test')}
</Tabs.Trigger>
)}
</Tabs.List>
<Tabs.Content value={t('serviceFlow.tabs.setup')} className="vertical-tabs__body">
{stepType === StepType.Textfield && (
Expand Down
2 changes: 1 addition & 1 deletion GUI/src/components/Toast/Toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
color: var(--dark-text-secondary);
}

&__list {
&__list:not(:empty) {
background-color: var(--dark-bg-extra-light);
}

Expand Down
9 changes: 4 additions & 5 deletions GUI/src/components/chat/chat.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@
overflow-y: auto;
overflow-x: hidden;
margin-bottom: auto;
height: 20em;
}

.message {
Expand Down Expand Up @@ -381,14 +380,15 @@
&.client {
.content {
background-color: #764ca0;
color: white;
}
}

&.admin {
.main {
.content {
background-color: get-color(sapphire-blue-12);
color: var(--dark-bg-extra-light);
color: white;

a {
color: #a8d4ff;
Expand All @@ -404,18 +404,17 @@
}

[data-theme='dark'] .system {
color: white;

&.success {
color: get-color(sea-green-11);
background: get-color(sea-green-6);
}

&.error {
color: get-color(jasper-11);
background: get-color(jasper-6);
}

&.info {
color: get-color(sapphire-blue-11);
background: get-color(sapphire-blue-6);
}

Expand Down
12 changes: 6 additions & 6 deletions GUI/src/i18n/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,13 +151,13 @@
"edit": "Edit",
"delete": "Delete",
"cancel": "Cancel",
"importMany": "Import many",
"importMany": "Import",
"import": {
"importSuccess": "{{count}} service{{lengthCheck}} imported successfully",
"importFailure": "Could not import the following files (Wrong format or corrupted): {{files}}",
"failedToImport": "Failed to import services"
},
"exportMany": "Export many",
"exportMany": "Export",
"exportAll": "Export All",
"export": "Export",
"exportAllConfirmation": "Are you sure you want to export all services?",
Expand Down Expand Up @@ -247,7 +247,7 @@
"examples": {
"title": "Examples",
"placeholder": "Add examples of what the user could ask to start the service",
"tooltip": "Enter sample user questions that trigger this service (e.g., ‘When is Midsummer festival?’)"
"tooltip": "Enter sample user questions that trigger this service (e.g. ‘When is Midsummer festival?’). It is recommended to include at least 5 examples"
},
"keywords": {
"title": "Keywords",
Expand Down Expand Up @@ -336,7 +336,7 @@
"chooseMemorySlots": "Choose memory slots"
},
"serviceFlow": {
"serviceConfiguration": "Service Configuration",
"serviceConfiguration": "Settings",
"element": {
"taraAuthentication": "Tara authorization",
"textfield": "Send message to client",
Expand Down Expand Up @@ -394,7 +394,7 @@
"or": "OR",
"not": "NOT",
"addRule": "+ Rule",
"addElement": "+ Element",
"addElement": "+ New variable",
"addGroup": "+ Group",
"remove": "Remove",
"signType": "Sign Type",
Expand All @@ -408,7 +408,7 @@
"confirmImport": "The current service will be rewritten!"
},
"previousVariables": {
"assignElements": "Assign Elements",
"assignElements": "Assigned Variables",
"dateAndTime": {
"title": "Date and time",
"base": "Base",
Expand Down
12 changes: 6 additions & 6 deletions GUI/src/i18n/et/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,13 +151,13 @@
"edit": "Muuda",
"delete": "Kustuta",
"cancel": "Tühista",
"importMany": "Impordi mitu",
"importMany": "Impordi",
"import": {
"importSuccess": "{{count}} teenus{{lengthCheck}} edukalt imporditud",
"importFailure": "Järgmisi faile ei õnnestunud importida (vale vorming või rikutud): {{files}}",
"failedToImport": "Teenuste importimine ebaõnnestus"
},
"exportMany": "Ekspordi mitu",
"exportMany": "Ekspordi",
"exportAll": "Ekspordi kõik",
"export": "Ekspordi",
"exportAllConfirmation": "Kas olete kindel, et soovite eksportida kõik teenused?",
Expand Down Expand Up @@ -244,7 +244,7 @@
"examples": {
"title": "Näidisküsimused",
"placeholder": "Lisa näiteid, mida kasutaja võiks küsida, et teenus käivituks",
"tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’)"
"tooltip": "Sisesta näidisküsimused, mille kaudu teenus käivitub (nt. ‘Millal on Jaanipäev?’). Soovituslik on lisada vähemalt 5 näidet."
},
"keywords": {
"title": "Märksõnad",
Expand Down Expand Up @@ -336,7 +336,7 @@
"chooseMemorySlots": "Vali mälukohad"
},
"serviceFlow": {
"serviceConfiguration": "Teenuse seaded",
"serviceConfiguration": "Seaded",
"element": {
"taraAuthentication": "TARA autentimine",
"textfield": "Sõnum kliendile",
Expand Down Expand Up @@ -394,7 +394,7 @@
"or": "VÕI",
"not": "MITTE",
"addRule": "+ Reegel",
"addElement": "+ Element",
"addElement": "+ Uus väärtus",
"addGroup": "+ Grupp",
"remove": "Eemalda",
"signType": "Märgi tüüp",
Expand All @@ -408,7 +408,7 @@
"confirmImport": "Teenus kirjutatakse üle!"
},
"previousVariables": {
"assignElements": "Määra elemendid",
"assignElements": "Määratud Väärtused",
"noName": "<Nimeta>",
"environmentVariables": {
"title": "Keskkonnamuutujad"
Expand Down
72 changes: 58 additions & 14 deletions GUI/src/pages/ServiceFlowPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,22 +77,28 @@
}

&.selected {
border: dashed 1px get-color(black-coral-1);
border: dashed 2px get-color(black-coral-5);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);

&.end {
border: 1px solid get-color(jasper-15);
border: 2px solid get-color(jasper-15);
box-shadow: 0 0 0 3px rgba(get-color(jasper-10), 0.25);
}
&.step {
border: 1px solid get-color(sapphire-blue-7);
border: 2px solid get-color(sapphire-blue-7);
box-shadow: 0 0 0 3px rgba(get-color(sapphire-blue-7), 0.2);
}
&.rule {
border: 1px solid get-color(black-coral-8);
border: 2px solid get-color(black-coral-8);
box-shadow: 0 0 0 3px rgba(get-color(black-coral-8), 0.2);
}
&.finishing-step {
border: 1px solid get-color(jasper-8);
border: 2px solid get-color(jasper-8);
box-shadow: 0 0 0 3px rgba(get-color(jasper-8), 0.2);
}
&.dynamic-choices {
border: 1px solid get-color(purple-8);
border: 2px solid get-color(purple-8);
box-shadow: 0 0 0 3px rgba(get-color(purple-8), 0.2);
}
}

Expand Down Expand Up @@ -186,12 +192,24 @@
}
}

[data-theme='light'] .react-flow {
&__edge {
&.selected {
.react-flow__edge-path {
stroke: get-color(sapphire-blue-9);
stroke-width: 2.5px;
filter: drop-shadow(0 0 4px rgba(23, 105, 171, 0.2));
}
}
}
}

.edge-button {
pointer-events: all;
cursor: pointer;
position: absolute;
background: white;
color: #777;

Check warning on line 212 in GUI/src/pages/ServiceFlowPage.scss

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Text does not meet the minimal contrast requirement with its background. 


See more on https://sonarcloud.io/project/issues?id=buerokratt_Service-Module&issues=AZ5E9qOx9HY42p9xF4ah&open=AZ5E9qOx9HY42p9xF4ah&pullRequest=1019
border-radius: 4px;
min-width: 80px;
min-height: 25px;
Expand All @@ -213,12 +231,6 @@
&__node {
color: var(--dark-text-secondary);

&.selected {
&.step {
border: 1px solid get-color(sapphire-blue-2);
}
}

&.start,
&.end {
color: get-color(white);
Expand Down Expand Up @@ -262,14 +274,46 @@
}

&.selected {
border: dashed 1px get-color(black-coral-10);
border: dashed 2px get-color(black-coral-8);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);

&.end {
border: 2px solid get-color(jasper-11);
box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.25);
}
&.step {
border: 2px solid get-color(sapphire-blue-2);
box-shadow: 0 0 0 3px rgba(80, 140, 220, 0.25);
}
&.rule {
border: 2px solid get-color(black-coral-8);
box-shadow: 0 0 0 3px rgba(150, 150, 160, 0.25);
}
&.finishing-step {
border: 2px solid get-color(jasper-11);
box-shadow: 0 0 0 3px rgba(200, 60, 60, 0.25);
}
&.dynamic-choices {
border: 2px solid get-color(purple-11);
box-shadow: 0 0 0 3px rgba(140, 80, 200, 0.25);
}
}
}

&__edge-path {
stroke: get-color(black-coral-10);
stroke: get-color(black-coral-6);
stroke-width: 1.5px;
}

&__edge {
&.selected {
.react-flow__edge-path {
stroke: get-color(sapphire-blue-4);
stroke-width: 2.5px;
filter: drop-shadow(0 0 5px rgba(139, 180, 213, 0.2));
}
}
}
}

[data-theme='dark'] .edge-button {
Expand Down
Loading