Style sso button

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/platform/web/ui/css/login.css

@@ -70,3 +70,19 @@ limitations under the License.
 .SessionLoadStatusView .spinner {
     --size: 20px;
 }
+
+.SSOLoginView {
+    display: flex;
+    flex-direction: column;
+}
+
+.SSOLoginView_button {
+    flex: 1;
+    margin-top: 10px;
+}
+
+.SSOLoginView_separator {
+    justify-content: center;
+    display: flex;
+    margin: 8px;
+}

src/platform/web/ui/css/themes/element/theme.css

@@ -223,6 +223,16 @@ a.button-action {
     padding-top: 16px;
 }
 
+.SSOLoginView_button {
+    border: 1px solid #03B381;
+    border-radius: 8px;
+}
+
+.SSOLoginView_separator {
+    font-weight: 500;
+    font-size: 1.5rem;
+}
+
 @media screen and (min-width: 600px) {
     .PreSessionScreen {
         box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);

src/platform/web/ui/login/LoginView.js

@@ -41,6 +41,11 @@ export class LoginView extends TemplateView {
 
 class SSOLoginView extends TemplateView {
     render(t, vm) {
-        return t.button({className: "SSO", type: "button", onClick: () => vm.startSSOLogin()}, "Login with SSO");
+        return t.div({ className: "SSOLoginView" },
+            [
+                t.p({ className: "SSOLoginView_separator" }, "or"),
+                t.button({ className: "SSOLoginView_button button-action secondary", type: "button", onClick: () => vm.startSSOLogin() }, "Log in with SSO")
+            ]
+        );
     }
 }