feat(ui): configured vs unconfigured visual treatment on Credentials cards

frontend/src/views/Credentials.vue

@@ -8,7 +8,12 @@
         cols="12"
         md="6"
       >
-        <v-card>
+        <v-card
+          :border="!!getCredential(platform)"
+          :style="!getCredential(platform)
+            ? { border: '2px dashed var(--v-border-color)' }
+            : { borderColor: 'rgb(var(--v-theme-success))' }"
+        >
           <v-card-title class="d-flex align-center">
             <v-icon :color="getPlatformColor(platform)" class="mr-2">
               {{ getPlatformIcon(platform) }}
@@ -53,15 +58,11 @@
               </v-list-item>
             </div>
 
-            <v-alert
+            <div v-else class="text-center py-4 mb-4">
-              v-else
+              <v-icon size="40" color="secondary" :style="{ opacity: 0.5 }">mdi-key-remove</v-icon>
-              type="info"
+              <div class="text-body-2 mt-2">No credentials configured</div>
-              variant="tonal"
+              <div class="text-caption text-medium-emphasis mt-1">Add credentials to enable downloads</div>
-              density="compact"
+            </div>
-              class="mb-4"
-            >
-              No credentials stored for {{ info.name }}
-            </v-alert>
           </v-card-text>
 
           <v-card-actions>
@@ -75,7 +76,7 @@
               Verify
             </v-btn>
             <v-btn
-              variant="text"
+              :variant="getCredential(platform) ? 'text' : 'flat'"
               color="primary"
               @click="openUploadDialog(platform, info)"
             >