Skip to content
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

Jump to bottom

perf(ui): Improve dark theme #140

Merged
merged 12 commits into from
May 11, 2024
Merged

perf(ui): Improve dark theme #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
591b623
perf(ui): menu supports dark
May 10, 2024
d4b4d57
perf(ui): dialog supports dark
May 10, 2024
b3a097c
perf(ui): menu icon of EnvironmentModal supports dark
May 10, 2024
7b394b9
perf(ui): alert confirm prompt supports dark
May 10, 2024
704a3dc
perf(ui): tip text of SidebarSettingsModal supports dark
May 10, 2024
86d49fb
perf(ui): improve the dark and light theme adaptation of the input an…
May 10, 2024
e2d98f4
perf(ui): improve menu icon of EnvironmentModal
May 11, 2024
3fdc487
perf(ui): revoke some style for EnvironmentModal
May 11, 2024
56b670e
perf(ui): improve input styles to be consistent with previous ones
May 11, 2024
d4107e3
perf(ui): the ContextMenu retains its previous style in light mode
May 11, 2024
ef19d60
perf(ui): improve footer backupground color of dialog
May 11, 2024
45a7fed
Merge branch 'main' into perf/dark-theme
flawiddsouza May 11, 2024
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
9 changes: 5 additions & 4 deletions packages/ui/src/components/ContextMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,21 @@

