style login page

Author: ste-xx

src/AutoLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <label>Auto login</label>
+  <label class="mr-2">Auto Sign in</label>
   <input
       v-model="autoLogin"
       type="checkbox"

src/LoginScreen.vue

@@ -1,11 +1,17 @@
 <template>
-  <div>
-    <button @click="login">login</button>
-    <div>
-     You need to login to github, to use your gists with this dev tool.
+  <div class="login--container">
+    <div style="grid-area: button">
+      <button @click="login" class="flex mr-2">
+        <fa type="fab" icon="github" class="h-4 mr-2"/>
+        Sign in
+      </button>
+    </div>
+    <div style="grid-area: autologin">
+      <AutoLogin/>
+    </div>
+    <div style="grid-area: description">
+      You need to sign in to github, to use your gists with this dev tool.
     </div>
-    <AutoLogin/>
-
   </div>
 </template>
 
@@ -25,5 +31,21 @@ onMounted(()=> {
   }
 });
 
-
 </script>
+
+<style scoped>
+.login--container {
+  display: grid;
+  grid-template-areas:
+  '. . .'
+  '. button .'
+  '. autologin .'
+  'description description description'
+  '. . .';
+  grid-template-rows: 250px 2rem 1rem auto auto;
+  grid-template-columns: 100px 150px 100px;
+  justify-content: center;
+  grid-row-gap: 10px;
+  min-height: 100%;
+}
+</style>

src/assets/styles/index.css

@@ -20,7 +20,7 @@
     }
 
     a {
-        @apply text-orange-600;
+        @apply text-blue-600;
     }
 
     a:hover {

src/components/FontAwesomeIcon/fontAwesome.ts

@@ -1,8 +1,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
-import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
+import { faInstagram, faTwitter, faGithub } from "@fortawesome/free-brands-svg-icons";
 import FontAwesomeIcon from "./FontAwesomeIcon.vue";
 
-library.add(fas, faTwitter, faInstagram);
-
+library.add(fas, faTwitter, faInstagram, faGithub);
 export { FontAwesomeIcon };

src/manifest.json

@@ -13,6 +13,7 @@
   "content_security_policy": "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'",
   "permissions": [
     "identity",
-    "https://*.github.com/*"
+    "https://github.com/login/oauth/authorize",
+    "https://github.com/login/oauth/access_token"
   ]
 }