App list

src/pages/app-store/AppDetails.vue

@@ -3,8 +3,11 @@
      <v-layout>
     <v-flex xs12 sm6 offset-sm3>
       <v-card>
-        <v-card-media :src="appDetails.image" height="200px">
-        </v-card-media>
+        <v-flex xs6 sm6 md3 offset-xs3 offset-lg4>
+        <v-list-tile-avatar size="150px" style="width:100%">
+            <img :src="appDetails.image" alt="logo" style="width:150px" >
+        </v-list-tile-avatar>
+        </v-flex>
         <v-card-title primary-title>
           <div>
             <h3 class="headline mb-0">{{appDetails.name}}</h3>

src/pages/app-store/AppList.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <br>
+    <h4>{{this.categories.name}}</h4>
+    <blockquote>{{this.categories.Description}}</blockquote>
     <v-layout row>
       <v-flex xs12 sm10 offset-sm1>
         <v-card>
           <v-list two-lines>
-            <!-- <br> -->
+             <!-- <br> -->
             <!-- <v-divider v-bind:inset="app.inset"></v-divider> -->
             <v-list-tile :to="{ name: 'app-store-details', params: { appSlug: slug } }"
                          v-for="(app, slug) in allAppsByCategory" :key="app.name">
@@ -21,7 +23,6 @@
               </v-list-tile-content>
               <!-- <v-divider></v-divider> -->
               <v-icon>keyboard_arrow_right</v-icon>
-
             </v-list-tile>
             <!-- <v-divider></v-divider> -->
           </v-list>
@@ -35,19 +36,24 @@
   // import apps from '../../services/app-store/apps';
   import {mapGetters, mapActions} from 'vuex';
 
+  import appsCategory from '../../services/app-store/categories';
+
   export default {
     name: 'app-list',
     created() {
       this.fetchAppLists(this.categorySlug);
+      this.fetchCategories();
     },
     data() {
       return {
         apps: false,
+        categories: false,
       };
     },
     watch: {
       $route() {
         this.fetchAppLists(this.categorySlug);
+        this.fetchCategories();
       },
     },
     computed: {
@@ -65,6 +71,13 @@
       ...mapActions([
         'fetchAppLists',
       ]),
+      fetchCategories() {
+        if (appsCategory.all()[this.categorySlug] != null) {
+          this.categories = appsCategory.all()[this.categorySlug];
+        } else {
+          this.categories = appsCategory.handPicked()[this.categorySlug];
+        }
+      },
     },
   };
 </script>

src/pages/app-store/AppStore.vue

@@ -12,6 +12,7 @@
     >
         <img src="../../assets/logos/logo-type-dark-grey.svg" height="20px">
         <v-spacer></v-spacer>
+
         <v-text-field
           placeholder="Search..."
           single-line

src/services/app-store/apps.js

@@ -53,6 +53,20 @@ export default {
           image: 'https://logo.clearbit.com/github.com?s=128',
         },
       },
+      social_media: {
+        facebook: {
+          name: 'Facebook',
+          image: 'https://logo.clearbit.com/facebook.com?s=128',
+        },
+        twitter: {
+          name: 'Twitter',
+          image: 'https://logo.clearbit.com/twitter.com?s=128',
+        },
+        whatsapp: {
+          name: 'Whatsapp',
+          image: 'https://logo.clearbit.com/whatsapp.com?s=128',
+        },
+      },
       productivity: {
         slack: {
           name: 'Slack',
@@ -64,6 +78,10 @@ export default {
           name: 'Giphy',
           image: 'https://logo.clearbit.com/giphy.com?s=128',
         },
+        tictactoe: {
+          name: 'Tic Tac Toe',
+          image: 'https://logo.clearbit.com/tictactoe.cat?s=128',
+        },
       },
     };
   },

src/services/app-store/categories.js

@@ -4,10 +4,12 @@ export default {
       featured: {
         name: 'Featured',
         icon: 'star',
+        Description: 'We’ve picked popular and useful apps to get you off to a running start. Connect your tools and services with Base so your team can stay coordinated, work faster, and keep conversations and context all in one place.',
       },
       popular: {
         name: 'Popular',
         icon: 'timeline',
+        Description: 'Here you can find the most popular app.',
       },
     };
   },
@@ -16,14 +18,22 @@ export default {
       productivity: {
         name: 'Productivity Tools',
         icon: 'work',
+        Description: 'Optimize your workday: Get updates, make to-do lists, host standups, and more, right from Base.',
       },
       developer_tools: {
         name: 'Developer Tools',
         icon: 'computer',
+        Description: 'Connect your development tools to Base and raise visibility into builds, errors, or anything else that needs your attention.',
       },
       fun: {
         name: 'Fun',
         icon: 'insert_emoticon',
+        Description: 'Add social media to Base, organize the lunch order, or find a new way for team members to connect. Apps in this category bring human connection to the work day.',
+      },
+      social_media: {
+        name: 'Social Media',
+        icon: 'public',
+        Description: 'Add social media to Base, organize the lunch order, or find a new way for team members to connect. Apps in this category bring human connection to the work day.',
       },
     };
   },