@openeventkit/event-site 2.0.114 → 2.0.116

package/gatsby-browser.js

@@ -34,9 +34,9 @@ export const onClientEntry = () => {
     document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
   });
   // set theme
-  const themeSetting = marketingSettings.find(ms => ms.key === 'EVENT_SITE_COLOR_SCHEME');
-  const theme = themeSetting?.value || 'LIGHT';
-  document.documentElement.setAttribute('data-theme', theme);
+  const themeSetting = marketingSettings.find(ms => ms.key === "EVENT_SITE_COLOR_SCHEME");
+  const theme = themeSetting?.value || "LIGHT";
+  document.documentElement.setAttribute("data-theme", theme);
 
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;

package/gatsby-config.mjs

@@ -26,26 +26,27 @@ const {
 let siteSettings = require(`./${SITE_SETTINGS_FILE_PATH}`);
 try {
   siteSettings = require(path.resolve(SITE_SETTINGS_FILE_PATH));
-}
-catch (e) {
+} catch (e) {
   console.log("Falling back to default site settings.")
 }
 
-const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE || "Event Site";
-const description = siteSettings?.siteMetadata?.description || process.env.GATSBY_METADATA_DESCRIPTION || "Event Site";
+const packageJson = require(path.resolve(__dirname, "package.json"));
+
+const title = siteSettings?.siteMetadata?.title || process.env.GATSBY_METADATA_TITLE;
+const description = siteSettings?.siteMetadata?.description || process.env.GATSBY_METADATA_DESCRIPTION;
 const faviconAsset = siteSettings?.favicon?.asset;
 
 const manifestPlugin = faviconAsset ? [
   {
     resolve: "gatsby-plugin-manifest",
     options: {
-      name: title,
-      short_name: title,
-      description: description,
+      name: title ?? packageJson.description,
+      short_name: title ?? packageJson.description,
       start_url: "/",
       display: "minimal-ui",
       icon: path.join(SITE_SETTINGS_DIR_PATH, faviconAsset),
-      include_favicon: true
+      include_favicon: true,
+      ...description && { description }
     }
   }
 ] : [];

package/gatsby-node.js

@@ -1,6 +1,6 @@
 const axios = require("axios");
 const path = require("path");
-const fs = require("fs-extra");
+const fs = require("fs");
 const webpack = require("webpack");
 const {
   createFilePath
@@ -16,6 +16,7 @@ const {
   REQUIRED_DIR_PATHS,
   DEFAULT_COLORS_FILE_PATH,
   COLORS_FILE_PATH,
+  COLORS_SCSS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   SUMMIT_FILE_PATH,
   EVENTS_FILE_PATH,
@@ -29,7 +30,12 @@ const {
   SPONSORS_FILE_PATH,
   FONTS_SCSS_FILE_PATH
 } = require("./src/utils/filePath");
-const { generateFontFile } = require("./src/utils/cssUtils");
+
+const {
+  generateAndWriteScssFile,
+  generateFontScssFile,
+  generateColorsScssFile
+} = require("./src/utils/scssUtils");
 
 const fileBuildTimes = [];
 
@@ -228,8 +234,8 @@ exports.onPreBootstrap = async () => {
   const summitId = process.env.GATSBY_SUMMIT_ID;
   const summitApiBaseUrl = process.env.GATSBY_SUMMIT_API_BASE_URL;
   let   marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
-  const colorSettings = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
   const siteSettings = fs.existsSync(SITE_SETTINGS_FILE_PATH) ? JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH)) : {};
+  const colors = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
 
   const config = {
     client: {
@@ -247,12 +253,12 @@ exports.onPreBootstrap = async () => {
 
   const accessToken = await getAccessToken(config, process.env.GATSBY_BUILD_SCOPES).then(({ token }) => token.access_token);
 
-  const FileType = 'FILE';
+  const FileType = "FILE";
   // extract colors from marketing settings
-  marketingSettings = marketingSettings.map( entry => {
-    if (entry.key.startsWith("color_")) colorSettings[entry.key] = entry.value;
-    if(entry.type === FileType) return {...entry, value: entry.file};
-    return {...entry};
+  marketingSettings = marketingSettings.map(entry => {
+    if (entry.key.startsWith("color_")) colors[entry.key] = entry.value;
+    if (entry.type === FileType) return { ...entry, value: entry.file };
+    return { ...entry };
   });
 
   // create required directories
@@ -263,7 +269,17 @@ exports.onPreBootstrap = async () => {
   });
 
   fs.writeFileSync(MARKETING_SETTINGS_FILE_PATH, JSON.stringify(marketingSettings), "utf8");
-  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
+
+  // write colors json used to set runtime colors in gatsby-browser
+  fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colors), "utf8");
+
+  // generate and write colors SCSS file used by built styles 
+  generateAndWriteScssFile(generateColorsScssFile, colors, COLORS_SCSS_FILE_PATH);
+
+  if (siteSettings.siteFont) {    
+    // generate and write font SCSS file used by built styles 
+    generateAndWriteScssFile(generateFontScssFile, siteSettings.siteFont, FONTS_SCSS_FILE_PATH);
+  }
 
   // summit
   const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
@@ -292,7 +308,6 @@ exports.onPreBootstrap = async () => {
   });
   fs.writeFileSync(EVENTS_IDX_FILE_PATH, JSON.stringify(allEventsIDX), "utf8");
 
-
   // Show Speakers
   const allSpeakers = await SSR_getSpeakers(summitApiBaseUrl, summitId, accessToken);
   console.log(`allSpeakers ${allSpeakers.length}`);
@@ -335,23 +350,6 @@ exports.onPreBootstrap = async () => {
   siteSettings.lastBuild = Date.now();
 
   fs.writeFileSync(SITE_SETTINGS_FILE_PATH, JSON.stringify(siteSettings), "utf8");
-
-  // Read fonts from site settings
-  const siteFonts = siteSettings.siteFont;
-
-  if(siteFonts && Object.keys(siteFonts).length > 0) {
-    // Generate the SCSS file
-    const scssFontsFile = generateFontFile(siteFonts);
-    if (scssFontsFile) {
-      const standalone = __dirname === path.resolve();
-      let fontFilePath = FONTS_SCSS_FILE_PATH;
-      if (!standalone) {
-        fontFilePath = `${__dirname}/${fontFilePath}`;
-      }
-      fs.writeFileSync(fontFilePath, scssFontsFile);
-      console.log(`CUSTOM FONT FILE ${fontFilePath} generated.`);
-    }
-  }
 };
 
 exports.createSchemaCustomization = async ({ actions, reporter, getNodeAndSavePathDependency }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.114",
+  "version": "2.0.116",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -28,7 +28,7 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.0.6",
+    "attendee-to-attendee-widget": "3.1.0",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
     "babel-preset-gatsby": "^3.13.2",
@@ -104,7 +104,7 @@
     "react-redux": "^7.2.6",
     "react-rte": "^0.16.3",
     "react-select": "^2.4.4",
-    "react-slick": "^0.27.0",
+    "react-slick": "^0.30.2",
     "react-star-ratings": "^2.3.0",
     "react-stars": "^2.2.5",
     "react-tabs": "^3.0.0",

package/src/cms/config/collections/defaultPagesCollection/invitationsRejectPage/index.js

@@ -20,18 +20,18 @@ const invitationsRejectPage = {
       required: false,
       default: "Invitation not found."
     }),
-    stringField({
-      label: "Rejected text",
-      name: "rejectedText",
-      required: false,
-      default: "Invitation has already been rejected."
-    }),
     stringField({
       label: "Reject text",
       name: "rejectText",
       required: false,
       default: "To reject please click on the button below."
     }),
+    stringField({
+      label: "Reject Confirmation Text",
+      name: "rejectedText",
+      required: false,
+      default: "Invitation has already been rejected."
+    }),
     stringField({
       label: "Reject CTA label",
       name: "rejectCTALabel",

package/src/components/AuthComponent.js

@@ -1,25 +1,27 @@
-import React, { useEffect, useState, useMemo } from "react"
-import { navigate } from "gatsby"
+import React, { useEffect, useState, useMemo } from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
 import { connect } from "react-redux";
-import URI from "urijs"
-// these two libraries are client-side only
-import LoginComponent from 'summit-registration-lite/dist/components/login';
-import PasswordlessLoginComponent from 'summit-registration-lite/dist/components/login-passwordless';
+import URI from "urijs";
+
 import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
-import { doLogin, passwordlessStart } from 'openstack-uicore-foundation/lib/security/methods'
+import { doLogin, passwordlessStart } from "openstack-uicore-foundation/lib/security/methods";
 import { setPasswordlessLogin, setUserOrder, checkOrderData } from "../actions/user-actions";
 import { getThirdPartyProviders } from "../actions/base-actions";
-import { validateIdentityProviderButtons } from "../utils/loginUtils";
-import 'summit-registration-lite/dist/index.css';
-import styles from '../styles/login-button.module.scss'
-import PropTypes from 'prop-types'
+
+// these two libraries are client-side only
+import LoginComponent from "summit-registration-lite/dist/components/login";
+import PasswordlessLoginComponent from "summit-registration-lite/dist/components/login-passwordless";
+import "summit-registration-lite/dist/index.css";
+import IconButton from "./IconButton";
 import Link from "./Link";
 
+import { getDefaultLocation, validateIdentityProviderButtons } from "@utils/loginUtils";
+import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import useSiteSettings from "@utils/useSiteSettings";
 import { PHASES } from "@utils/phasesUtils";
-import { getDefaultLocation } from "@utils/loginUtils";
-import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
 
-import useSiteSettings from "@utils/useSiteSettings";
+import styles from "../styles/auth-component.module.scss";
 
 const AuthComponent = ({
     getThirdPartyProviders,
@@ -166,23 +168,26 @@ const AuthComponent = ({
     const { loginButton } = marketingPageSettings.hero.buttons;
 
     const defaultLoginButton = () => (
-        <button className={`${styles.button} button is-large`} onClick={handleOpenPopup}>
-            <i className={`fa fa-2x fa-edit icon is-large`} />
-            <b>{loginButton.text}</b>
-        </button>
+        <IconButton
+            iconClass="fa fa-2x fa-edit"
+            buttonText={loginButton.text}
+            onClick={handleOpenPopup}
+        />
     );
 
     const defaultEnterButton = () => (
-        <Link className={styles.link} to={defaultPath}>
-            <button className={`${styles.button} button is-large`}>
-                <i className={`fa fa-2x fa-sign-in icon is-large`} />
-                <b>Enter</b>
-            </button>
+        <Link
+            to={defaultPath}
+        >
+            <IconButton
+                iconClass="fa fa-2x fa-sign-in"
+                buttonText="Enter"
+            />
         </Link>
     );
 
     return (
-        <div style={style} className={styles.loginButtonWrapper}>
+        <div style={style} className={styles.authComponent}>
             {!isLoggedUser ?
                 renderLoginButton ? renderLoginButton(handleOpenPopup) : defaultLoginButton()
                 :

package/src/components/Container.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+const Container = ({ className, children }) => (
+  <div className={`${className ?? ""}`}>
+    {children}
+  </div>
+);
+
+export default Container;

package/src/components/Footer/template.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FooterMarketing from "../FooterMarketing";
 import Link from "../Link";
 
@@ -29,7 +30,7 @@ const FooterTemplate = ({ data, summit, marketing }) => {
                         {data.social.networks.map((net, index) => (
                           net.display &&
                           <Link to={net.link} key={index}>
-                            <i className={`fa icon is-large ${net.icon}`}></i>
+                            <FontAwesomeIcon icon={`fa-brands ${net.icon}`} size="lg" />
                           </Link>
                         ))}
                       </div>
@@ -81,7 +82,7 @@ const FooterTemplate = ({ data, summit, marketing }) => {
                     {data.social.networks.map((net, index) => (
                       net.display &&
                       <Link to={net.link} className={styles.link} key={index}>
-                        <i className={`fa icon is-large ${net.icon}`} />
+                        <FontAwesomeIcon icon={`fa-brands ${net.icon}`} size="lg" />
                       </Link>
                     ))}
                   </div>

package/src/components/FooterMarketing.js

@@ -1,6 +1,6 @@
 import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "./Link";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import footerContent from "content/footer/index.json";
 

package/src/components/IconButton/index.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import styles from "./styles.module.scss";
+
+const IconButton = ({
+  className = "",
+  iconClass = "",
+  buttonText,
+  onClick = () => {},
+  disabled = false
+}) => (
+  <button
+    className={`button is-large mt-5 ${styles.button} ${className}`}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    <i className={`icon ${iconClass}`} />
+    <b>{buttonText}</b>
+  </button>
+);
+
+export default IconButton;

package/src/components/IconButton/styles.module.scss

@@ -0,0 +1,31 @@
+.button {
+  background-color: transparent!important;
+  color: #fff!important;
+  height: 5rem!important;
+  width: 20rem!important;
+  i {
+    color: #fff;
+    height: 1em!important;
+    width: 2.5em!important;
+    font-size: 1.8em!important;
+  }
+  b {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+  }
+  &:hover,
+  &:active {
+    border-color: #fff!important;
+  }
+  &:focus {
+    border-color: #fff!important;
+  }
+  &.register {
+    background-color: #fff!important;
+    color: #6d6e71!important;
+    i {
+      color: #6d6e71!important;
+    }
+  }
+}

package/src/components/MarketingHero/ImagesColumn.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image";
+import Slider from "react-slick";
+
+import styles from "./styles.module.scss";
+
+const sliderSettings = {
+  autoplay: false,
+  autoplaySpeed: 5000,
+  infinite: true,
+  dots: false,
+  slidesToShow: 1,
+  slidesToScroll: 1
+};
+
+const ImagesColumn = ({ images }) => {
+  return images.length === 0 ? null : (
+    <div className={`column is-half p-0 ${styles.imagesColumn}`}>
+      {images.length > 1 ? (
+        <Slider {...sliderSettings} >
+          {images.map((image, index) => (
+          <img
+            key={index}
+            src={getSrc(image.src)}
+            alt={image.alt ?? ""}
+          />
+          ))}
+        </Slider>
+      ) : (
+        <GatsbyImage
+          className={styles.singleImage}
+          image={getImage(images[0].src)}
+          alt={images[0].alt ?? ""}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ImagesColumn;
+

package/src/components/MarketingHero/MainColumn.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { getSrc } from "gatsby-plugin-image";
+import AuthComponent from "../AuthComponent";
+import RegistrationLiteComponent from "../RegistrationLiteComponent";
+
+import styles from "./styles.module.scss";
+
+const ButtonGroup = ({ location, registerButton, loginButton }) => (
+  <>
+    {registerButton?.display && (
+      <span className={styles.link}>
+        <RegistrationLiteComponent location={location} />
+      </span>
+    )}
+    {loginButton?.display && <AuthComponent location={location} />}
+  </>
+);
+
+const MainColumn = ({ location, title, subTitle, date, time, buttons, backgroundSrc, fullWidth }) => {
+  const backgroundImageStyle = backgroundSrc
+    ? { backgroundImage: `url(${getSrc(backgroundSrc)})` }
+    : {};
+  return (
+    <div className={`column ${!fullWidth ? "is-half" : ""} p-0 ${styles.mainColumn}`} style={backgroundImageStyle}>
+      <div className={`hero-body ${styles.heroBody}`}>
+        {title && <h1 className="title">{title}</h1>}
+        {subTitle && <h2 className="subtitle">{subTitle}</h2>}
+        {date && <h4>{date}</h4>}
+        {time && <h4>{time}</h4>}
+        <div className={styles.heroButtons}>
+          <ButtonGroup {...buttons} location={location} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MainColumn;

package/src/components/MarketingHero/index.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import MainColumn from "./MainColumn";
+import ImagesColumn from "./ImagesColumn";
+
+import styles from "./styles.module.scss";
+
+const MarketingHero = ({ location, data }) => {
+  const {
+    title,
+    subTitle,
+    date,
+    time,
+    buttons = {},
+    background,
+    images = []
+  } = data || {};
+  return (
+    <section>
+      <div className={"columns is-marginless"}>
+        <MainColumn
+          location={location}
+          title={title}
+          subTitle={subTitle}
+          date={date}
+          time={time}
+          buttons={buttons}
+          backgroundSrc={background?.src}
+          fullWidth={images.length === 0}
+        />
+        {images.length > 0 && (
+        <ImagesColumn images={images} />
+        )}
+      </div>
+    </section>
+  );
+};
+
+MarketingHero.propTypes = {
+  location: PropTypes.object.isRequired,
+  data: PropTypes.object
+};
+
+export default MarketingHero;

package/src/components/MarketingHero/styles.module.scss

@@ -0,0 +1,73 @@
+@import "../../styles/colors.scss";
+
+.mainColumn {
+  background-color: var(--color_secondary_contrast);
+  min-height: 100%;
+  background-size: cover;
+  h1 {
+    font-size: calc(50px + (50 - 42) * (100vw - 250px) / (1080 - 250));
+    font-weight: bold;
+    margin-top: 0rem;
+  }
+  h2 {
+    font-size: calc(40px + (40 - 36) * (100vw - 250px) / (1080 - 20));
+    font-weight: normal;
+  }
+  h4 {
+    font-size: calc(22px + (22 - 14) * (100vw - 250px) / (1080 - 250));
+    font-weight: bold;
+  }
+  h1,
+  h2,
+  h4 {
+    color: var(--color_text_light);
+  }
+  .heroBody {
+    padding: 4rem 3rem;
+  }
+}
+
+.imagesColumn {
+  :global(.slick-slider) {
+    height: 100%; /* Ensure the slider takes the full height of its parent */
+    position: relative; /* Position the slider container */
+    :global(.slick-list) {
+      height: 100%; /* Ensure the slick-list takes the full height of its parent */
+      overflow: hidden; /* Hide any overflow to prevent scrollbar affecting layout */
+      :global(.slick-track) {
+        display: flex;
+        align-items: stretch;
+        height: 100%; /* Ensure the slick-track takes the full height */
+        :global(.slick-slide) {
+          display: flex;
+          justify-content: center;
+          align-items: stretch;
+          height: 100%; /* Ensure each slide takes the full height of the slick-track */
+          position: relative; /* Ensure relative positioning for the slide */
+          div {
+            width: 100%;
+            position: relative; /* Position the container for enforcing aspect ratio */
+            &::before {
+              content: ""; /* Create a pseudo-element */
+              display: block;
+              padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
+            }
+            img {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              object-fit: cover; /* Cover the entire container without distorting the image */
+              object-position: center; /* Center the image within the container */
+            }
+          }
+        }
+      }
+    }
+  }
+  .singleImage {
+    height: 100%;
+    background-size: cover;
+  }
+}

package/src/components/RegistrationLiteComponent.js

@@ -1,35 +1,35 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import * as Sentry from "@sentry/react";
-import { navigate, withPrefix } from "gatsby"
+import { navigate, withPrefix } from "gatsby";
 import { connect } from "react-redux";
 import URI from "urijs";
-import PropTypes from 'prop-types';
-
-// these two libraries are client-side only
-import RegistrationLiteWidget from "summit-registration-lite/dist";
-import "summit-registration-lite/dist/index.css";
-import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
-import {doLogin, passwordlessStart, getAccessToken} from "openstack-uicore-foundation/lib/security/methods"
-import {doLogout} from "openstack-uicore-foundation/lib/security/actions"
-import {getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL} from "../utils/envVariables"
-import {getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData} from "../actions/user-actions";
-import {getThirdPartyProviders} from "../actions/base-actions";
-import { validateIdentityProviderButtons } from "../utils/loginUtils";
 import Swal from "sweetalert2";
-import {checkRequireExtraQuestionsByAttendee} from "../actions/user-actions";
-import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
 
+import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
+import { doLogin, passwordlessStart, getAccessToken } from "openstack-uicore-foundation/lib/security/methods"
+import { doLogout } from "openstack-uicore-foundation/lib/security/actions"
+import { getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData } from "../actions/user-actions";
+import { getThirdPartyProviders } from "../actions/base-actions";
+import { checkRequireExtraQuestionsByAttendee } from "../actions/user-actions";
 import { getExtraQuestions } from "../actions/summit-actions";
 
-import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
-import useSiteSettings from "@utils/useSiteSettings";
+import IconButton from "./IconButton";
+import iconButtonStyles from "./IconButton/styles.module.scss";
+
 import { SentryFallbackFunction } from "./SentryErrorComponent";
+// these two libraries are client-side only
+import RegistrationLiteWidget from "summit-registration-lite/dist";
+import "summit-registration-lite/dist/index.css";
 
+import useSiteSettings from "@utils/useSiteSettings";
+import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
+import { getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL } from "@utils/envVariables";
+import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
+import { validateIdentityProviderButtons } from "@utils/loginUtils";
 import { triggerAnalyticsTrackEvent } from "@utils/customEvents";
 import { PURCHASE_COMPLETE } from "@utils/analytics/events";
 
-import styles from "../styles/marketing-hero.module.scss";
-
 const RegistrationLiteComponent = ({
    registrationProfile,
    userProfile,
@@ -208,11 +208,13 @@ const RegistrationLiteComponent = ({
                 React.cloneElement(children, { onClick: handleOpenPopup })
                 :
                 registerButton.display &&
-                <button className={`${styles.button} button is-large`} disabled={isActive}
-                        onClick={handleOpenPopup}>
-                    <i className={`fa fa-2x fa-edit icon is-large`}/>
-                    <b>{registerButton.text}</b>
-                </button>
+                <IconButton
+                    className={iconButtonStyles.register}
+                    iconClass="fa fa-2x fa-edit"
+                    buttonText={registerButton.text}
+                    onClick={handleOpenPopup}
+                    disabled={isActive}
+                />
             }
             <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: "Registration Lite"})}>
                 {isActive && <RegistrationLiteWidget {...widgetProps} />}