Added brand logos to login buttons (#479)

* Added brand logos to login buttons

* Addressing changes

catalog-rest-service/src/main/resources/ui/src/pages/login/index.tsx

@@ -33,30 +33,41 @@ const SigninPage = () => {
   };
 
   const getSignInButton = (): JSX.Element => {
+    let ssoBrandName = '';
+    let ssoBrandLogo = '';
     switch (appState.authProvider.provider) {
       case AuthTypes.GOOGLE: {
-        return (
-          <button className="tw-signin-button">
-            <SVGIcons alt="Google Logo" icon={Icons.GOOGLE_ICON} width="22" />
-            <span className="tw-ml-3">Sign in with Google</span>
-          </button>
-        );
+        ssoBrandLogo = Icons.GOOGLE_ICON;
+        ssoBrandName = 'Google';
+
+        break;
       }
       case AuthTypes.OKTA: {
-        return (
-          <button className="tw-signin-button tw-text-white tw-bg-blue-700 hover:tw-bg-blue-600">
-            Sign in with Okta
-          </button>
-        );
+        ssoBrandLogo = Icons.OKTA_ICON;
+        ssoBrandName = 'Okta';
+
+        break;
       }
       case AuthTypes.AUTH0: {
-        return <button className="tw-signin-button">Sign in with Auth0</button>;
+        ssoBrandLogo = Icons.AUTH0_ICON;
+        ssoBrandName = 'Auth0';
+
+        break;
       }
       // TODO: Add "case AuthTypes.GITHUB" after adding support for Github SSO
       default: {
-        return <></>;
+        break;
       }
     }
+
+    return ssoBrandName ? (
+      <button className="tw-signin-button">
+        <SVGIcons alt={`${ssoBrandName} Logo`} icon={ssoBrandLogo} width="22" />
+        <span className="tw-ml-3">Sign in with {ssoBrandName}</span>
+      </button>
+    ) : (
+      <></>
+    );
   };
 
   if (appState.authDisabled || !isEmpty(appState.userDetails)) {

catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -1,5 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import IconGoogle from '../assets/img/google-icon.png';
+import IconAuth0 from '../assets/img/icon-auth0.png';
+import IconGithub from '../assets/img/icon-github.png';
+import IconGoogle from '../assets/img/icon-google.png';
+import IconOkta from '../assets/img/icon-okta.png';
 import IconWelcomePopper from '../assets/img/welcome-popper-icon.png';
 import IconAPI from '../assets/svg/api.svg';
 import IconSuccess from '../assets/svg/check.svg';
@@ -70,6 +73,9 @@ export const Icons = {
   LOGO_SMALL: 'logo-small',
   WELCOME_POPPER: 'welcome-popper',
   GOOGLE_ICON: 'google-icon',
+  OKTA_ICON: 'okta-icon',
+  GITHUB_ICON: 'github-icon',
+  AUTH0_ICON: 'auth0-icon',
   EDIT: 'icon-edit',
   EXPLORE: 'icon-explore',
   MY_DATA: 'icon-my-data',
@@ -183,6 +189,18 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.GOOGLE_ICON:
       IconComponent = IconGoogle;
 
+      break;
+    case Icons.OKTA_ICON:
+      IconComponent = IconOkta;
+
+      break;
+    case Icons.GITHUB_ICON:
+      IconComponent = IconGithub;
+
+      break;
+    case Icons.AUTH0_ICON:
+      IconComponent = IconAuth0;
+
       break;
     case Icons.MENU:
       IconComponent = IconMenu;