From 8789f3cdd3fdf14a414f913baf8fb58e7ed40ecf Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Wed, 11 Oct 2023 15:26:30 -0700
Subject: [PATCH 01/10] color palette and account selection combined

---
 web/src/App.vue                               |  25 +-
 .../configurePublish/AdvancedSettings.vue     |   5 +-
 .../configurePublish/CommonSettings.vue       |   5 +-
 .../configurePublish/ConfigurePublish.vue     |  12 +-
 .../configurePublish/DeploymentMode.vue       |  14 +-
 .../configurePublish/DestinationTarget.vue    | 111 ++++++-
 .../configurePublish/FilesToPublish.vue       |   5 +-
 .../configurePublish/LayoutPanel.vue          |  49 ++-
 .../configurePublish/PublishingHeader.vue     |   4 +
 .../configurePublish/PythonProject.vue        |   5 +-
 web/src/stores/color.ts                       |  78 ++++-
 web/src/utils/colorValues.ts                  | 309 ++++++++++++++++++
 12 files changed, 566 insertions(+), 56 deletions(-)
 create mode 100644 web/src/utils/colorValues.ts

diff --git a/web/src/App.vue b/web/src/App.vue
index 0aa2e094a..d68b1beb4 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -12,8 +12,8 @@
         <WhitePositLogo
           width="70px"
           height="30px"
-          :fill="colorStore.activePallete.logo.fill"
-          :stroke="colorStore.activePallete.logo.stroke"
+          :fill="colorToHex(colorStore.activePallete.logo.fill)"
+          :stroke="colorToHex(colorStore.activePallete.logo.stroke)"
           alt="Posit PBC Logo"
         />
         <q-toolbar-title class="q-pl-xs">
@@ -49,7 +49,8 @@ import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';
 
 import { useApi } from 'src/api';
 import { useDeploymentStore } from 'src/stores/deployment';
