fix: missing accent color change

antares-sql · May 2, 2024 · 09c274a · 09c274a
1 parent 9bcd874
commit 09c274a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
@@ -1,8 +1,8 @@
 <template>
    <div
       id="footer"
-      :class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']"
-      :style="`background-color: ${footerColor};`"
+      :class="[lightColors.includes(accentColor) ? 'text-dark' : 'text-light']"
+      :style="`background-color: ${accentColor};`"
    >
       <div class="footer-left-elements">
          <ul class="footer-elements">
@@ -118,7 +118,7 @@ const { getWorkspace } = workspacesStore;
 const { getConnectionFolder, getConnectionByUid } = connectionsStore;
 
 const workspace = computed(() => getWorkspace(workspaceUid.value));
-const footerColor = computed(() => {
+const accentColor = computed(() => {
    if (getConnectionFolder(workspaceUid.value)?.color)
       return getConnectionFolder(workspaceUid.value).color;
    return '#E36929';
@@ -134,12 +134,17 @@ const versionString = computed(() => {
    return '';
 });
 
-watch(footerColor, () => {
-   document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color', footerColor.value);
-   document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color-shadow', hexToRGBA(footerColor.value, 0.2));
+watch(accentColor, () => {
+   changeAccentColor();
 });
 
 const openOutside = (link: string) => shell.openExternal(link);
+const changeAccentColor = () => {
+   document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color', accentColor.value);
+   document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color-shadow', hexToRGBA(accentColor.value, 0.2));
+};
+
+changeAccentColor();
 </script>
 
 <style lang="scss">

diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
@@ -24,6 +24,10 @@ body {
 
 a {
   color: var(--primary-color);
+
+  &:hover {
+    color: var(--primary-color-dark)
+  }
 }
 
 ::selection,
@@ -199,6 +203,14 @@ option:checked {
   animation: rotation 0.8s infinite linear;
 }
 
+.loading {
+  &::after {
+    border: 0.1rem solid var(--primary-color);
+    border-right-color: transparent;
+    border-top-color: transparent;
+  }
+}
+
 /* Override */
 .modal {
   .modal-container,