socialnetworknews-web

commit 6cb5951cef737bc38a390f2609967e3195bf2b3a
parent 5f5e2051e5379456926e97fb2f7119f437aee29b
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 18:11:51 +0200

Fix Icons and background

Diffstat:
M
src/app/login/login.component.html
 | 
4
++--
M
src/app/login/login.component.scss
 | 
6
+-----

2 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -1,7 +1,7 @@
 <main>
   <div class="login-box">
     <h2>Login</h2>
-    <a href="#" class="social-button" id="google-connect"> <span>Connect with Google (Not Implemented)</span></a>
-    <a href="/api/login/twitter" class="social-button" id="twitter-connect"> <span>Connect with Twitter</span></a>
+    <a href="#" class="social-button" id="google-connect"><i class="fab fa-google-plus-g"></i> <span>Connect with Google (Not Implemented)</span></a>
+    <a href="/api/login/twitter" class="social-button" id="twitter-connect"><i class="fab fa-twitter"></i> <span>Connect with Twitter</span></a>
   </div>
 </main>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -1,4 +1,4 @@
-body {
+main {
   background: #4688F1;
   padding: 0;
   margin: 0;
@@ -51,13 +51,11 @@ body {
 }
 
 #google-connect {
-  background: rgb(255, 255, 255) url('https://eswarasai.com/projects/social-login/img/google-plus.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
   border: 1px solid rgb(220, 74, 61);
 }
 
 #google-connect:hover {
   border-color: rgb(220, 74, 61);
-  background: rgb(220, 74, 61) url('https://eswarasai.com/projects/social-login/img/google-plus-white.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
   -webkit-transition: all .8s ease-out;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
@@ -90,13 +88,11 @@ body {
 }
 
 #twitter-connect {
-  background: rgb(255, 255, 255) url('https://eswarasai.com/projects/social-login/img/twitter.png') no-repeat scroll 5px 1px / 45px 45px padding-box border-box;
   border: 1px solid rgb(85, 172, 238);
 }
 
 #twitter-connect:hover {
   border-color: rgb(85, 172, 238);
-  background: rgb(85, 172, 238) url('https://eswarasai.com/projects/social-login/img/twitter-white.png') no-repeat scroll 5px 1px / 45px 45px padding-box border-box;
   -webkit-transition: all .8s ease-out;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;