-import { useColorStore } from './stores/color';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 import { EventStream } from 'src/api/resources/EventStream';
 import {
@@ -109,7 +110,7 @@ const incomingEvent = (msg: EventStreamMessage) => {
 };
 eventStream.addEventMonitorCallback('*', incomingEvent);
 
-eventStream.setDebugMode(true);
+eventStream.setDebugMode(false);
 eventStream.open('/api/events?stream=messages');
 console.log(eventStream.status());
 
@@ -120,3 +121,19 @@ onBeforeUnmount(() => {
 
 getInitialDeploymentState();
 </script>
+
+<style lang="scss">
+// Add colors to Quasar Palette (white and black)
+.text-white {
+  color: white !important;
+}
+.bg-white {
+  background: white !important;
+}
+.text-black {
+  color: black !important;
+}
+.bg-black {
+  background: black !important;
+}
+</style>
diff --git a/web/src/components/configurePublish/AdvancedSettings.vue b/web/src/components/configurePublish/AdvancedSettings.vue
index 985e4a1e4..5edb12b4f 100644
--- a/web/src/components/configurePublish/AdvancedSettings.vue
+++ b/web/src/components/configurePublish/AdvancedSettings.vue
@@ -8,8 +8,8 @@
       <PublisherAdvancedLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        :fill="colorToHex(colorStore.activePallete.icon.fill)"
+        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
       />
     </template>
     TODO: Show list of editable settings (and some as read-only)
@@ -21,6 +21,7 @@
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherAdvancedLogo from 'src/components/icons/PublisherAdvancedLogo.vue';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
diff --git a/web/src/components/configurePublish/CommonSettings.vue b/web/src/components/configurePublish/CommonSettings.vue
index 829c2c048..0577fef42 100644
--- a/web/src/components/configurePublish/CommonSettings.vue
+++ b/web/src/components/configurePublish/CommonSettings.vue
@@ -8,8 +8,8 @@
       <PublisherSettingsLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        :fill="colorToHex(colorStore.activePallete.icon.fill)"
+        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
       />
     </template>
     TODO: Common settings, probably off the info panel in dashboard
@@ -21,6 +21,7 @@ import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherSettingsLogo from 'src/components/icons/PublisherSettingsLogo.vue';
 
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
diff --git a/web/src/components/configurePublish/ConfigurePublish.vue b/web/src/components/configurePublish/ConfigurePublish.vue
index d37fe27d4..8670aa03e 100644
--- a/web/src/components/configurePublish/ConfigurePublish.vue
+++ b/web/src/components/configurePublish/ConfigurePublish.vue
@@ -12,32 +12,30 @@
       @publish="emit('publish')"
     />
     <q-list
-      bordered
       class="rounded-borders"
     >
       <DestinationTarget
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <FilesToPublish
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <PythonProject
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <!-- Common and Advanced Settings commented out until implemented. -->
       <CommonSettings
         v-if="false"
         group="configurePublish"
-      />
-      <q-separator
-        v-if="false"
+        class="q-my-sm"
       />
       <AdvancedSettings
         v-if="false"
         group="configurePublish"
+        class="q-my-sm"
       />
     </q-list>
   </q-page>
diff --git a/web/src/components/configurePublish/DeploymentMode.vue b/web/src/components/configurePublish/DeploymentMode.vue
index 5147331b4..b9ff78208 100644
--- a/web/src/components/configurePublish/DeploymentMode.vue
+++ b/web/src/components/configurePublish/DeploymentMode.vue
@@ -11,7 +11,11 @@
         padding="2px"
         spread
         :options="options"
-        style="border: 1px solid #027be3;"
+        :style="toggleStyle"
+        :text-color="colorStore.activePallete.deploymentMode.toggle.inActive.text"
+        :color="colorStore.activePallete.deploymentMode.toggle.inActive.background"
+        :toggle-text-color="colorStore.activePallete.deploymentMode.toggle.active.text"
+        :toggle-color="colorStore.activePallete.deploymentMode.toggle.active.background"
       />
     </div>
   </div>
@@ -21,6 +25,10 @@
 import { PropType, computed } from 'vue';
 
 import { DeploymentModeType } from 'src/api/types/deployments.ts';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+
+const colorStore = useColorStore();
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -45,4 +53,8 @@ const value = computed({
   }
 });
 
+const toggleStyle = computed(() => {
+  return `border: 1px solid ${colorToHex(colorStore.activePallete.outline)};`;
+});
+
 </script>
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index 26e2d54a6..c06093089 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -9,32 +9,129 @@
       <PublisherDestinationLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        :fill="colorToHex(colorStore.activePallete.icon.fill)"
+        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
       />
     </template>
-    TODO: select from previous deployments or add to existing or new targets
+    <div class="q-pa-sm">
+      <q-list>
+        <q-item
+          v-for="account in accounts"
+          :key="account.name"
+          tag="label"
+          class="q-my-sm row items-center"
+          :style="itemStyle"
+        >
+          <q-item-section
+            avatar
+            top
+            class="col-1"
+          >
+            <q-radio
+              v-model="accountName"
+              :val="account.name"
+              :color="colorStore.activePallete.bullet"
+            />
+          </q-item-section>
+          <q-item-section
+            class="q-ml-md"
+          >
+            <q-item-label>
+              {{ account.name }}
+            </q-item-label>
+            <q-item-label
+              caption
+              :style="captionStyle"
+            >
+              Account: {{ calculateName(account) }}
+            </q-item-label>
+            <q-item-label
+              caption
+              :style="captionStyle"
+            >
+              URL: {{ account.url }}
+            </q-item-label>
+            <q-item-label
+              caption
+              class="q-pt-sm"
+              :style="credentialStyle"
+            >
+              Credentials managed by: {{ account.source }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
   </LayoutPanel>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherDestinationLogo from 'src/components/icons/PublisherDestinationLogo.vue';
 
 import { useDeploymentStore } from 'src/stores/deployment';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+import { Account, useApi } from 'src/api';
 
 const deploymentStore = useDeploymentStore();
 const colorStore = useColorStore();
 
+const accountName = ref('');
+
 const destinationTitle = computed(() => {
-  const accountName = deploymentStore.deployment?.target.accountName;
-  if (accountName) {
-    return `New deployment on ${accountName}`;
+  if (accountName.value) {
+    return `New deployment on ${accountName.value}`;
   }
   return '';
 });
 
+const api = useApi();
+const accounts = ref(<Account[]>[]);
+
+onMounted(async() => {
+  try {
+    const response = await api.accounts.getAll();
+    accounts.value = response.data.accounts;
+    if (deploymentStore.deployment) {
+      accountName.value = deploymentStore.deployment.target.accountName;
+    }
+  } catch (err) {
+    // TODO: handle the error
+  }
+});
+
+const calculateName = (account: Account) => {
+  if (account.authType === 'token-key') {
+    return account.accountName;
+  } else if (account.authType === 'api-key') {
+    return 'Using API Key';
+  }
+  return '';
+};
+
+const itemStyle = computed(() => {
+  return `
+    border: ${colorToHex(colorStore.activePallete.destination.outline)} solid 2px; border-radius: 10px;
+    background-color: blue${colorToHex(colorStore.activePallete.destination.background)};
+    color: ${colorToHex(colorStore.activePallete.destination.text)};
+  `;
+});
+
+const captionStyle = computed(() => {
+  return `
+    color: ${colorToHex(colorStore.activePallete.destination.caption)};
+  `;
+});
+
+const credentialStyle = computed(() => {
+  return `
+    color: ${colorToHex(colorStore.activePallete.destination.caption)};
+    font-size: x-small; 
+    text-align: end;
+  `;
+})
+
 </script>
diff --git a/web/src/components/configurePublish/FilesToPublish.vue b/web/src/components/configurePublish/FilesToPublish.vue
index f47e22237..51e848340 100644
--- a/web/src/components/configurePublish/FilesToPublish.vue
+++ b/web/src/components/configurePublish/FilesToPublish.vue
@@ -9,8 +9,8 @@
       <PublisherFolderLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        :fill="colorToHex(colorStore.activePallete.icon.fill)"
+        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
       />
     </template>
     <q-tree
@@ -34,6 +34,7 @@ import PublisherFolderLogo from 'src/components/icons/PublisherFolderLogo.vue';
 import { useApi, DeploymentFile } from 'src/api';
 import { useDeploymentStore } from 'src/stores/deployment';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const NODE_KEY = 'key';
 
diff --git a/web/src/components/configurePublish/LayoutPanel.vue b/web/src/components/configurePublish/LayoutPanel.vue
index 4e2d00e56..a8cf2a3bd 100644
--- a/web/src/components/configurePublish/LayoutPanel.vue
+++ b/web/src/components/configurePublish/LayoutPanel.vue
@@ -4,8 +4,7 @@
   <q-expansion-item
     :default-opened="defaultOpen"
     :expand-icon="expandIcon"
-    header-class="q-px-none"
-    :style="headerStyle"
+    :header-style="headerStyle"
     :group="group"
     @before-show="onBeforeShow"
     @before-hide="onBeforeHide"
@@ -49,6 +48,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 
@@ -70,23 +70,40 @@ const onBeforeHide = () => {
   isOpen.value = false;
 };
 
-const headerStyle = computed(() : string => {
+const headerStyle = computed(() : string[] => {
+  const styles = [
+    `border-left: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
+    `border-top: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
+    `border-right: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
+  ];
+  if (isOpen.value) {
+    styles.push(`border-bottom: none !important;`);
+  } else {
+    styles.push(`border-bottom: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`);
+  }
+
   const bg = isOpen.value ?
-    `${colorStore.activePallete.expansion.header.open.background}` :
-    `${colorStore.activePallete.expansion.header.closed.background}`;
-  const text = isOpen.value ?
-    `${colorStore.activePallete.expansion.header.open.text}` :
-    `${colorStore.activePallete.expansion.header.closed.text}`;
+    `${colorToHex(colorStore.activePallete.expansion.header.open.background)}` :
+    `${colorToHex(colorStore.activePallete.expansion.header.closed.background)}`;
+  styles.push(`background-color: ${bg} !important;`);
 
-  return `
-    background-color: ${bg};
-    color: ${text};
-  `;
+  const text = isOpen.value ?
+    `${colorToHex(colorStore.activePallete.expansion.header.open.text)}` :
+    `${colorToHex(colorStore.activePallete.expansion.header.closed.text)}`;
+  styles.push(`color: ${text} !important;`);
+  return styles;
 });
+
 const cardStyle = computed(() : string => {
-  return `
-    background-color: ${colorStore.activePallete.expansion.card.background};
-    color: ${colorStore.activePallete.expansion.card.text};
-  `;
+  const result = (`
+    border-left: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
+    border-top: none !important;
+    border-right: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
+    border-bottom: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
+    background-color: ${colorToHex(colorStore.activePallete.expansion.card.background)} !important;
+    color: ${colorToHex(colorStore.activePallete.expansion.card.text)} !important;
+  `);
+  console.log(`cardStyle = ${result}`);
+  return result;
 });
 </script>
diff --git a/web/src/components/configurePublish/PublishingHeader.vue b/web/src/components/configurePublish/PublishingHeader.vue
index b5754fac0..287ced50f 100644
--- a/web/src/components/configurePublish/PublishingHeader.vue
+++ b/web/src/components/configurePublish/PublishingHeader.vue
@@ -6,6 +6,7 @@
   >
     <q-input
       v-model="title"
+      :color="colorStore.activePallete.textInput.active"
       label="Title"
       outlined
       dense
@@ -28,6 +29,9 @@
 
 import { ref } from 'vue';
 import { useApi } from 'src/api';
+import { useColorStore } from 'src/stores/color';
+
+const colorStore = useColorStore();
 
 const emit = defineEmits(['publish']);
 
diff --git a/web/src/components/configurePublish/PythonProject.vue b/web/src/components/configurePublish/PythonProject.vue
index 866346e80..5ca85441f 100644
--- a/web/src/components/configurePublish/PythonProject.vue
+++ b/web/src/components/configurePublish/PythonProject.vue
@@ -8,8 +8,8 @@
       <PublisherPythonLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        :fill="colorToHex(colorStore.activePallete.icon.fill)"
+        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
       />
     </template>
     TODO: Show detailed python version and list of package dependencies
@@ -22,6 +22,7 @@ import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherPythonLogo from 'src/components/icons/PublisherPythonLogo.vue';
 
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index 610db719b..4c465a463 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -7,58 +7,110 @@ import { useQuasar } from 'quasar';
 export const useColorStore = defineStore('color', () => {
   const $q = useQuasar();
 
+  // use Quasar's colors (From Color List:
+  // https://quasar.dev/style/color-palette#color-list
+  // and duplicated within utils/colorValues.ts
+  // Depending on usage need, can either use that string
+  // value into Quasar or can pass hex value by calling
+  // colorToHex() utility on it.
   const palette = {
     dark: {
+      textInput: {
+        active: 'grey-1',
+      },
+      outline: 'grey-6',
       icon: {
-        fill: '#D3D3D3',
+        fill: 'grey-4',
         stroke: 'none',
       },
       logo: {
-        fill: '#F8F8FF',
+        fill: 'grey-1',
         stroke: 'none',
       },
+      destination: {
+        outline: 'grey-6',
+        background: 'grey-9',
+        text: 'grey-1',
+        caption: 'grey-6',
+      },
       expansion: {
         header: {
           open: {
-            background: '#303030',
-            text: '#F8F8FF',
+            background: 'grey-8',
+            text: 'grey-1',
           },
           closed: {
-            background: 'black',
-            text: '#F8F8FF',
+            background: 'grey-10',
+            text: 'grey-1',
           },
         },
         card: {
-          background: '#303030',
-          text: '#F8F8FF',
+          background: 'grey-10',
+          text: 'grey-1',
+        },
+      },
+      bullet: 'grey-5',
+      deploymentMode: {
+        toggle: {
+          active: {
+            background: 'grey-6',
+            text: 'grey-10',
+          },
+          inActive: {
+            background: 'grey-10',
+            text: 'grey-7',
+          },
         },
       },
     },
     light: {
+      textInput: {
+        active: 'grey-10',
+      },
+      outline: 'grey-10',
       icon: {
-        fill: 'darkslategrey',
+        fill: 'grey-8',
         stroke: 'none',
       },
       logo: {
-        fill: '#E6EDF3',
+        fill: 'grey-1',
         stroke: 'none',
       },
+      destination: {
+        outline: 'grey-10',
+        background: 'grey-1',
+        text: 'black',
+        caption: 'grey-10',
+      },
       expansion: {
         header: {
           open: {
-            background: '#F5F5F5',
+            background: 'grey-3',
             text: 'black',
           },
           closed: {
-            background: 'white',
+            background: 'grey-1',
             text: 'black',
           },
         },
         card: {
-          background: '#F5F5F5',
+          background: 'grey-2',
           text: 'black',
         },
       },
+      bullet: 'grey-8',
+      deploymentMode: {
+        toggle: {
+          active: {
+            background: 'grey-4',
+            text: 'black',
+          },
+          inActive: {
+            background: 'grey-1',
+            text: 'black',
+          },
+        },
+      },
     }
   };
 
diff --git a/web/src/utils/colorValues.ts b/web/src/utils/colorValues.ts
new file mode 100644
index 000000000..30f466678
--- /dev/null
+++ b/web/src/utils/colorValues.ts
@@ -0,0 +1,309 @@
+// Copyright (C) 2023 by Posit Software, PBC.
+
+// Quasar's colors from Color List,
+// https,//quasar.dev/style/color-palette#color-list
+// with their hex strings. This eliminates the need
+// to use the Quasar utility of getPaletteColor, which
+// they warn is an expensive operation. Instead, we'll
+// use the exported colorToHex method to convert.
+
+/* eslint-disable quote-props */
+const colorMap = new Map<string, string>([
+  // added for convenience
+  ['none', 'none'],
+  ['black', '#000000'],
+  ['white', '#ffffff'],
+  // values below defined by quasar
+  ['red', '#f44336'],
+  ['red-1', '#ffebee'],
+  ['red-2', '#ffcdd2'],
+  ['red-3', '#ef9a9a'],
+  ['red-4', '#e57373'],
+  ['red-5', '#ef5350'],
+  ['red-6', '#f44336'],
+  ['red-7', '#e53935'],
+  ['red-8', '#d32f2f'],
+  ['red-9', '#c62828'],
+  ['red-10', '#b71c1c'],
+  ['red-11', '#ff8a80'],
+  ['red-12', '#ff5252'],
+  ['red-13', '#ff1744'],
+  ['red-14', '#d50000'],
+  ['pink', '#e91e63'],
+  ['pink-1', '#fce4ec'],
+  ['pink-2', '#f8bbd0'],
+  ['pink-3', '#f48fb1'],
+  ['pink-4', '#f06292'],
+  ['pink-5', '#ec407a'],
+  ['pink-6', '#e91e63'],
+  ['pink-7', '#d81b60'],
+  ['pink-8', '#c2185b'],
+  ['pink-9', '#ad1457'],
+  ['pink-10', '#880e4f'],
+  ['pink-11', '#ff80ab'],
+  ['pink-12', '#ff4081'],
+  ['pink-13', '#f50057'],
+  ['pink-14', '#c51162'],
+  ['purple', '#9c27b0'],
+  ['purple-1', '#f3e5f5'],
+  ['purple-2', '#e1bee7'],
+  ['purple-3', '#ce93d8'],
+  ['purple-4', '#ba68c8'],
+  ['purple-5', '#ab47bc'],
+  ['purple-6', '#9c27b0'],
+  ['purple-7', '#8e24aa'],
+  ['purple-8', '#7b1fa2'],
+  ['purple-9', '#6a1b9a'],
+  ['purple-10', '#4a148c'],
+  ['purple-11', '#ea80fc'],
+  ['purple-12', '#e040fb'],
+  ['purple-13', '#d500f9'],
+  ['purple-14', '#aa00ff'],
+  ['deep-purple', '#673ab7'],
+  ['deep-purple-1', '#ede7f6'],
+  ['deep-purple-2', '#d1c4e9'],
+  ['deep-purple-3', '#b39ddb'],
+  ['deep-purple-4', '#9575cd'],
+  ['deep-purple-5', '#7e57c2'],
+  ['deep-purple-6', '#673ab7'],
+  ['deep-purple-7', '#5e35b1'],
+  ['deep-purple-8', '#512da8'],
+  ['deep-purple-9', '#4527a0'],
+  ['deep-purple-10', '#311b92'],
+  ['deep-purple-11', '#b388ff'],
+  ['deep-purple-12', '#7c4dff'],
+  ['deep-purple-13', '#651fff'],
+  ['deep-purple-14', '#6200ea'],
+  ['indigo', '#3f51b5'],
+  ['indigo-1', '#e8eaf6'],
+  ['indigo-2', '#c5cae9'],
+  ['indigo-3', '#9fa8da'],
+  ['indigo-4', '#7986cb'],
+  ['indigo-5', '#5c6bc0'],
+  ['indigo-6', '#3f51b5'],
+  ['indigo-7', '#3949ab'],
+  ['indigo-8', '#303f9f'],
+  ['indigo-9', '#283593'],
+  ['indigo-10', '#1a237e'],
+  ['indigo-11', '#8c9eff'],
+  ['indigo-12', '#536dfe'],
+  ['indigo-13', '#3d5afe'],
+  ['indigo-14', '#304ffe'],
+  ['blue', '#2196f3'],
+  ['blue-1', '#e3f2fd'],
+  ['blue-2', '#bbdefb'],
+  ['blue-3', '#90caf9'],
+  ['blue-4', '#64b5f6'],
+  ['blue-5', '#42a5f5'],
+  ['blue-6', '#2196f3'],
+  ['blue-7', '#1e88e5'],
+  ['blue-8', '#1976d2'],
+  ['blue-9', '#1565c0'],
+  ['blue-10', '#0d47a1'],
+  ['blue-11', '#82b1ff'],
+  ['blue-12', '#448aff'],
+  ['blue-13', '#2979ff'],
+  ['blue-14', '#2962ff'],
+  ['light-blue', '#03a9f4'],
+  ['light-blue-1', '#e1f5fe'],
+  ['light-blue-2', '#b3e5fc'],
+  ['light-blue-3', '#81d4fa'],
+  ['light-blue-4', '#4fc3f7'],
+  ['light-blue-5', '#29b6f6'],
+  ['light-blue-6', '#03a9f4'],
+  ['light-blue-7', '#039be5'],
+  ['light-blue-8', '#0288d1'],
+  ['light-blue-9', '#0277bd'],
+  ['light-blue-10', '#01579b'],
+  ['light-blue-11', '#80d8ff'],
+  ['light-blue-12', '#40c4ff'],
+  ['light-blue-13', '#00b0ff'],
+  ['light-blue-14', '#0091ea'],
+  ['cyan', '#00bcd4'],
+  ['cyan-1', '#e0f7fa'],
+  ['cyan-2', '#b2ebf2'],
+  ['cyan-3', '#80deea'],
+  ['cyan-4', '#4dd0e1'],
+  ['cyan-5', '#26c6da'],
+  ['cyan-6', '#00bcd4'],
+  ['cyan-7', '#00acc1'],
+  ['cyan-8', '#0097a7'],
+  ['cyan-9', '#00838f'],
+  ['cyan-10', '#006064'],
+  ['cyan-11', '#84ffff'],
+  ['cyan-12', '#18ffff'],
+  ['cyan-13', '#00e5ff'],
+  ['cyan-14', '#00b8d4'],
+  ['teal', '#009688'],
+  ['teal-1', '#e0f2f1'],
+  ['teal-2', '#b2dfdb'],
+  ['teal-3', '#80cbc4'],
+  ['teal-4', '#4db6ac'],
+  ['teal-5', '#26a69a'],
+  ['teal-6', '#009688'],
+  ['teal-7', '#00897b'],
+  ['teal-8', '#00796b'],
+  ['teal-9', '#00695c'],
+  ['teal-10', '#004d40'],
+  ['teal-11', '#a7ffeb'],
+  ['teal-12', '#64ffda'],
+  ['teal-13', '#1de9b6'],
+  ['teal-14', '#00bfa5'],
+  ['green', '#4caf50'],
+  ['green-1', '#e8f5e9'],
+  ['green-2', '#c8e6c9'],
+  ['green-3', '#a5d6a7'],
+  ['green-4', '#81c784'],
+  ['green-5', '#66bb6a'],
+  ['green-6', '#4caf50'],
+  ['green-7', '#43a047'],
+  ['green-8', '#388e3c'],
+  ['green-9', '#2e7d32'],
+  ['green-10', '#1b5e20'],
+  ['green-11', '#b9f6ca'],
+  ['green-12', '#69f0ae'],
+  ['green-13', '#00e676'],
+  ['green-14', '#00c853'],
+  ['light-green', '#8bc34a'],
+  ['light-green-1', '#f1f8e9'],
+  ['light-green-2', '#dcedc8'],
+  ['light-green-3', '#c5e1a5'],
+  ['light-green-4', '#aed581'],
+  ['light-green-5', '#9ccc65'],
+  ['light-green-6', '#8bc34a'],
+  ['light-green-7', '#7cb342'],
+  ['light-green-8', '#689f38'],
+  ['light-green-9', '#558b2f'],
+  ['light-green-10', '#33691e'],
+  ['light-green-11', '#ccff90'],
+  ['light-green-12', '#b2ff59'],
+  ['light-green-13', '#76ff03'],
+  ['light-green-14', '#64dd17'],
+  ['lime', '#cddc39'],
+  ['lime-1', '#f9fbe7'],
+  ['lime-2', '#f0f4c3'],
+  ['lime-3', '#e6ee9c'],
+  ['lime-4', '#dce775'],
+  ['lime-5', '#d4e157'],
+  ['lime-6', '#cddc39'],
+  ['lime-7', '#c0ca33'],
+  ['lime-8', '#afb42b'],
+  ['lime-9', '#9e9d24'],
+  ['lime-10', '#827717'],
+  ['lime-11', '#f4ff81'],
+  ['lime-12', '#eeff41'],
+  ['lime-13', '#c6ff00'],
+  ['lime-14', '#aeea00'],
+  ['yellow', '#ffeb3b'],
+  ['yellow-1', '#fffde7'],
+  ['yellow-2', '#fff9c4'],
+  ['yellow-3', '#fff59d'],
+  ['yellow-4', '#fff176'],
+  ['yellow-5', '#ffee58'],
+  ['yellow-6', '#ffeb3b'],
+  ['yellow-7', '#fdd835'],
+  ['yellow-8', '#fbc02d'],
+  ['yellow-9', '#f9a825'],
+  ['yellow-10', '#f57f17'],
+  ['yellow-11', '#ffff8d'],
+  ['yellow-12', '#ffff00'],
+  ['yellow-13', '#ffea00'],
+  ['yellow-14', '#ffd600'],
+  ['amber', '#ffc107'],
+  ['amber-1', '#fff8e1'],
+  ['amber-2', '#ffecb3'],
+  ['amber-3', '#ffe082'],
+  ['amber-4', '#ffd54f'],
+  ['amber-5', '#ffca28'],
+  ['amber-6', '#ffc107'],
+  ['amber-7', '#ffb300'],
+  ['amber-8', '#ffa000'],
+  ['amber-9', '#ff8f00'],
+  ['amber-10', '#ff6f00'],
+  ['amber-11', '#ffe57f'],
+  ['amber-12', '#ffd740'],
+  ['amber-13', '#ffc400'],
+  ['amber-14', '#ffab00'],
+  ['orange', '#ff9800'],
+  ['orange-1', '#fff3e0'],
+  ['orange-2', '#ffe0b2'],
+  ['orange-3', '#ffcc80'],
+  ['orange-4', '#ffb74d'],
+  ['orange-5', '#ffa726'],
+  ['orange-6', '#ff9800'],
+  ['orange-7', '#fb8c00'],
+  ['orange-8', '#f57c00'],
+  ['orange-9', '#ef6c00'],
+  ['orange-10', '#e65100'],
+  ['orange-11', '#ffd180'],
+  ['orange-12', '#ffab40'],
+  ['orange-13', '#ff9100'],
+  ['orange-14', '#ff6d00'],
+  ['deep-orange', '#ff5722'],
+  ['deep-orange-1', '#fbe9e7'],
+  ['deep-orange-2', '#ffccbc'],
+  ['deep-orange-3', '#ffab91'],
+  ['deep-orange-4', '#ff8a65'],
+  ['deep-orange-5', '#ff7043'],
+  ['deep-orange-6', '#ff5722'],
+  ['deep-orange-7', '#f4511e'],
+  ['deep-orange-8', '#e64a19'],
+  ['deep-orange-9', '#d84315'],
+  ['deep-orange-10', '#bf360c'],
+  ['deep-orange-11', '#ff9e80'],
+  ['deep-orange-12', '#ff6e40'],
+  ['deep-orange-13', '#ff3d00'],
+  ['deep-orange-14', '#dd2c00'],
+  ['brown', '#795548'],
+  ['brown-1', '#efebe9'],
+  ['brown-2', '#d7ccc8'],
+  ['brown-3', '#bcaaa4'],
+  ['brown-4', '#a1887f'],
+  ['brown-5', '#8d6e63'],
+  ['brown-6', '#795548'],
+  ['brown-7', '#6d4c41'],
+  ['brown-8', '#5d4037'],
+  ['brown-9', '#4e342e'],
+  ['brown-10', '#3e2723'],
+  ['brown-11', '#d7ccc8'],
+  ['brown-12', '#bcaaa4'],
+  ['brown-13', '#8d6e63'],
+  ['brown-14', '#5d4037'],
+  ['grey', '#9e9e9e'],
+  ['grey-1', '#fafafa'],
+  ['grey-2', '#f5f5f5'],
+  ['grey-3', '#eeeeee'],
+  ['grey-4', '#e0e0e0'],
+  ['grey-5', '#bdbdbd'],
+  ['grey-6', '#9e9e9e'],
+  ['grey-7', '#757575'],
+  ['grey-8', '#616161'],
+  ['grey-9', '#424242'],
+  ['grey-10', '#212121'],
+  ['grey-11', '#f5f5f5'],
+  ['grey-12', '#eeeeee'],
+  ['grey-13', '#bdbdbd'],
+  ['grey-14', '#616161'],
+  ['blue-grey', '#607d8b'],
+  ['blue-grey-1', '#eceff1'],
+  ['blue-grey-2', '#cfd8dc'],
+  ['blue-grey-3', '#b0bec5'],
+  ['blue-grey-4', '#90a4ae'],
+  ['blue-grey-5', '#78909c'],
+  ['blue-grey-6', '#607d8b'],
+  ['blue-grey-7', '#546e7a'],
+  ['blue-grey-8', '#455a64'],
+  ['blue-grey-9', '#37474f'],
+  ['blue-grey-10', '#263238'],
+  ['blue-grey-11', '#cfd8dc'],
+  ['blue-grey-12', '#b0bec5'],
+  ['blue-grey-13', '#78909c'],
+  ['blue-grey-14', '#455a64'],
+]);
+
+// If we know of the hex value return it,
+// otherwise, return what was passed in.
+export const colorToHex = (color: string): string => {
+  const val = colorMap.get(color);
+  return val ? val : color;
+};

From 9323172ffe2af63b98e3aab1aa7ffca62d79d511 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Thu, 12 Oct 2023 14:04:50 -0700
Subject: [PATCH 02/10] lint fix

---
 web/src/components/configurePublish/DestinationTarget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index c06093089..40fd08b7e 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -132,6 +132,6 @@ const credentialStyle = computed(() => {
     font-size: x-small; 
     text-align: end;
   `;
-})
+});
 
 </script>

From 8afc4e21d79d27c400b7d970859ac84ff9f06b2c Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Thu, 12 Oct 2023 17:11:06 -0700
Subject: [PATCH 03/10] added publish steps into color palette

---
 .../components/publishProcess/PublishStep.vue | 28 ++++++++++++++--
 .../publishProcess/PublishStepper.vue         |  7 ++++
 web/src/stores/color.ts                       | 32 +++++++++++++++++++
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/web/src/components/publishProcess/PublishStep.vue b/web/src/components/publishProcess/PublishStep.vue
index edb6f5e35..a13cc2ea6 100644
--- a/web/src/components/publishProcess/PublishStep.vue
+++ b/web/src/components/publishProcess/PublishStep.vue
@@ -8,11 +8,15 @@
     :active-icon="icon"
     :header-nav="true"
   >
-    <div class="text-bold">
+    <div
+      class="text-bold q-pa-sm"
+      :style="summaryStyle"
+    >
       {{ summary }}
     </div>
     <q-list
       dense
+      :style="logStyle"
     >
       <q-item
         v-for="(log, index) in logs"
@@ -28,12 +32,32 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+import { computed } from 'vue';
+
+const colorStore = useColorStore();
 
 defineProps({
   name: { type: [String, Number], required: true },
   icon: { type: String, required: true },
   summary: { type: String, required: true },
-  logs: { type: Array as PropType<string[]>, required: false, default: () => [] }
+  logs: { type: Array as PropType<string[]>, required: false, default: () => [] },
+});
+
+const summaryStyle = computed(() => {
+  return `
+    color: ${colorToHex(colorStore.activePallete.progress.summary.text)};
+    background-color: ${colorToHex(colorStore.activePallete.progress.summary.background)};
+    border: solid ${colorToHex(colorStore.activePallete.progress.summary.border)} 1px;
+  `;
+});
+const logStyle = computed(() => {
+  return `
+    color: ${colorToHex(colorStore.activePallete.progress.log.text)};
+    background-color: ${colorToHex(colorStore.activePallete.progress.log.background)};
+    border: solid ${colorToHex(colorStore.activePallete.progress.summary.border)} 1px;
+  `;
 });
 </script>
 
diff --git a/web/src/components/publishProcess/PublishStepper.vue b/web/src/components/publishProcess/PublishStepper.vue
index 8459c8697..46fe802b4 100644
--- a/web/src/components/publishProcess/PublishStepper.vue
+++ b/web/src/components/publishProcess/PublishStepper.vue
@@ -7,6 +7,10 @@
     animated
     flat
     :header-nav="true"
+    :inactive-icon="colorStore.activePallete.progress.inactive"
+    :done-color="colorStore.activePallete.progress.done"
+    :active-color="colorStore.activePallete.progress.active"
+    :error-color="colorStore.activePallete.progress.error"
   >
     <CreateBundle
       :name="1"
@@ -41,6 +45,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useColorStore } from 'src/stores/color';
 
 import {
   CreateDeployment,
@@ -52,6 +57,8 @@ import {
   WrappingUpDeployment
 } from 'src/components/publishProcess/steps';
 
+const colorStore = useColorStore();
+
 const openStep = ref<number | undefined>(undefined);
 </script>
 
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index 4c465a463..f54a2851e 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -62,6 +62,22 @@ export const useColorStore = defineStore('color', () => {
           },
         },
       },
+      progress: {
+        inactive: 'grey-5',
+        active: 'grey-4',
+        done: 'grey-6',
+        error: 'red-10',
+        summary: {
+          background: 'grey-9',
+          text: 'grey-4',
+          border: 'grey-6',
+        },
+        log: {
+          background: 'grey-10',
+          text: 'grey-6',
+          border: 'grey-6',
+        }
+      },
     },
     light: {
       textInput: {
@@ -111,6 +127,22 @@ export const useColorStore = defineStore('color', () => {
           },
         },
       },
+      progress: {
+        inactive: 'grey-5',
+        active: 'black',
+        done: 'grey-8',
+        error: 'red-10',
+        summary: {
+          background: 'grey-1',
+          text: 'grey-8',
+          border: 'grey-8',
+        },
+        log: {
+          background: 'grey-3',
+          text: 'grey-8',
+          border: 'grey-8',
+        }
+      },
     }
   };
 

From 882b6e46dd1c643326ffb07751ebfcf1792627f2 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Fri, 13 Oct 2023 11:58:18 -0700
Subject: [PATCH 04/10] switch to v-bind w/ CSS

---
 web/src/App.vue                               |  8 +-
 .../configurePublish/AdvancedSettings.vue     | 10 ++-
 .../configurePublish/CommonSettings.vue       | 10 ++-
 .../configurePublish/ConfigurePublish.vue     |  4 +-
 .../configurePublish/DeploymentMode.vue       | 12 +--
 .../configurePublish/DestinationTarget.vue    | 58 +++++++------
 .../configurePublish/FilesToPublish.vue       | 10 ++-
 .../configurePublish/LayoutPanel.vue          | 85 ++++++++++---------
 .../configurePublish/PythonProject.vue        |  9 +-
 .../icons/PublisherAdvancedLogo.vue           |  6 +-
 .../icons/PublisherDestinationLogo.vue        |  6 +-
 .../components/icons/PublisherFolderLogo.vue  |  6 +-
 .../components/icons/PublisherPythonLogo.vue  |  8 +-
 .../icons/PublisherSettingsLogo.vue           |  6 +-
 web/src/components/icons/WhitePositLogo.vue   | 18 +---
 .../components/publishProcess/PublishStep.vue | 35 ++++----
 .../publishProcess/PublishStepper.vue         |  2 +-
 web/src/stores/color.ts                       |  2 +
 18 files changed, 154 insertions(+), 141 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 750215a5f..48737a6c9 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -6,14 +6,14 @@
   >
     <q-header
       elevated
+      class="my-class"
     >
       <q-toolbar class="max-width-md q-pa-auto">
         <AppMenu />
         <WhitePositLogo
           width="70px"
           height="30px"
-          :fill="colorToHex(colorStore.activePallete.logo.fill)"
-          :stroke="colorToHex(colorStore.activePallete.logo.stroke)"
+          svg-class="posit-logo"
           alt="Posit PBC Logo"
         />
         <q-toolbar-title class="q-pl-xs">
@@ -135,4 +135,8 @@ getInitialDeploymentState();
 .bg-black {
   background: black !important;
 }
+.posit-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.logo.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.logo.stroke)');
+}
 </style>
