Refactoring of AssistantElement.vue

jschm42 · Nov 23, 2023 · f3bbe1b · f3bbe1b
1 parent 7905928
commit f3bbe1b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 38 deletions.
diff --git a/frontend/src/assets/robot.svg b/frontend/src/assets/robot.svg
diff --git a/frontend/src/components/choice/AssistantElement.vue b/frontend/src/components/choice/AssistantElement.vue
@@ -58,14 +58,8 @@ export default {
     <div class="card-image">
       <img v-if="isShowAssistantImage" :alt="assistant.name" :src="imageSrc"
            class="persona-icon" role="button" @click.prevent="onPersonaSelected()"/>
-
-      <svg v-else class="bi bi-robot robot-icon" fill="currentColor" role="button"
-           viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" @click.prevent="onPersonaSelected()">
-        <path
-            d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"/>
-        <path
-            d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/>
-      </svg>
+      <img v-else class="robot-icon" src="@/assets/robot.svg" title="Robot"
+           @click.prevent="onPersonaSelected()">
       <h5 class="card-title" @click.prevent="onPersonaSelected()">{{ assistant.name }}</h5>
       <div class="card-description">{{ assistant.description }}
       </div>
@@ -79,10 +73,10 @@ export default {
 
 <style scoped>
 .persona-card {
-  min-width: 150px;
-  min-height: 150px;
-  width: 150px; /* Set a fixed width */
-  height: 150px; /* Set a fixed height */
+  min-width: 200px;
+  min-height: 170px;
+  width: 200px; /* Set a fixed width */
+  height: 170px; /* Set a fixed height */
   position: relative;
 }
 
@@ -95,7 +89,7 @@ export default {
   width: 100%;
   height: auto;
   padding: 50px;
-  color: #6c757d;
+  color: #cccccc;
   background-color: #303030;
 }
 

diff --git a/frontend/src/views/PersonaChoiceView.vue b/frontend/src/views/PersonaChoiceView.vue
@@ -23,12 +23,13 @@
     </div>
     <div class="row scrollable-persona-list">
 
-      <div v-for="assistant in assistantList" :key="assistant.id" class="col-md-3">
+      <div v-for="assistant in assistantList" :key="assistant.id"
+           class="col-md-3 assistant-element">
         <assistant-element :assistant="assistant"></assistant-element>
       </div>
 
       <div class="col-md-3">
-        <div class="card bg-gradient text-center persona-card" role="button"
+        <div class="card bg-gradient text-center create-card" role="button"
              @click.prevent="onCreateNewPersona">
           <div class="card-body">
             <h5 class="card-title">
@@ -81,30 +82,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.robot-icon {
-  color: darksalmon;
-}
-
-.persona-card {
-  min-width: 200px;
-  min-height: 170px;
-}
-
-.persona-icon {
-  width: 6em;
-  height: 6em;
-}
-
-.active {
-  border: 2px solid #007BFF; /* blue border */
-  background: #2c3e50; /* grey-ish background */
-}
-
 .scrollable-persona-list {
   height: 75vh;
   overflow-y: auto;
 }
 
+.create-card {
+  width: 200px;
+  height: 180px;
+}
+
 .logo {
   height: 10em;
   margin-left: 8px;
@@ -114,8 +101,4 @@ export default defineComponent({
   margin-bottom: 1em;
 }
 
-.edit-button {
-  font-size: 1.3em;
-}
-
 </style>