Update Footer

Bhanu Teja P · Bhanu Teja P · commit 093f6780e375 · 2019-09-08T02:21:59.000+05:30
diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue
@@ -1,30 +1,32 @@
 <template>
   <v-footer
-    color="primary lighten-1"
+    dark
     padless
   >
-    <v-row
-      justify="center"
-      no-gutters
+    <v-card
+      flat
+      tile
+      class="indigo lighten-1 white--text text-center"
+      width="100%"
     >
-      <v-btn
-        v-for="link in links"
-        :key="link"
-        color="white"
-        text
-        rounded
-        class="my-2"
-      >
-        {{ link }}
-      </v-btn>
-      <v-col
-        class="primary lighten-2 py-4 text-center white--text"
-        cols="12"
-        color="secondary"
-      >
-        {{ new Date().getFullYear() }} — <strong>Coderplex</strong>
-      </v-col>
-    </v-row>
+      <v-card-text>
+        <v-btn
+          v-for="{icon, link} in icons"
+          :key="icon"
+          class="mx-4 white--text"
+          :href="link"
+          icon
+          target="_blank"
+        >
+          <v-icon size="24px">{{ icon }}</v-icon>
+        </v-btn>
+      </v-card-text>
+      <v-divider></v-divider>
+
+      <v-card-text class="white--text">
+        {{ new Date().getFullYear() }} — <strong>OpenRank</strong>
+      </v-card-text>
+    </v-card>
   </v-footer>
 </template>
 
@@ -40,6 +42,33 @@ export default {
       'Blog',
       'Contact Us',
     ],
+    icons: [
+      {
+        icon: 'mdi-youtube',
+        link: 'https://www.youtube.com/channel/UCTkguToherUvVNnzMFINk-w',
+      },
+      {
+        icon: 'mdi-facebook',
+        link: 'https://www.facebook.com/coderplex',
+      },
+      {
+        icon: 'mdi-github-face',
+        link: 'https://github.com/coderplex',
+      },
+      {
+        icon: 'mdi-discord',
+        link: 'https://discord.gg/qEA8vxd',
+      },
+      {
+        icon: 'mdi-twitter',
+        link: 'https://www.twitter.com/coderplex/',
+      },
+      {
+        icon: 'mdi-instagram',
+        link: 'https://www.instagram.com/coderplex/',
+      },
+    ],
+
   }),
 };
 </script>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar app flat dark color="primary">
+  <v-app-bar app flat dark color="indigo lighten-1">
     <v-toolbar-title class="headline text-uppercase">
       <span @click="$router.push('/')">Open Rank</span>
     </v-toolbar-title>