diff --git a/web/src/components/configurePublish/AdvancedSettings.vue b/web/src/components/configurePublish/AdvancedSettings.vue
index 5edb12b4f..1de285441 100644
--- a/web/src/components/configurePublish/AdvancedSettings.vue
+++ b/web/src/components/configurePublish/AdvancedSettings.vue
@@ -8,8 +8,7 @@
       <PublisherAdvancedLogo
         width="40px"
         height="40px"
-        :fill="colorToHex(colorStore.activePallete.icon.fill)"
-        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
+        svg-class="advanced-logo"
       />
     </template>
     TODO: Show list of editable settings (and some as read-only)
@@ -25,3 +24,10 @@ import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
+
+<style>
+.advanced-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/CommonSettings.vue b/web/src/components/configurePublish/CommonSettings.vue
index 0577fef42..e8da8f933 100644
--- a/web/src/components/configurePublish/CommonSettings.vue
+++ b/web/src/components/configurePublish/CommonSettings.vue
@@ -8,8 +8,7 @@
       <PublisherSettingsLogo
         width="40px"
         height="40px"
-        :fill="colorToHex(colorStore.activePallete.icon.fill)"
-        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
+        svg-class="common-logo"
       />
     </template>
     TODO: Common settings, probably off the info panel in dashboard
