diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
index b91935b1..82fa805a 100644
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -50,19 +50,13 @@
-
+ />
@@ -404,12 +398,14 @@ import { useNotificationsStore } from '@/stores/notifications';
import { useWorkspacesStore } from '@/stores/workspaces';
import ModalAskCredentials from '@/components/ModalAskCredentials';
import BaseUploadInput from '@/components/BaseUploadInput';
+import BaseSelect from '@/components/BaseSelect.vue';
export default {
name: 'WorkspaceAddConnectionPanel',
components: {
ModalAskCredentials,
- BaseUploadInput
+ BaseUploadInput,
+ BaseSelect
},
setup () {
const { addConnection } = useConnectionsStore();
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index fbb44c72..0e1bcecb 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -50,15 +50,13 @@
-
+
@@ -401,12 +399,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
import Connection from '@/ipc-api/Connection';
import ModalAskCredentials from '@/components/ModalAskCredentials';
import BaseUploadInput from '@/components/BaseUploadInput';
+import BaseSelect from '@/components/BaseSelect.vue';
export default {
name: 'WorkspaceEditConnectionPanel',
components: {
ModalAskCredentials,
- BaseUploadInput
+ BaseUploadInput,
+ BaseSelect
},
props: {
connection: Object
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index d0f0cff9..e5fb7691 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -87,7 +87,6 @@ option:checked {
}
}
-
.workspace-query-results {
overflow: auto;
white-space: nowrap;
@@ -209,17 +208,17 @@ option:checked {
}
}
}
-
- .modal-overlay{
- background: rgba( 255, 255, 255, 0.1);
- box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+
+ .modal-overlay {
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
}
-#wrapper:not(.no-blur){
- .modal-overlay{
- backdrop-filter: blur( 4px );
- -webkit-backdrop-filter: blur( 4px );
+#wrapper:not(.no-blur) {
+ .modal-overlay {
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
}
}
@@ -297,6 +296,35 @@ option:checked {
font-size: 0.7rem;
padding: 1px 0.4rem 0;
}
+
+ &.select {
+ &.select-open {
+ border-color: $primary-color !important;
+ @include control-shadow();
+ }
+
+ .select__list-wrapper {
+ border: 1px solid transparent;
+ border-radius: $border-radius;
+ box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
+ }
+
+ .select__list {
+ margin: 0;
+ li {
+ margin: 0;
+ padding: 0.3rem 0.8rem;
+ }
+ }
+
+ .select__option--selected {
+ background: rgba($primary-color, 0.25);
+ }
+
+ .select__option--highlight {
+ background: $primary-color;
+ }
+ }
}
.form-input[type="file"] {
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index 81628c38..665fd0fc 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -121,6 +121,15 @@
border-color: $primary-color;
}
+ .form-select {
+ .select {
+ &__list-wrapper {
+ border-color: $bg-color-gray;
+ background-color: $bg-color-light-dark;
+ }
+ }
+ }
+
.form-input[readonly] {
background-color: $bg-color-dark;
cursor: default;
@@ -232,7 +241,7 @@
}
}
}
-
+
.connection-panel {
.panel {
background: rgba($bg-color-light-dark, 50%);
@@ -240,9 +249,7 @@
}
.bg-checkered {
- background-image:
- linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
- linear-gradient(to right, black 50%, white 50%),
+ background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, black 50%, white 50%),
linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 2em 2em;
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index bc0fe5a6..d9aa8a34 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -18,6 +18,19 @@
background: #ababab;
}
+ .form-select {
+ .select {
+ &__list-wrapper {
+ border: #bcc3ce;
+ background-color: $body-bg;
+ }
+
+ &__option--highlight {
+ color: $light-color;
+ }
+ }
+ }
+
.menu {
.menu-item a {
&:hover {