From 429cc22bf1f78147c106772eef722d79b4174128 Mon Sep 17 00:00:00 2001
From: Sam Calder-Mason <sam@puritydev.io>
Date: Tue, 17 Jul 2018 15:32:46 +1000
Subject: [PATCH] Join.vue rework

---
 src/components/join.vue | 44 +++++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/join.vue b/src/components/join.vue
index d66fa4fe..460d3aef 100644
--- a/src/components/join.vue
+++ b/src/components/join.vue
@@ -1,22 +1,32 @@
 <template>
-    <v-layout wrap row class="text-xs-center">
-      <v-flex v-if="!loading" xs12 md8 offset-md2>
-        <v-card style="background: rgba(0,0,0,0.3)">
-          <h1 class="white--text pa-1"> Welcome to SyncLounge!</h1>
-          <div>
-            <h2>
-              <span style="font-weight:900">{{ owner }}</span> has invited you to join the room
-              <span style="font-weight:900">{{ room }}</span>
-            </h2>
-          </div>
-          <v-layout wrap row class="pa-4">
-            <v-flex xs12 md8 offset-md2 class="center-text">
-              <v-btn class="center" style="background-color: #E5A00D" @click.native="letsGo()">Accept Invite</v-btn>
+    <v-layout wrap row class="text-xs-center" justify-center align-center>
+      <v-flex v-if="!loading" xs12 md5>
+        <v-card style="background: rgba(0,0,0,0.3)" class="pa-1">
+          <v-container fill-height>
+            <v-layout row wrap>
+              <v-flex xs12 md3 class="text-xs-center">
+                <img :src="logos.light.small" style="width: 90%"/>
               </v-flex>
-            </v-layout>
-          <p style="opacity:0.7" class="center-text">
-            SyncLounge is a tool to sync Plex content with your family and friends. For more info click <a target="_blank" href="https://github.com/samcm/synclounge"> here </a>
-          </p>
+              <v-flex md9>
+                <h1 class="white--text pa-1"> Welcome to SyncLounge!</h1>
+                <div class="pt-2">
+                  <div>
+                    <span style="font-weight:900">{{ owner }}</span> has invited you to join the room
+                    <span style="font-weight:900">{{ room }}</span>
+                  </div>
+                </div>
+                <v-layout wrap row class="pa-4 pt-2" justify-center align-center>
+                  <v-flex xs12 md8 class="text-xs-center">
+                    <v-btn class="center" style="background-color: #E5A00D" @click.native="letsGo()">Accept Invite</v-btn>
+                  </v-flex>
+                </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-container>
+            <v-divider></v-divider>
+            <p style="opacity:0.7" class="text-xs-center pt-3">
+              SyncLounge is a tool to sync Plex content with your family and friends. For more info click <a target="_blank" href="https://github.com/samcm/synclounge"> here</a>.
+            </p>
         </v-card>
       </v-flex>
       <v-flex v-else>