@@ -25,3 +24,10 @@ import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
+
+<style>
+.common-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/ConfigurePublish.vue b/web/src/components/configurePublish/ConfigurePublish.vue
index 8670aa03e..6198cccef 100644
--- a/web/src/components/configurePublish/ConfigurePublish.vue
+++ b/web/src/components/configurePublish/ConfigurePublish.vue
@@ -28,12 +28,12 @@
       />
       <!-- Common and Advanced Settings commented out until implemented. -->
       <CommonSettings
-        v-if="false"
+        v-if="true"
         group="configurePublish"
         class="q-my-sm"
       />
       <AdvancedSettings
-        v-if="false"
+        v-if="true"
         group="configurePublish"
         class="q-my-sm"
       />
diff --git a/web/src/components/configurePublish/DeploymentMode.vue b/web/src/components/configurePublish/DeploymentMode.vue
index b9ff78208..ff531d546 100644
--- a/web/src/components/configurePublish/DeploymentMode.vue
+++ b/web/src/components/configurePublish/DeploymentMode.vue
@@ -11,11 +11,11 @@
         padding="2px"
         spread
         :options="options"
-        :style="toggleStyle"
         :text-color="colorStore.activePallete.deploymentMode.toggle.inActive.text"
         :color="colorStore.activePallete.deploymentMode.toggle.inActive.background"
         :toggle-text-color="colorStore.activePallete.deploymentMode.toggle.active.text"
         :toggle-color="colorStore.activePallete.deploymentMode.toggle.active.background"
+        class="toggle"
       />
     </div>
   </div>
@@ -53,8 +53,10 @@ const value = computed({
   }
 });
 
-const toggleStyle = computed(() => {
-  return `border: 1px solid ${colorToHex(colorStore.activePallete.outline)};`;
-});
-
 </script>
+
+<style scoped>
+.toggle {
+  border: 1px solid v-bind('colorToHex(colorStore.activePallete.outline)');
+}
+</style>
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index 40fd08b7e..b55aa2251 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -9,8 +9,7 @@
       <PublisherDestinationLogo
         width="40px"
         height="40px"
-        :fill="colorToHex(colorStore.activePallete.icon.fill)"
-        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
+        svg-class="destination-logo"
       />
     </template>
     <div class="q-pa-sm">
@@ -19,8 +18,7 @@
           v-for="account in accounts"
           :key="account.name"
           tag="label"
-          class="q-my-sm row items-center"
-          :style="itemStyle"
+          class="q-my-sm row items-center account-item"
         >
           <q-item-section
             avatar
@@ -41,20 +39,19 @@
             </q-item-label>
             <q-item-label
               caption
-              :style="captionStyle"
+              class="account-caption"
             >
               Account: {{ calculateName(account) }}
             </q-item-label>
             <q-item-label
               caption
-              :style="captionStyle"
+              class="account-url"
             >
               URL: {{ account.url }}
             </q-item-label>
             <q-item-label
               caption
-              class="q-pt-sm"
-              :style="credentialStyle"
+              class="q-pt-sm account-credential"
             >
               Credentials managed by: {{ account.source }}
             </q-item-label>
@@ -111,27 +108,32 @@ const calculateName = (account: Account) => {
   }
   return '';
 };
+</script>
 