export default {
props: {
options: Array,

Check warning on line 56 in packages/ui/src/components/ContextMenu.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'options' requires default value to be set
element: Element,
show: {
type: Boolean,
default: false
},
x: {

Check warning on line 62 in packages/ui/src/components/ContextMenu.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'x' requires default value to be set
type: Number,
required: false
},
y: {

Check warning on line 66 in packages/ui/src/components/ContextMenu.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'y' requires default value to be set
type: Number,
required: false
},
xOffset: {

Check warning on line 70 in packages/ui/src/components/ContextMenu.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'xOffset' requires default value to be set
type: Number,
required: false
}
Expand Down Expand Up @@ -138,25 +138,26 @@
.context-menu {
position: fixed;
z-index: 1;
border: 1px solid #82828240;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
border: 1px solid var(--menu-border-color);
box-shadow: 0 0 1rem 0 var(--box-shadow-color);
border-radius: calc(1rem * 0.3);
min-width: 15rem;
padding-top: 5px;
padding-bottom: 5px;
background: #ffffff;
background: var(--background-color);
overflow-y: auto;
left: -9999px;
}

button.context-menu-item {
padding: 0.5rem;
outline: 0;
background: #ffffff;
background: var(--background-color);
border: 0;
display: block;
width: 100%;
text-align: left;
color: var(--text-color);
}

button.context-menu-item:not(:active):focus {
Expand Down
6 changes: 2 additions & 4 deletions packages/ui/src/components/Modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
export default {
props: {
modelValue: Boolean,
title: String,

Check warning on line 29 in packages/ui/src/components/Modal.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'title' requires default value to be set
height: {

Check warning on line 30 in packages/ui/src/components/Modal.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'height' requires default value to be set
type: String,
required: false
},
width: {

Check warning on line 34 in packages/ui/src/components/Modal.vue

View workflow job for this annotation

GitHub Actions / test 

Prop 'width' requires default value to be set
type: String,
required: false
},
Expand Down Expand Up @@ -74,7 +74,6 @@
<style scoped>
.modal {
--gutter: 14px;
--soft-color: #fafafa;
top: 0;
left: 0;
width: 100vw;
Expand Down Expand Up @@ -138,10 +137,9 @@
.modal__container footer {
height: auto;
text-align: right;
border-top: solid 1px #cccccc;
border-top: solid 1px var(--modal-border-color);
padding: var(--gutter);
background-color: #ffffff;
background-color: var(--soft-color);
background-color: var(--modal-footer-background-color);
}

.modal__container footer button, .modal__container footer input {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/modals/EnvironmentModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="environment-sidebar-item-menu" :class="{ 'environment-sidebar-item-menu-disable-hide': environment.name === clickedContextMenuEnvironment.name && showEnvironmentContextMenuPopup === true }" @click.stop="showEnvironmentContextMenu($event, environment)">
<svg viewBox="0 0 24 24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g>
<path d="M12,16.5c0.83,0,1.5,0.67,1.5,1.5s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S11.17,16.5,12,16.5z M10.5,12 c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S10.5,11.17,10.5,12z M10.5,6c0,0.83,0.67,1.5,1.5,1.5 s1.5-0.67,1.5-1.5S12.83,4.5,12,4.5S10.5,5.17,10.5,6z"></path>
<path d="M12,16.5c0.83,0,1.5,0.67,1.5,1.5s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S11.17,16.5,12,16.5z M10.5,12 c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S10.5,11.17,10.5,12z M10.5,6c0,0.83,0.67,1.5,1.5,1.5 s1.5-0.67,1.5-1.5S12.83,4.5,12,4.5S10.5,5.17,10.5,6z" style="fill: var(--text-color);"></path>
</g>
</svg>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/modals/SidebarSettingsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<form @submit.prevent="showModalComp = false" v-if="showModalComp">
<modal :title="title" v-model="showModalComp" width="600px">
<label>
<div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Name <span style="color: #7b7a7a; font-weight: normal; font-style: italic;" v-if="collectionItem._type === 'request' || collectionItem._type === 'socket'">(also rename by double-clicking in sidebar)</span></div>
<div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Name <span style="color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;" v-if="collectionItem._type === 'request' || collectionItem._type === 'socket'">(also rename by double-clicking in sidebar)</span></div>
<input type="text" class="full-width-input" v-model="collectionItem.name" :placeholder="placeholder" spellcheck="false" required v-focus>
</label>

Expand All @@ -27,7 +27,7 @@
<div>
<RequestPanelHeaders :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelHeaders>
</div>
<div style="margin-top: 0.5rem; color: #7b7a7a; font-weight: normal; font-style: italic;">These will be applied to all requests in this folder and its subfolders</div>
<div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">These will be applied to all requests in this folder and its subfolders</div>
</div>

<div style="padding-bottom: 1rem"></div>
Expand All @@ -36,7 +36,7 @@
<div>
<RequestPanelAuth :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelAuth>
</div>
<div style="margin-top: 0.5rem; color: #7b7a7a; font-weight: normal; font-style: italic;">This will be applied to all requests in this folder and its subfolders</div>
<div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">This will be applied to all requests in this folder and its subfolders</div>
</div>
</div>

Expand Down
99 changes: 66 additions & 33 deletions packages/ui/src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,16 @@ html {
--modal-link-color: var(--link-color);
--input-disabled-background-color: rgba(239, 239, 239, 0.3);
--input-disabled-color: rgb(84, 84, 84);
--input-selection-background-color: #9cc3f5;
--input-highlight-outline-color: #1a73e8;
--input-border-color: var(--default-border-color);
--input-disabled-border-color: var(--input-border-color);
--button-background-color: white;
--button-hover-background-color: #f8f8f8;
--button-text-color: black;
--button-border-color: #8c8c8c;
--modal-background-color: white;
--modal-footer-background-color: #fafafa;
--modal-text-color: black;
--modal-caret-color: black;
--modal-border-color: lightgrey;
Expand All @@ -45,6 +50,9 @@ html {
--modal-button-hover-background-color: #f8f8f8;
--modal-button-text-color: black;
--modal-button-border-color: #8c8c8c;
--modal-input-disabled-background-color: var(--input-disabled-background-color);
--modal-input-disabled-color: var(--input-disabled-color);
--modal-input-selection-background-color: var(--input-selection-background-color);
--sidebar-item-active-color: #f3f3f3;
--resizer-background-color: #f1f1f1;
--response-panel-history-select-hover-color: #f7f7f7;
Expand Down Expand Up @@ -92,42 +100,55 @@ html {
--modal-valid-env-highlight-background-color: #e8f5e9;
--modal-invalid-env-highlight-color: #d32f2f;
--modal-invalid-env-highlight-background-color: #ffebee;
--box-shadow-color: rgba(0, 0, 0, 0.1);
--tip-text-color: #7b7a7a;
--modal-tip-text-color: var(--tip-text-color);
--primary-text-color: white;
--primary-background-color: #1a73e8;
--primary-hover-background-color: rgba(26, 115, 232, 0.5);
--menu-border-color: #82828240;
}

html.theme-dark {
--default-border-color: #484848;
--default-border-color-modal: lightgrey;
--default-border-color-modal: var(--default-border-color);
--border-color-lighter: #484848;
--border-color-lighter-darkened: #48484847;
--base-color-success: #0bb27e;
--base-color-info: #097bed;
--base-color-warning: #ffb400;
--base-color-error: #f06f57;
--background-color: #292929;
--text-color: #e0e0e0;
--caret-color: #e0e0e0;
--text-color: #d9d9d9;
--caret-color: var(--text-color);
--scrollbar: #505050;
--scrollbar-background: #353535;
--link-color: #d9c9ff;
--modal-link-color: rgb(0, 0, 238);
--modal-link-color: var(--link-color);
--input-disabled-background-color: rgba(59, 59, 59, 0.3);
--input-disabled-color: rgb(170, 170, 170);
--modal-input-disabled-background-color: rgba(239, 239, 239, 0.3);
--modal-input-disabled-color: rgb(84, 84, 84);
--input-selection-background-color: #083ca6;
--input-highlight-outline-color: #1a73e899;
--input-border-color: var(--default-border-color);
--input-disabled-border-color: var(--input-border-color);
--modal-input-disabled-background-color: var(--input-disabled-background-color);
--modal-input-disabled-color: var(--input-disabled-color);
--modal-input-selection-background-color: var(--input-selection-background-color);
--button-background-color: #292929;
--button-hover-background-color: #595858;
--button-text-color: #e0e0e0;
--button-text-color: var(--text-color);
--button-border-color: #8c8c8c;
--modal-background-color: white;
--modal-text-color: black;
--modal-caret-color: black;
--modal-border-color: lightgrey;
--modal-scrollbar: #dfdfdf;
--modal-scrollbar-background: #f3f2f2;
--modal-button-background-color: white;
--modal-button-hover-background-color: #f8f8f8;
--modal-button-text-color: black;
--modal-button-border-color: #8c8c8c;
--modal-background-color: var(--background-color);
--modal-footer-background-color: #232323;
--modal-text-color: var(--text-color);
--modal-caret-color: var(--caret-color);
--modal-border-color: var(--default-border-color-modal);
--modal-scrollbar: var(--scrollbar);
--modal-scrollbar-background: var(--background-color);
--modal-button-background-color: var(--button-background-color);
--modal-button-hover-background-color: var(--button-hover-background-color);
--modal-button-text-color: var(--button-text-color);
--modal-button-border-color: var(--button-border-color);
--sidebar-item-active-color: #353535;
--resizer-background-color: #353535;
--response-panel-history-select-hover-color: #353535;
Expand All @@ -144,16 +165,16 @@ html.theme-dark {
--cm-tooltip-background-color: var(--background-color);
--cm-selection-background-color: #ffffff33;
--cm-selection-match-background-color: #99ff773d;
--modal-cm-string: #a11;
--modal-cm-boolean: #219;
--modal-cm-null: #708;
--modal-cm-number: #164;
--modal-cm-comment: #940;
--modal-cm-keyword: #708;
--modal-cm-variable: #00f;
--modal-cm-tooltip-background-color: #f5f5f5;
--modal-cm-selection-background-color: #00000021;
--modal-cm-selection-match-background-color: #99ff7780;
--modal-cm-string: var(--cm-string);
--modal-cm-boolean: var(--cm-boolean);
--modal-cm-null: var(--cm-null);
--modal-cm-number: var(--cm-number);
--modal-cm-comment: var(--cm-comment);
--modal-cm-keyword: var(--cm-keyword);
--modal-cm-variable: var(--cm-variable);
--modal-cm-tooltip-background-color: var(--cm-tooltip-background-color);
--modal-cm-selection-background-color: var(--cm-selection-background-color);
--modal-cm-selection-match-background-color: var(--cm-selection-match-background-color);
--drop-target-background-color: #f8889b41;
--workspace-menu-hover-background-color: #505050;
--socket-header-background-color: var(--sidebar-item-active-color);
Expand All @@ -164,10 +185,17 @@ html.theme-dark {
--valid-env-highlight-background-color: #1b5e20;
--invalid-env-highlight-color: #ffcccb;
--invalid-env-highlight-background-color: #7c0404;
--modal-valid-env-highlight-color: #2e7d32;
--modal-valid-env-highlight-background-color: #e8f5e9;
--modal-invalid-env-highlight-color: #d32f2f;
--modal-invalid-env-highlight-background-color: #ffebee;
--modal-valid-env-highlight-color: var(--valid-env-highlight-color);
--modal-valid-env-highlight-background-color: var(--valid-env-highlight-background-color);
--modal-invalid-env-highlight-color: var(--invalid-env-highlight-color);
--modal-invalid-env-highlight-background-color: var(--invalid-env-highlight-background-color);
--box-shadow-color: rgba(255, 255, 255, 0.1);
--tip-text-color: #b1b1b1;
--modal-tip-text-color: var(--tip-text-color);
--primary-text-color: var(--text-color);
--primary-background-color: #1a73e8;
--primary-hover-background-color: rgba(26, 115, 232, 0.5);
--menu-border-color: #48484880;
}

* {
Expand Down Expand Up @@ -258,12 +286,12 @@ select option {
input:disabled {
background-color: var(--input-disabled-background-color);
color: var(--input-disabled-color);
border: 1px solid var(--default-border-color);
border: 1px solid var(--input-disabled-border-color);
}

input.full-width-input, select.full-width-input {
width: 100%;
border: 1px solid var(--modal-border-color);
border: 1px solid var(--input-border-color);
border-radius: var(--default-border-radius);
outline: 0;
padding: 0.4rem;
Expand All @@ -283,6 +311,11 @@ select.full-width-input option {
padding: 0.1rem;
}

.full-width-input:focus {
outline: 1px solid var(--input-highlight-outline-color);
border: 1px solid var(--input-highlight-outline-color);
}

.modal * {
caret-color: var(--modal-caret-color);
}
Expand Down
35 changes: 21 additions & 14 deletions packages/ui/src/web-components/alert-confirm-prompt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@ class AlertConfirmPrompt extends HTMLElement {
left: 0;
z-index: 9999;
--border-radius: 3px;
--primary-color: #1a73e8;
}

.dialog {
Expand All @@ -168,7 +167,7 @@ class AlertConfirmPrompt extends HTMLElement {
padding: 1rem;
box-shadow: 1px 1px 42px -16px black;
border-radius: 4px;
border: 1px solid #c6c6c6;
border: 1px solid var(--modal-border-color);
word-break: break-word;
}

Expand All @@ -184,41 +183,49 @@ class AlertConfirmPrompt extends HTMLElement {
.dialog-primary-button, .dialog-secondary-button {
padding: 8px 16px;
border-radius: var(--border-radius);
border: 1px solid lightgrey;
}

.dialog-primary-button {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
background: var(--primary-background-color);
color: var(--primary-text-color);
border: none;
width: 75px;
}

.dialog-primary-button:hover {
background: #2f7de3;
background: var(--primary-hover-background-color);
}

.dialog-secondary-button {
margin-left: 0.5rem;
color: var(--primary-color);
background: white;
background: var(--button-background-color);
color: var(--button-text-color);
border: 1px solid var(--button-border-color);
}

.dialog-secondary-button:hover {
background: #ebf3fd;
background: var(--button-hover-background-color);
}

.dialog-input {
padding: 7px;
width: 25rem;
border-radius: var(--border-radius);
border: 1px solid lightgrey;
border: 1px solid var(--input-border-color);
caret-color: var(--modal-caret-color);
background-color: var(--modal-background-color);
color: var(--text-color);
}

.dialog-input::selection {
background-color: var(--modal-input-selection-background-color);
}

.dialog-input:focus, .dialog-primary-button:focus, .dialog-secondary-button:focus {
outline: 2px solid var(--primary-color);
border-color: white;
.dialog-input:focus {
outline: 1px solid var(--input-highlight-outline-color);
border: 1px solid var(--input-highlight-outline-color);
background-color: var(--modal-background-color);
color: var(--text-color);
}
</style>
`
Expand Down
Loading