Unify the UI style in sign up, sign in buttons when using omniauth (GRN-35) (#301)

* Changed style to buttons for sign up

* Added assets and generalized code for sign up buttons

* Added new style to sign in modal

* Replaced hex colors with the official ones

* Removed the old social icons that are no longer used

* Centred text in sign up buttons

* Base button rendering on iconset_providers and secured office 365

app/assets/stylesheets/main.scss

@@ -58,10 +58,10 @@
   font-weight: normal;
 }
 
-
-.customBtn-google {
-  display: inline-block;
-  background: #4688F1;
+.customBtn {
+  display: block;
+  text-align: center;
+  background: #cccccc;
   color: #ffffff;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
   -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
@@ -69,6 +69,7 @@
   white-space: nowrap;
   border-radius: 2px;
   border: 1px solid transparent;
+  margin-bottom:20px;
   &:hover {
     cursor: pointer;
     color: #ffffff;
@@ -93,5 +94,53 @@
     font-family: 'Roboto', sans-serif;
   }
 
-
+  .customBtn-image {
+    background: #ffffff;
+    background-size: 18px 18px;
+    padding:10px 10px 10px 10px;
+  }
+}
+
+.customBtn-google {
+  @extend .customBtn;
+  background: #4688f1;
+
+  .customBtn-image {
+    background: #ffffff image-url("google-logo.png") no-repeat left top;
+    background-size: 18px 18px;
+    padding:10px 10px 10px 10px;
+  }
+}
+
+.customBtn-twitter {
+  @extend .customBtn;
+  background: #1da1f2;
+
+  .customBtn-image {
+    background: #ffffff image-url("twitter-logo.png") no-repeat left top;
+    background-size: 18px 18px;
+    padding:10px 10px 10px 10px;
+  }
+}
+
+.customBtn-microsoft_office365 {
+  @extend .customBtn;
+  background: #f65314;
+
+  .customBtn-image {
+    background: #ffffff image-url("office365-logo.jpeg") no-repeat left top;
+    background-size: 18px 18px;
+    padding:10px 10px 10px 10px;
+  }
+}
+
+.customBtn-microsoft_windows {
+  @extend .customBtn;
+  background: #00a1f1;
+
+  .customBtn-image {
+    background: #ffffff image-url("windows-logo.png") no-repeat left top;
+    background-size: 18px 18px;
+    padding:10px 10px 10px 10px;
+  }
 }