-const itemStyle = computed(() => {
-  return `
-    border: ${colorToHex(colorStore.activePallete.destination.outline)} solid 2px; border-radius: 10px;
-    background-color: blue${colorToHex(colorStore.activePallete.destination.background)};
-    color: ${colorToHex(colorStore.activePallete.destination.text)};
-  `;
-});
+<style>
+.destination-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
 
-const captionStyle = computed(() => {
-  return `
-    color: ${colorToHex(colorStore.activePallete.destination.caption)};
-  `;
-});
+.account-item {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 2px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
 
-const credentialStyle = computed(() => {
-  return `
-    color: ${colorToHex(colorStore.activePallete.destination.caption)};
-    font-size: x-small; 
-    text-align: end;
-  `;
-});
+.account-caption {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
 
-</script>
+.account-url {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
+
+.account-credential {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+  font-size: x-small;
+  text-align: end;
+}
+</style>
diff --git a/web/src/components/configurePublish/FilesToPublish.vue b/web/src/components/configurePublish/FilesToPublish.vue
index 51e848340..fc4484c30 100644
--- a/web/src/components/configurePublish/FilesToPublish.vue
+++ b/web/src/components/configurePublish/FilesToPublish.vue
@@ -9,8 +9,7 @@
       <PublisherFolderLogo
         width="40px"
         height="40px"
-        :fill="colorToHex(colorStore.activePallete.icon.fill)"
-        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
+        svg-class="folder-logo"
       />
     </template>
     <q-tree
@@ -122,3 +121,10 @@ async function getFiles() {
 
 getFiles();
 </script>
+
+<style>
+.folder-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/LayoutPanel.vue b/web/src/components/configurePublish/LayoutPanel.vue
index a8cf2a3bd..145ba87cb 100644
--- a/web/src/components/configurePublish/LayoutPanel.vue
+++ b/web/src/components/configurePublish/LayoutPanel.vue
@@ -4,8 +4,8 @@
   <q-expansion-item
     :default-opened="defaultOpen"
     :expand-icon="expandIcon"
-    :header-style="headerStyle"
     :group="group"
+    :header-class="headerClass"
     @before-show="onBeforeShow"
     @before-hide="onBeforeHide"
   >
@@ -18,7 +18,9 @@
       </q-item-section>
 
       <q-item-section>
-        <q-item-label>{{ title }}</q-item-label>
+        <q-item-label>
+          {{ title }}
+        </q-item-label>
         <q-item-label
           v-if="subtitle"
           caption
@@ -34,9 +36,7 @@
       </q-item-section>
     </template>
 
-    <q-card
-      :style="cardStyle"
-    >
+    <q-card class="panel-card">
       <q-card-section>
         <slot />
         <!-- TODO: select from previous deployments or add to existing or new targets -->
@@ -70,40 +70,49 @@ const onBeforeHide = () => {
   isOpen.value = false;
 };
 
-const headerStyle = computed(() : string[] => {
-  const styles = [
-    `border-left: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
-    `border-top: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
-    `border-right: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`,
-  ];
-  if (isOpen.value) {
-    styles.push(`border-bottom: none !important;`);
-  } else {
-    styles.push(`border-bottom: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;`);
-  }
-
-  const bg = isOpen.value ?
-    `${colorToHex(colorStore.activePallete.expansion.header.open.background)}` :
-    `${colorToHex(colorStore.activePallete.expansion.header.closed.background)}`;
-  styles.push(`background-color: ${bg} !important;`);
-
-  const text = isOpen.value ?
-    `${colorToHex(colorStore.activePallete.expansion.header.open.text)}` :
-    `${colorToHex(colorStore.activePallete.expansion.header.closed.text)}`;
-  styles.push(`color: ${text} !important;`);
-  return styles;
+const headerClass = computed(() => {
+  return isOpen.value
+    ? 'panel-header header-open-border-bottom'
+    : 'panel-header header-closed-border-bottom';
+});
+
+const headerBackgroundColor = computed(() => {
+  return isOpen.value
+    ? `${colorToHex(colorStore.activePallete.expansion.header.open.background)}`
+    : `${colorToHex(colorStore.activePallete.expansion.header.closed.background)}`;
 });
 
-const cardStyle = computed(() : string => {
-  const result = (`
-    border-left: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
-    border-top: none !important;
-    border-right: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
-    border-bottom: solid 1px ${colorToHex(colorStore.activePallete.outline)} !important;
-    background-color: ${colorToHex(colorStore.activePallete.expansion.card.background)} !important;
-    color: ${colorToHex(colorStore.activePallete.expansion.card.text)} !important;
-  `);
-  console.log(`cardStyle = ${result}`);
-  return result;
+const headerTextColor = computed(() => {
+  return isOpen.value
+    ? `${colorToHex(colorStore.activePallete.expansion.header.open.text)}`
+    : `${colorToHex(colorStore.activePallete.expansion.header.closed.text)}`;
 });
+
 </script>
+
+<style>
+.panel-header {
+  border-left: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  border-top: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  border-right: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  background-color: v-bind('headerBackgroundColor') !important;
+  color: v-bind('headerTextColor') !important;
+}
+
+.header-closed-border-bottom {
+  border-bottom: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+}
+
+.header-open-border-bottom {
+  border-bottom: none !important;
+}
+
+.panel-card {
+  border-left: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  border-top: none !important;
+  border-right: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  border-bottom: solid 1px v-bind('colorToHex(colorStore.activePallete.outline)') !important;
+  background-color: v-bind('colorToHex(colorStore.activePallete.expansion.card.background)') !important;
+  color: v-bind('colorToHex(colorStore.activePallete.expansion.card.text)') !important;
+}
+</style>
diff --git a/web/src/components/configurePublish/PythonProject.vue b/web/src/components/configurePublish/PythonProject.vue
index 5ca85441f..ec6fc32b1 100644
--- a/web/src/components/configurePublish/PythonProject.vue
+++ b/web/src/components/configurePublish/PythonProject.vue
@@ -8,8 +8,7 @@
       <PublisherPythonLogo
         width="40px"
         height="40px"
-        :fill="colorToHex(colorStore.activePallete.icon.fill)"
-        :stroke="colorToHex(colorStore.activePallete.icon.stroke)"
+        svg-class="python-logo"
       />
     </template>
     TODO: Show detailed python version and list of package dependencies
@@ -27,3 +26,9 @@ import { colorToHex } from 'src/utils/colorValues';
 const colorStore = useColorStore();
 </script>
 
+<style>
+.python-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/icons/PublisherAdvancedLogo.vue b/web/src/components/icons/PublisherAdvancedLogo.vue
index 52e2e4ae0..2add4167b 100644
--- a/web/src/components/icons/PublisherAdvancedLogo.vue
+++ b/web/src/components/icons/PublisherAdvancedLogo.vue
@@ -8,6 +8,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -36,8 +37,6 @@
         c0.9,1.6,1.9,2.3,3,2.3C27.2,44.3,28.2,43.5,29,41.9z M23.3,28.1c-0.7-0.7-1.1-1.6-1.1-2.7c0-1,0.4-1.9,1.1-2.7
         c0.7-0.7,1.6-1.1,2.7-1.1c1,0,1.9,0.4,2.7,1.1c0.7,0.7,1.1,1.6,1.1,2.7c0,1.1-0.4,1.9-1.1,2.7c-0.7,0.7-1.6,1.1-2.7,1.1
         C25,29.2,24.1,28.9,23.3,28.1z"
-        :fill="fill"
-        :stroke="stroke"
       />
     </g>
   </svg>
@@ -48,7 +47,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherDestinationLogo.vue b/web/src/components/icons/PublisherDestinationLogo.vue
index 26703f256..617a47e41 100644
--- a/web/src/components/icons/PublisherDestinationLogo.vue
+++ b/web/src/components/icons/PublisherDestinationLogo.vue
@@ -8,6 +8,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -20,8 +21,6 @@
         c1.2,0,2.2,0.8,2.2,2v18.6c0,1.7-0.8,2.8-2.1,3.4c-1.5,0.7-2.7,1-5.6,1c-6.6,0-11.1-3.4-17.9-3.4c-2.4,0-4,0.6-4.5,0.8v10.2
         c0,0.9-0.8,1.7-1.7,1.7S9.5,44.2,9.5,43.3z M39.5,30.9V14.4c-1.2,0.3-2.7,0.5-4.5,0.5c-6.7,0-11.4-3.4-17.7-3.4
         c-2.6,0-4,0.7-4.3,1.3v16.6c1-0.4,2.6-0.6,4.5-0.6c7.1,0,11.7,3.4,17.7,3.4C37.8,32.2,39.2,31.5,39.5,30.9z"
-        :fill="fill"
-        :stroke="stroke"
       />
     </g>
   </svg>
@@ -32,7 +31,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherFolderLogo.vue b/web/src/components/icons/PublisherFolderLogo.vue
index 1c817c687..1e40773f3 100644
--- a/web/src/components/icons/PublisherFolderLogo.vue
+++ b/web/src/components/icons/PublisherFolderLogo.vue
@@ -8,6 +8,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -21,8 +22,6 @@
       c-4.4,0-5.3,0-7.6,0c-5.2,0-4.7,6.5-4.7,6.5c0,3.3,0,21.1,0,23.9C3.3,40,5,43,9.7,43c5.6,0,28.7,0.1,32.9,0.1c3.7,0,5.7-1.3,5.7-5.4
       C48.3,31.2,48.3,19.6,48.3,15.7z M40.6,40c-3.7,0-23.9-0.1-28.8-0.1c-4.4,0-5.2-1.4-5.2-4.8c0-2.8-0.1-20.5,0-22.6s0.5-2.8,2.9-2.8
       c2,0,4.4,0,5.4,0c3.5,0,3.8,3.8,6.9,3.8c0.7,0,16,0,18.9,0s4.2,0.3,4.2,4.1c0,3.3,0,13,0,18.5C44.9,39.8,43.8,40,40.6,40z"
-      :fill="fill"
-      :stroke="stroke"
     />
   </svg>
 </template>
@@ -32,7 +31,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherPythonLogo.vue b/web/src/components/icons/PublisherPythonLogo.vue
index d9d181261..3c263f4f5 100644
--- a/web/src/components/icons/PublisherPythonLogo.vue
+++ b/web/src/components/icons/PublisherPythonLogo.vue
@@ -8,6 +8,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -23,8 +24,6 @@
       c-1.7,0-3.3,0.2-4.7,0.4c-4.2,0.7-4.9,2.3-4.9,5.1v3.7h9.8v1.2h-9.8H13c-2.9,0-5.3,1.7-6.1,5c-0.9,3.7-0.9,6.1,0,10
       c0.7,2.9,2.4,5,5.2,5h3.4v-4.5c0-3.2,2.8-6.1,6.1-6.1h9.8c2.7,0,4.9-2.2,4.9-5v-9.3c0-2.7-2.2-4.7-4.9-5.1C29.7,6.1,28,6,26.3,6z
       M21,9.9c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1C20,10.3,20.4,9.9,21,9.9z"
-      :fill="fill"
-      :stroke="stroke"
     />
 
     <path
@@ -36,8 +35,6 @@
       v4.4c0,3.4-2.9,6.2-6.1,6.2h-9.8c-2.7,0-4.9,2.3-4.9,5v9.3c0,2.7,2.3,4.2,4.9,5c3.1,0.9,6.1,1.1,9.8,0c2.5-0.7,4.9-2.2,4.9-5v-3.7
       h-9.8v-1.2h9.8h4.9c2.9,0,3.9-2,4.9-5c1-3.1,1-6,0-10c-0.7-2.8-2.1-5-4.9-5L37.5,16.5z M31.2,41c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1
       c-0.6,0-1-0.4-1-1C30.2,41.4,30.6,41,31.2,41z"
-      :fill="fill"
-      :stroke="stroke"
     />
   </svg>
 </template>
@@ -47,7 +44,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherSettingsLogo.vue b/web/src/components/icons/PublisherSettingsLogo.vue
index 69c96467a..c245e5fa1 100644
--- a/web/src/components/icons/PublisherSettingsLogo.vue
+++ b/web/src/components/icons/PublisherSettingsLogo.vue
@@ -8,6 +8,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -38,8 +39,6 @@
         c0.7-0.4,1.2-0.9,1.6-1.6c0.4-0.7,0.6-1.4,0.6-2.2c0-0.8-0.2-1.5-0.6-2.2c-0.4-0.7-0.9-1.2-1.6-1.6c-0.7-0.4-1.4-0.6-2.1-0.6
         c-0.8,0-1.5,0.2-2.2,0.6s-1.2,0.9-1.6,1.6c-0.4,0.7-0.6,1.4-0.6,2.2c0,0.8,0.2,1.5,0.6,2.2c0.4,0.7,0.9,1.2,1.6,1.6
         s1.4,0.6,2.2,0.6C26.7,30.4,27.4,30.2,28.1,29.8z"
-        :fill="fill"
-        :stroke="stroke"
       />
     </g>
   </svg>
@@ -50,7 +49,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/WhitePositLogo.vue b/web/src/components/icons/WhitePositLogo.vue
index d91e98ce3..c3b663767 100644
--- a/web/src/components/icons/WhitePositLogo.vue
+++ b/web/src/components/icons/WhitePositLogo.vue
@@ -7,6 +7,7 @@
     version="1.1"
     :width="width"
     :height="height"
+    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 104 45"
@@ -17,46 +18,32 @@
       <path
         d="M3.6,15.2h5.2v1c1-0.9,2.7-1.4,4.2-1.4c5.7,0,9.2,3.9,9.2,9.5c0,5.7-3.7,9.9-9.4,9.9c-1.8,0-3.5-0.3-4-0.9v7.8H3.6V15.2z
         M8.9,21.8v6c0.6,0.9,1.8,1.6,3.3,1.6c2.9,0,4.7-1.8,4.7-4.7c0-3.3-1.7-5-4.4-5C10.7,19.7,9.5,20.6,8.9,21.8z"
-        :fill="fill"
-        :stroke="stroke"
       />
       <path
         d="M33.8,14.8c6,0,10.2,4.1,10.2,9.7c0,5.6-4.2,9.7-10.2,9.7c-5.8,0-10.1-4.1-10.1-9.7C23.7,18.9,27.8,14.8,33.8,14.8z
         M33.8,29.4c2.8,0,4.8-1.8,4.8-4.8c0-3.1-2.2-4.9-4.8-4.9c-2.6,0-4.7,1.8-4.7,4.9C29.1,27.3,31,29.4,33.8,29.4z"
-        :fill="fill"
-        :stroke="stroke"
       />
       <path
         d="M46,20.6c0-3.6,3-5.8,8.1-5.8c3.6,0,6.6,1.7,7.8,3.4l-3.6,3.4c-1.2-1.3-2.9-1.9-5.3-1.9c-1,0-1.6,0.2-1.6,0.9
         c0,1.6,10.6,1.1,10.6,7.7c0,4.1-3.7,5.9-7.9,5.9c-4.6,0-7.6-2.1-9-4.5l4.1-2.8c1,1.3,3.1,2.5,5.4,2.5c1.3,0,1.9-0.3,1.9-1
         C56.6,26.5,46,27,46,20.6z"
-        :fill="fill"
-        :stroke="stroke"
       />
       <path
         d="M67.1,7.7c1.7,0,2.9,1.1,2.9,2.6c0,1.5-1.2,2.7-2.9,2.7c-1.8,0-3-1.1-3-2.7C64.2,8.8,65.4,7.7,67.1,7.7z M64.5,15.2h5.2
         v18.7h-5.2V15.2z"
-        :fill="fill"
-        :stroke="stroke"
       />
       <path
         d="M71.9,15.2h3.6v-4.4h5.2v4.4h5.7v4.9h-5.7v6.1c0,2.3,0.5,3.1,1.9,3.1c1.2,0,2.2-0.4,3.2-1.2l2.2,3.7
         c-1.3,1.4-3.3,2.4-5.9,2.4c-3.9,0-6.6-2.1-6.6-6.4v-7.6h-3.6V15.2z"
-        :fill="fill"
-        :stroke="stroke"
       />
     </g>
     <g>
       <path
         d="M91.9,17.7h-1.1v-6.2h-1.7v-1h4.6v1h-1.7V17.7z"
-        :fill="fill"
-        :stroke="stroke"
       />
       <path
         d="M97.4,17.7l-1.8-5.8h0c0,0.2,0,0.4,0,0.6s0,0.4,0,0.6c0,0.2,0,0.4,0,0.6v4.1h-1v-7.1h1.6l1.7,5.6h0l1.8-5.6h1.6v7.1h-1.1
         v-4.1c0-0.2,0-0.4,0-0.6c0-0.2,0-0.4,0-0.6s0-0.4,0-0.6h0l-1.9,5.8H97.4z"
-        :fill="fill"
-        :stroke="stroke"
       />
     </g>
   </svg>
@@ -67,8 +54,7 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  fill: { type: String, required: true },
-  stroke: { type: String, required: true },
+  svgClass: { type: String, required: false, default: '' },
 });
 
 </script>
diff --git a/web/src/components/publishProcess/PublishStep.vue b/web/src/components/publishProcess/PublishStep.vue
index a13cc2ea6..c4a61282e 100644
--- a/web/src/components/publishProcess/PublishStep.vue
+++ b/web/src/components/publishProcess/PublishStep.vue
@@ -9,14 +9,13 @@
     :header-nav="true"
   >
     <div
-      class="text-bold q-pa-sm"
-      :style="summaryStyle"
+      class="text-bold q-pa-sm summaryClass"
     >
       {{ summary }}
     </div>
     <q-list
       dense
-      :style="logStyle"
+      class="logClass"
     >
       <q-item
         v-for="(log, index) in logs"
@@ -34,7 +33,6 @@
 import { PropType } from 'vue';
 import { useColorStore } from 'src/stores/color';
 import { colorToHex } from 'src/utils/colorValues';
-import { computed } from 'vue';
 
 const colorStore = useColorStore();
 
@@ -44,20 +42,19 @@ defineProps({
   summary: { type: String, required: true },
   logs: { type: Array as PropType<string[]>, required: false, default: () => [] },
 });
-
-const summaryStyle = computed(() => {
-  return `
-    color: ${colorToHex(colorStore.activePallete.progress.summary.text)};
-    background-color: ${colorToHex(colorStore.activePallete.progress.summary.background)};
-    border: solid ${colorToHex(colorStore.activePallete.progress.summary.border)} 1px;
-  `;
-});
-const logStyle = computed(() => {
-  return `
-    color: ${colorToHex(colorStore.activePallete.progress.log.text)};
-    background-color: ${colorToHex(colorStore.activePallete.progress.log.background)};
-    border: solid ${colorToHex(colorStore.activePallete.progress.summary.border)} 1px;
-  `;
-});
 </script>
 
+<style scoped>
+
+.summaryClass {
+  color: v-bind('colorToHex(colorStore.activePallete.progress.summary.text)');
+  background-color: v-bind('colorToHex(colorStore.activePallete.progress.summary.background)');
+  border: solid v-bind('colorToHex(colorStore.activePallete.progress.summary.border)') 1px;
+}
+
+.logClass {
+  color: v-bind('colorToHex(colorStore.activePallete.progress.log.text)');
+  background-color: v-bind('colorToHex(colorStore.activePallete.progress.log.background)');
+  border: solid v-bind('colorToHex(colorStore.activePallete.progress.summary.border)') 1px;
+}
+</style>
diff --git a/web/src/components/publishProcess/PublishStepper.vue b/web/src/components/publishProcess/PublishStepper.vue
index 46fe802b4..11c20ab1d 100644
--- a/web/src/components/publishProcess/PublishStepper.vue
+++ b/web/src/components/publishProcess/PublishStepper.vue
@@ -60,5 +60,5 @@ import {
 const colorStore = useColorStore();
 
 const openStep = ref<number | undefined>(undefined);
-</script>
 
+</script>
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index f54a2851e..901383191 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -67,6 +67,7 @@ export const useColorStore = defineStore('color', () => {
         active: 'grey-4',
         done: 'grey-6',
         error: 'red-10',
+        text: 'red-10',
         summary: {
           background: 'grey-9',
           text: 'grey-4',
@@ -132,6 +133,7 @@ export const useColorStore = defineStore('color', () => {
         active: 'black',
         done: 'grey-8',
         error: 'red-10',
+        text: 'red-10',
         summary: {
           background: 'grey-1',
           text: 'grey-8',

From d66979760b1bee76e113662f3919d608a2e5d7ab Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Fri, 13 Oct 2023 11:59:23 -0700
Subject: [PATCH 05/10] comment usage and limitation

---
 web/src/components/configurePublish/LayoutPanel.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/configurePublish/LayoutPanel.vue b/web/src/components/configurePublish/LayoutPanel.vue
index 145ba87cb..433028c57 100644
--- a/web/src/components/configurePublish/LayoutPanel.vue
+++ b/web/src/components/configurePublish/LayoutPanel.vue
@@ -70,6 +70,8 @@ const onBeforeHide = () => {
   isOpen.value = false;
 };
 
+// Have to do this because v-bind w/ CSS won't take a list of style attributes or string, just a single value
+// because of their implementation.
 const headerClass = computed(() => {
   return isOpen.value
     ? 'panel-header header-open-border-bottom'

From b9af559dacc823c5509615e37a7c26177c9248fa Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Mon, 16 Oct 2023 15:45:11 -0700
Subject: [PATCH 06/10] Break out account credential component to allow
 selected formatting

---
 .../configurePublish/AccountCredentials.vue   | 95 +++++++++++++++++++
 .../configurePublish/DestinationTarget.vue    | 88 ++++++-----------
 web/src/stores/color.ts                       | 10 +-
 web/src/utils/accounts.ts                     | 19 ++++
 4 files changed, 153 insertions(+), 59 deletions(-)
 create mode 100644 web/src/components/configurePublish/AccountCredentials.vue
 create mode 100644 web/src/utils/accounts.ts

diff --git a/web/src/components/configurePublish/AccountCredentials.vue b/web/src/components/configurePublish/AccountCredentials.vue
new file mode 100644
index 000000000..7ebdd26de
--- /dev/null
+++ b/web/src/components/configurePublish/AccountCredentials.vue
@@ -0,0 +1,95 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <q-item
+    tag="label"
+    class="q-my-sm row items-center"
+    :class="activeClass"
+  >
+    <q-item-section
+      avatar
+      top
+      class="col-1"
+    >
+      <q-radio
+        v-model="radioModel"
+        :val="account.name"
+        :color="colorStore.activePallete.bullet"
+      />
+    </q-item-section>
+    <q-item-section
+      class="q-ml-md"
+    >
+      <q-item-label>
+        {{ account.name }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-caption"
+      >
+        Account: {{ calculateName(account) }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-url"
+      >
+        URL: {{ account.url }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="q-pt-sm account-credential"
+      >
+        Credentials managed by: {{ account.source }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+import { Account } from 'src/api';
+import { useColorStore } from 'src/stores/color';
+import { calculateName } from 'src/utils/accounts';
+
+const colorStore = useColorStore();
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: Object as PropType<Account>,
+    required: true,
+  },
+  selectedClass: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  unSelectedClass: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+
+const radioModel = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  }
+});
+
+const selected = computed(() => {
+  return props.account.name === props.modelValue;
+});
+
+const activeClass = computed(() => {
+  return selected.value ? props.selectedClass : props.unSelectedClass;
+});
+
+</script>
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index b55aa2251..3c67ae24c 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -14,49 +14,14 @@
     </template>
     <div class="q-pa-sm">
       <q-list>
-        <q-item
+        <AccountCredentials
           v-for="account in accounts"
           :key="account.name"
-          tag="label"
-          class="q-my-sm row items-center account-item"
-        >
-          <q-item-section
-            avatar
-            top
-            class="col-1"
-          >
-            <q-radio
-              v-model="accountName"
-              :val="account.name"
-              :color="colorStore.activePallete.bullet"
-            />
-          </q-item-section>
-          <q-item-section
-            class="q-ml-md"
-          >
-            <q-item-label>
-              {{ account.name }}
-            </q-item-label>
-            <q-item-label
-              caption
-              class="account-caption"
-            >
-              Account: {{ calculateName(account) }}
-            </q-item-label>
-            <q-item-label
-              caption
-              class="account-url"
-            >
-              URL: {{ account.url }}
-            </q-item-label>
-            <q-item-label
-              caption
-              class="q-pt-sm account-credential"
-            >
-              Credentials managed by: {{ account.source }}
-            </q-item-label>
-          </q-item-section>
-        </q-item>
+          v-model="selectedAccountName"
+          :account="account"
+          selected-class="account-item-selected"
+          un-selected-class="account-item-not-selected"
+        />
       </q-list>
     </div>
   </LayoutPanel>
@@ -67,20 +32,22 @@ import { computed, onMounted, ref } from 'vue';
 
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherDestinationLogo from 'src/components/icons/PublisherDestinationLogo.vue';
+import AccountCredentials from 'src/components/configurePublish/AccountCredentials.vue';
 
 import { useDeploymentStore } from 'src/stores/deployment';
 import { useColorStore } from 'src/stores/color';
 import { colorToHex } from 'src/utils/colorValues';
 import { Account, useApi } from 'src/api';
+import { findAccount } from 'src/utils/accounts';
 
 const deploymentStore = useDeploymentStore();
 const colorStore = useColorStore();
 
-const accountName = ref('');
+const selectedAccountName = ref('');
 
 const destinationTitle = computed(() => {
-  if (accountName.value) {
-    return `New deployment on ${accountName.value}`;
+  if (selectedAccountName.value) {
+    return `New deployment using ${selectedAccountName.value} account`;
   }
   return '';
 });
@@ -92,22 +59,22 @@ onMounted(async() => {
   try {
     const response = await api.accounts.getAll();
     accounts.value = response.data.accounts;
-    if (deploymentStore.deployment) {
-      accountName.value = deploymentStore.deployment.target.accountName;
+    if (
+      accounts.value &&
+      deploymentStore.deployment &&
+      deploymentStore.deployment?.target.accountName
+    ) {
+      const account = findAccount(deploymentStore.deployment.target.accountName, accounts.value);
+      if (account) {
+        selectedAccountName.value = account.name;
+      } else {
+        // TODO: handle the error, we do not have a match.
+      }
     }
   } catch (err) {
     // TODO: handle the error
   }
 });
-
-const calculateName = (account: Account) => {
-  if (account.authType === 'token-key') {
-    return account.accountName;
-  } else if (account.authType === 'api-key') {
-    return 'Using API Key';
-  }
-  return '';
-};
 </script>
 
 <style>
@@ -116,10 +83,17 @@ const calculateName = (account: Account) => {
   stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
 }
 
-.account-item {
+.account-item-selected {
   border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 2px;
   border-radius: 10px;
-  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background)');
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.selected)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
+
+.account-item-not-selected {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.unSelected)');
   color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
 }
 
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index 901383191..38fb47146 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -29,7 +29,10 @@ export const useColorStore = defineStore('color', () => {
       },
       destination: {
         outline: 'grey-6',
-        background: 'grey-9',
+        background: {
+          selected: 'grey-8',
+          unSelected: 'black',
+        },
         text: 'grey-1',
         caption: 'grey-6',
       },
@@ -95,7 +98,10 @@ export const useColorStore = defineStore('color', () => {
       },
       destination: {
         outline: 'grey-10',
-        background: 'grey-1',
+        background: {
+          selected: 'grey-5',
+          unSelected: 'grey-1',
+        },
         text: 'black',
         caption: 'grey-10',
       },
diff --git a/web/src/utils/accounts.ts b/web/src/utils/accounts.ts
new file mode 100644
index 000000000..a22b9bc89
--- /dev/null
+++ b/web/src/utils/accounts.ts
@@ -0,0 +1,19 @@
+// Copyright (C) 2023 by Posit Software, PBC.
+
+import { Account } from 'src/api';
+
+export const calculateName = (account: Account) => {
+  if (account.authType === 'token-key') {
+    return account.accountName;
+  } else if (account.authType === 'api-key') {
+    return 'Using API Key';
+  }
+  return '';
+};
+
+export const findAccount = (accountName: string, accounts: Account[]): Account | undefined => {
+  return accounts.find(account => {
+    console.log(`${account.name} vs ${accountName}`);
+    return (account.name === accountName);
+  });
+};

From 652f7a3f2901f57c35e02081e7f1d21ebb7c0f93 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Tue, 17 Oct 2023 09:20:08 -0700
Subject: [PATCH 07/10] fix error discovered in Jupyter lab CI

---
 .../connect_jupyterlab/connect_jupyterlab/handlers.py         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/jupyterlab/connect_jupyterlab/connect_jupyterlab/handlers.py b/extensions/jupyterlab/connect_jupyterlab/connect_jupyterlab/handlers.py
index 5650ee411..5a709be32 100644
--- a/extensions/jupyterlab/connect_jupyterlab/connect_jupyterlab/handlers.py
+++ b/extensions/jupyterlab/connect_jupyterlab/connect_jupyterlab/handlers.py
@@ -5,7 +5,7 @@
 import shlex
 import subprocess
 from urllib.parse import urlparse
-from typing import Set, Dict, Tuple
+from typing import Set, Dict, Tuple, Any
 
 from jupyter_server.base.handlers import APIHandler
 from jupyter_server.utils import url_path_join
@@ -14,7 +14,7 @@
 from tornado.httputil import HTTPServerRequest
 from tornado.web import authenticated
 
-base_url = None
+base_url: str = ""
 EXECUTABLE = "connect-client"
 
 known_ports: Set[int] = set()

From b2ae44530cdc5cdbe87b1a0d66554e99bde1eba2 Mon Sep 17 00:00:00 2001
From: Bill Sager <sager.bill@gmail.com>
Date: Tue, 17 Oct 2023 17:02:11 -0700
Subject: [PATCH 08/10] remove debugging output

Co-authored-by: Jordan Jensen <jordan.jensen@rstudio.com>
---
 web/src/utils/accounts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/utils/accounts.ts b/web/src/utils/accounts.ts
index a22b9bc89..6aa6309f7 100644
--- a/web/src/utils/accounts.ts
+++ b/web/src/utils/accounts.ts
@@ -13,7 +13,6 @@ export const calculateName = (account: Account) => {
 
 export const findAccount = (accountName: string, accounts: Account[]): Account | undefined => {
   return accounts.find(account => {
-    console.log(`${account.name} vs ${accountName}`);
     return (account.name === accountName);
   });
 };

From 094e75e831a906b72b921650f177a4c84d8a3219 Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Tue, 17 Oct 2023 17:57:48 -0700
Subject: [PATCH 09/10] PR improvements

---
 .../{AccountCredentials.vue => AccountCredential.vue}         | 0
 web/src/components/configurePublish/ConfigurePublish.vue      | 4 ++--
 web/src/components/configurePublish/DestinationTarget.vue     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename web/src/components/configurePublish/{AccountCredentials.vue => AccountCredential.vue} (100%)

diff --git a/web/src/components/configurePublish/AccountCredentials.vue b/web/src/components/configurePublish/AccountCredential.vue
similarity index 100%
rename from web/src/components/configurePublish/AccountCredentials.vue
rename to web/src/components/configurePublish/AccountCredential.vue
diff --git a/web/src/components/configurePublish/ConfigurePublish.vue b/web/src/components/configurePublish/ConfigurePublish.vue
index 6198cccef..8670aa03e 100644
--- a/web/src/components/configurePublish/ConfigurePublish.vue
+++ b/web/src/components/configurePublish/ConfigurePublish.vue
@@ -28,12 +28,12 @@
       />
       <!-- Common and Advanced Settings commented out until implemented. -->
       <CommonSettings
-        v-if="true"
+        v-if="false"
         group="configurePublish"
         class="q-my-sm"
       />
       <AdvancedSettings
-        v-if="true"
+        v-if="false"
         group="configurePublish"
         class="q-my-sm"
       />
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index 3c67ae24c..b070956d1 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -14,7 +14,7 @@
     </template>
     <div class="q-pa-sm">
       <q-list>
-        <AccountCredentials
+        <AccountCredential
           v-for="account in accounts"
           :key="account.name"
           v-model="selectedAccountName"
@@ -32,7 +32,7 @@ import { computed, onMounted, ref } from 'vue';
 
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherDestinationLogo from 'src/components/icons/PublisherDestinationLogo.vue';
-import AccountCredentials from 'src/components/configurePublish/AccountCredentials.vue';
+import AccountCredential from 'src/components/configurePublish/AccountCredential.vue';
 
 import { useDeploymentStore } from 'src/stores/deployment';
 import { useColorStore } from 'src/stores/color';

From 205e0b416c95c8f2d76b55ef080c4ea3d423e21b Mon Sep 17 00:00:00 2001
From: Bill Sager <whs@sager.org>
Date: Wed, 18 Oct 2023 12:00:39 -0700
Subject: [PATCH 10/10] PR updates and colors applied to file checkboxes

---
 test/.gitignore                               |  2 +
 web/src/App.vue                               |  2 +-
 .../configurePublish/AccountCredential.vue    | 43 ++++++++++++++-----
 .../configurePublish/AdvancedSettings.vue     |  2 +-
 .../configurePublish/CommonSettings.vue       |  2 +-
 .../configurePublish/DestinationTarget.vue    | 31 +------------
 .../configurePublish/FilesToPublish.vue       |  3 +-
 .../configurePublish/PythonProject.vue        |  2 +-
 .../icons/PublisherAdvancedLogo.vue           |  2 -
 .../icons/PublisherDestinationLogo.vue        |  2 -
 .../components/icons/PublisherFolderLogo.vue  |  2 -
 .../components/icons/PublisherPythonLogo.vue  |  2 -
 .../icons/PublisherSettingsLogo.vue           |  2 -
 web/src/components/icons/WhitePositLogo.vue   |  2 -
 web/src/stores/color.ts                       |  6 +++
 15 files changed, 47 insertions(+), 58 deletions(-)
 create mode 100644 test/.gitignore

diff --git a/test/.gitignore b/test/.gitignore
new file mode 100644
index 000000000..00017e97f
--- /dev/null
+++ b/test/.gitignore
@@ -0,0 +1,2 @@
+go_cover.out
+go_coverage.html
\ No newline at end of file
diff --git a/web/src/App.vue b/web/src/App.vue
index 9d807aa8c..6de8c30eb 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -13,7 +13,7 @@
         <WhitePositLogo
           width="70px"
           height="30px"
-          svg-class="posit-logo"
+          class="posit-logo"
           alt="Posit PBC Logo"
         />
         <q-toolbar-title class="q-pl-xs">
diff --git a/web/src/components/configurePublish/AccountCredential.vue b/web/src/components/configurePublish/AccountCredential.vue
index 7ebdd26de..b8a214e56 100644
--- a/web/src/components/configurePublish/AccountCredential.vue
+++ b/web/src/components/configurePublish/AccountCredential.vue
@@ -49,6 +49,7 @@
 import { PropType, computed } from 'vue';
 import { Account } from 'src/api';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 import { calculateName } from 'src/utils/accounts';
 
 const colorStore = useColorStore();
@@ -63,16 +64,6 @@ const props = defineProps({
     type: Object as PropType<Account>,
     required: true,
   },
-  selectedClass: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  unSelectedClass: {
-    type: String,
-    required: false,
-    default: '',
-  },
 });
 
 const radioModel = computed({
@@ -89,7 +80,37 @@ const selected = computed(() => {
 });
 
 const activeClass = computed(() => {
-  return selected.value ? props.selectedClass : props.unSelectedClass;
+  return selected.value ? 'account-item-selected' : 'account-item-not-selected';
 });
 
 </script>
+
+<style>
+.account-item-selected {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.selected)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
+
+.account-item-not-selected {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.unSelected)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
+
+.account-caption {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
+
+.account-url {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
+
+.account-credential {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+  font-size: x-small;
+  text-align: end;
+}
+</style>
diff --git a/web/src/components/configurePublish/AdvancedSettings.vue b/web/src/components/configurePublish/AdvancedSettings.vue
index 1de285441..ba19bf0fd 100644
--- a/web/src/components/configurePublish/AdvancedSettings.vue
+++ b/web/src/components/configurePublish/AdvancedSettings.vue
@@ -8,7 +8,7 @@
       <PublisherAdvancedLogo
         width="40px"
         height="40px"
-        svg-class="advanced-logo"
+        class="advanced-logo"
       />
     </template>
     TODO: Show list of editable settings (and some as read-only)
diff --git a/web/src/components/configurePublish/CommonSettings.vue b/web/src/components/configurePublish/CommonSettings.vue
index e8da8f933..b82b54d61 100644
--- a/web/src/components/configurePublish/CommonSettings.vue
+++ b/web/src/components/configurePublish/CommonSettings.vue
@@ -8,7 +8,7 @@
       <PublisherSettingsLogo
         width="40px"
         height="40px"
-        svg-class="common-logo"
+        class="common-logo"
       />
     </template>
     TODO: Common settings, probably off the info panel in dashboard
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
index b070956d1..cd0840835 100644
--- a/web/src/components/configurePublish/DestinationTarget.vue
+++ b/web/src/components/configurePublish/DestinationTarget.vue
@@ -9,7 +9,7 @@
       <PublisherDestinationLogo
         width="40px"
         height="40px"
-        svg-class="destination-logo"
+        class="destination-logo"
       />
     </template>
     <div class="q-pa-sm">
@@ -19,8 +19,6 @@
           :key="account.name"
           v-model="selectedAccountName"
           :account="account"
-          selected-class="account-item-selected"
-          un-selected-class="account-item-not-selected"
         />
       </q-list>
     </div>
@@ -83,31 +81,4 @@ onMounted(async() => {
   stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
 }
 
-.account-item-selected {
-  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 2px;
-  border-radius: 10px;
-  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.selected)');
-  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
-}
-
-.account-item-not-selected {
-  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
-  border-radius: 10px;
-  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.unSelected)');
-  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
-}
-
-.account-caption {
-  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
-}
-
-.account-url {
-  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
-}
-
-.account-credential {
-  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
-  font-size: x-small;
-  text-align: end;
-}
 </style>
diff --git a/web/src/components/configurePublish/FilesToPublish.vue b/web/src/components/configurePublish/FilesToPublish.vue
index fc4484c30..c0e39ecc8 100644
--- a/web/src/components/configurePublish/FilesToPublish.vue
+++ b/web/src/components/configurePublish/FilesToPublish.vue
@@ -9,7 +9,7 @@
       <PublisherFolderLogo
         width="40px"
         height="40px"
-        svg-class="folder-logo"
+        class="folder-logo"
       />
     </template>
     <q-tree
@@ -17,6 +17,7 @@
       v-model:expanded="expanded"
       :nodes="files"
       :node-key="NODE_KEY"
+      :control-color="colorStore.activePallete.files.controls"
       tick-strategy="leaf"
       dense
     />
diff --git a/web/src/components/configurePublish/PythonProject.vue b/web/src/components/configurePublish/PythonProject.vue
index ec6fc32b1..cdf4923d1 100644
--- a/web/src/components/configurePublish/PythonProject.vue
+++ b/web/src/components/configurePublish/PythonProject.vue
@@ -8,7 +8,7 @@
       <PublisherPythonLogo
         width="40px"
         height="40px"
-        svg-class="python-logo"
+        class="python-logo"
       />
     </template>
     TODO: Show detailed python version and list of package dependencies
diff --git a/web/src/components/icons/PublisherAdvancedLogo.vue b/web/src/components/icons/PublisherAdvancedLogo.vue
index 2add4167b..8fd018560 100644
--- a/web/src/components/icons/PublisherAdvancedLogo.vue
+++ b/web/src/components/icons/PublisherAdvancedLogo.vue
@@ -8,7 +8,6 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -47,6 +46,5 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherDestinationLogo.vue b/web/src/components/icons/PublisherDestinationLogo.vue
index 617a47e41..b62c6db43 100644
--- a/web/src/components/icons/PublisherDestinationLogo.vue
+++ b/web/src/components/icons/PublisherDestinationLogo.vue
@@ -8,7 +8,6 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -31,6 +30,5 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherFolderLogo.vue b/web/src/components/icons/PublisherFolderLogo.vue
index 1e40773f3..24b9d3d25 100644
--- a/web/src/components/icons/PublisherFolderLogo.vue
+++ b/web/src/components/icons/PublisherFolderLogo.vue
@@ -8,7 +8,6 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -31,6 +30,5 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherPythonLogo.vue b/web/src/components/icons/PublisherPythonLogo.vue
index 3c263f4f5..130fa4609 100644
--- a/web/src/components/icons/PublisherPythonLogo.vue
+++ b/web/src/components/icons/PublisherPythonLogo.vue
@@ -8,7 +8,6 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -44,6 +43,5 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/PublisherSettingsLogo.vue b/web/src/components/icons/PublisherSettingsLogo.vue
index c245e5fa1..32bbc230b 100644
--- a/web/src/components/icons/PublisherSettingsLogo.vue
+++ b/web/src/components/icons/PublisherSettingsLogo.vue
@@ -8,7 +8,6 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 52 52"
@@ -49,6 +48,5 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 </script>
diff --git a/web/src/components/icons/WhitePositLogo.vue b/web/src/components/icons/WhitePositLogo.vue
index c3b663767..900fa3b87 100644
--- a/web/src/components/icons/WhitePositLogo.vue
+++ b/web/src/components/icons/WhitePositLogo.vue
@@ -7,7 +7,6 @@
     version="1.1"
     :width="width"
     :height="height"
-    :class="svgClass"
     x="0px"
     y="0px"
     viewBox="0 0 104 45"
@@ -54,7 +53,6 @@
 defineProps({
   height: { type: String, required: true },
   width: { type: String, required: true },
-  svgClass: { type: String, required: false, default: '' },
 });
 
 </script>
diff --git a/web/src/stores/color.ts b/web/src/stores/color.ts
index 38fb47146..284b850af 100644
--- a/web/src/stores/color.ts
+++ b/web/src/stores/color.ts
@@ -27,6 +27,9 @@ export const useColorStore = defineStore('color', () => {
         fill: 'grey-1',
         stroke: 'none',
       },
+      files: {
+        controls: 'grey-6',
+      },
       destination: {
         outline: 'grey-6',
         background: {
@@ -96,6 +99,9 @@ export const useColorStore = defineStore('color', () => {
         fill: 'grey-1',
         stroke: 'none',
       },
+      files: {
+        controls: 'grey-10',
+      },
       destination: {
         outline: 'grey-10',
         background: {