@@ -92,29 +92,29 @@ function ActionButton({
const { t } = useTranslation()
if (!hasFeature) {
return (
-
{t('upgrade')}
-
+
)
} else if (linked) {
return (
-
{t('turn_off')}
-
+
)
} else {
return (
-
{t('turn_on')}
-
+
)
}
}
diff --git a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
index d57c0f7ab5..8c0990a248 100644
--- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
+++ b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
@@ -1,16 +1,16 @@
import { useCallback, useState, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
-import BadgeWrapper from '@/features/ui/components/bootstrap-5/wrappers/badge-wrapper'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
import getMeta from '../../../../utils/meta'
import { sendMB } from '../../../../infrastructure/event-tracking'
-import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
+import OLButton from '@/features/ui/components/ol/ol-button'
import { bsVersion } from '@/features/utils/bootstrap-5'
import OLModal, {
OLModalBody,
OLModalFooter,
OLModalHeader,
OLModalTitle,
-} from '@/features/ui/components/bootstrap-5/wrappers/ol-modal'
+} from '@/features/ui/components/ol/ol-modal'
function trackUpgradeClick(integration: string) {
sendMB('settings-upgrade-click', { integration })
@@ -67,9 +67,7 @@ export function IntegrationLinkingWidget({
{title}
- {!hasFeature && (
-
{t('premium_feature')}
- )}
+ {!hasFeature &&
{t('premium_feature')}}
{description}{' '}
@@ -121,31 +119,31 @@ function ActionButton({
const { t } = useTranslation()
if (!hasFeature) {
return (
- trackUpgradeClick(integration)}
bs3Props={{ bsStyle: null, className: 'btn-primary' }}
>
{t('upgrade')}
-
+
)
} else if (linked) {
return (
-
{t('unlink')}
-
+
)
} else {
return (
<>
{disabled ? (
-
{t('link')}
-
+
) : (
- trackLinkingClick(integration)}
>
{t('link')}
-
+
)}
)
@@ -217,7 +215,7 @@ function UnlinkConfirmationModal({
diff --git a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx
index c27383e542..3d3f44c520 100644
--- a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx
+++ b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx
@@ -5,14 +5,14 @@ import IEEELogo from '../../../../shared/svgs/ieee-logo'
import GoogleLogo from '../../../../shared/svgs/google-logo'
import OrcidLogo from '../../../../shared/svgs/orcid-logo'
import LinkingStatus from './status'
-import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
+import OLButton from '@/features/ui/components/ol/ol-button'
import { bsVersion } from '@/features/utils/bootstrap-5'
import OLModal, {
OLModalBody,
OLModalFooter,
OLModalHeader,
OLModalTitle,
-} from '@/features/ui/components/bootstrap-5/wrappers/ol-modal'
+} from '@/features/ui/components/ol/ol-modal'
const providerLogos: { readonly [p: string]: JSX.Element } = {
collabratec: ,
@@ -118,27 +118,27 @@ function ActionButton({
const { t } = useTranslation()
if (unlinkRequestInflight) {
return (
-
{t('unlinking')}
-
+
)
} else if (accountIsLinked) {
return (
-
{t('unlink')}
-
+
)
} else {
return (
-
{t('link')}
-
+
)
}
}
@@ -181,7 +181,7 @@ function UnlinkConfirmModal({
-
{t('cancel')}
-
-
+
{t('unlink')}
-
+
)
diff --git a/services/web/frontend/js/features/settings/components/password-section.tsx b/services/web/frontend/js/features/settings/components/password-section.tsx
index 228f3597a9..541ec4f583 100644
--- a/services/web/frontend/js/features/settings/components/password-section.tsx
+++ b/services/web/frontend/js/features/settings/components/password-section.tsx
@@ -9,12 +9,12 @@ import getMeta from '../../../utils/meta'
import { ExposedSettings } from '../../../../../types/exposed-settings'
import { PasswordStrengthOptions } from '../../../../../types/password-strength-options'
import useAsync from '../../../shared/hooks/use-async'
-import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
-import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
-import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
-import FormLabelWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-label-wrapper'
-import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
-import FormTextWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-text-wrapper'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLFormText from '@/features/ui/components/ol/ol-form-text'
type PasswordUpdateResult = {
message?: {
@@ -159,13 +159,13 @@ function PasswordForm() {
autoComplete="new-password"
/>
{isSuccess && data?.message?.text ? (
-
-
-
+
+
+
) : null}
{isError ? (
-
-
+
-
+
) : null}
-
{t('change')}
-
+
)
}
@@ -255,9 +255,9 @@ function PasswordFormGroup({
)
return (
-
- {label}
-
+ {label}
+
{isInvalid && (
-
+
{parentValidationMessage || validationMessage}
-
+
)}
-
+
)
}
diff --git a/services/web/frontend/js/features/settings/components/root.tsx b/services/web/frontend/js/features/settings/components/root.tsx
index b03814296b..170044dcb2 100644
--- a/services/web/frontend/js/features/settings/components/root.tsx
+++ b/services/web/frontend/js/features/settings/components/root.tsx
@@ -20,9 +20,9 @@ import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
import useScrollToIdOnLoad from '../../../shared/hooks/use-scroll-to-id-on-load'
import { ExposedSettings } from '../../../../../types/exposed-settings'
import { SSOAlert } from './emails/sso-alert'
-import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper'
-import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper'
-import CardWrapper from '@/features/ui/components/bootstrap-5/wrappers/card-wrapper'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLCard from '@/features/ui/components/ol/ol-card'
function SettingsPageRoot() {
const { isReady } = useWaitForI18n()
@@ -34,11 +34,11 @@ function SettingsPageRoot() {
return (
-
-
+
+
{isReady ? : null}
-
-
+
+
)
}
@@ -51,7 +51,7 @@ function SettingsPageContent() {
return (
-
+
{t('account_settings')}
@@ -59,14 +59,14 @@ function SettingsPageContent() {
-
-
+
+
-
-
+
+
-
-
+
+
@@ -96,7 +96,7 @@ function SettingsPageContent() {
) : null}
-
+
)
}
diff --git a/services/web/frontend/js/features/settings/components/security-section.tsx b/services/web/frontend/js/features/settings/components/security-section.tsx
index 34394f6848..9e5dc098db 100644
--- a/services/web/frontend/js/features/settings/components/security-section.tsx
+++ b/services/web/frontend/js/features/settings/components/security-section.tsx
@@ -2,7 +2,7 @@ import MaterialIcon from '@/shared/components/material-icon'
import { Trans, useTranslation } from 'react-i18next'
import { GroupSSOLinkingStatus } from '../../../../../types/subscription/sso'
import getMeta from '../../../utils/meta'
-import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
+import OLButton from '@/features/ui/components/ol/ol-button'
function SecuritySection() {
const { t } = useTranslation()
@@ -85,13 +85,13 @@ function SecuritySection() {