theme card starter

frontend/src/components/Admin/Theme/ThemeCard.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-card flat outlined class="ma-2">
+    <v-card-text class="mb-n5 mt-n2">
+      <h3>{{ theme.name }} {{ current ? "(Current)" : ""}}</h3>
+    </v-card-text>
+    <v-card-text>
+      <v-row dense>
+        <v-card
+          v-for="(color, index) in theme.colors"
+          :key="index"
+          class="mx-1"
+          height="34"
+          width="36"
+          :color="color"
+        >
+        </v-card>
+      </v-row>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-btn text color="error">Delete</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn text color="success">Apply</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: Object,
+    current: {
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,17 +1,17 @@
 <template>
-  <v-card :to="`/recipe/${slug}`" max-height="125">
+  <v-card hover :to="`/recipe/${slug}`" max-height="125">
     <v-list-item>
       <v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
         <v-img :src="getImage(image)"> </v-img>
       </v-list-item-avatar>
-      <v-list-item-content>
+      <v-list-item-content class="align-self-start">
         <v-list-item-title>
           {{ name }}
         </v-list-item-title>
         <v-rating length="5" size="16" dense :value="rating"></v-rating>
         <div class="text">
           <v-list-item-action-text>
-            {{ description | truncate(50) }}
+            {{ description | truncate(115) }}
           </v-list-item-action-text>
         </div>
       </v-list-item-content>
@@ -59,4 +59,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.text-top {
+  align-self: start !important;
+}
 </style>

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -4,6 +4,7 @@
     class="custom-transparent d-flex justify-start align-center text-center "
     tile
     :width="`${timeCardWidth}`"
+    height="55"
     v-if="totalTime || prepTime || performTime"
   >
     <v-card flat color="rgb(255, 0, 0, 0.0)">

frontend/src/pages/Admin/Theme/index.vue

@@ -138,6 +138,25 @@
       </v-row>
     </v-card-text>
 
+    <v-card-text>
+      <v-row>
+        <v-col
+          cols="12"
+          sm="12"
+          md="6"
+          lg="4"
+          xl="3"
+          v-for="theme in availableThemes"
+          :key="theme.name"
+        >
+          <ThemeCard
+            :theme="theme"
+            :current="selectedTheme.name == theme.name ? true : false"
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+
     <v-card-actions>
       <v-spacer></v-spacer>
       <v-btn color="success" @click="saveThemes" class="mr-2">
@@ -153,12 +172,14 @@ import api from "@/api";
 import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
 import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
 import Confirmation from "@/components/UI/Confirmation";
+import ThemeCard from "@/components/Admin/Theme/ThemeCard";
 
 export default {
   components: {
     ColorPickerDialog,
     Confirmation,
     NewThemeDialog,
+    ThemeCard,
   },
   data() {
     return {