diff --git a/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss b/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss index 98475fce4..d80b6953d 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss +++ b/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss @@ -20,12 +20,24 @@ align-self: flex-start; } - .diceIdButton { - align-self: center; + .diceBtnWrap { + display: flex; + align-items: center; + color: #767676; @include ltelg { margin-top: $sp-4; } + + .diceIdButton { + align-self: center; + } + + svg { + width: 24px; + height: 24px; + margin-left: $sp-2; + } } } -} +} \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx b/src/apps/accounts/src/settings/tabs/account/security/Security.tsx index 9048cf742..a120727ea 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx +++ b/src/apps/accounts/src/settings/tabs/account/security/Security.tsx @@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react' import { toast } from 'react-toastify' import { KeyedMutator } from 'swr' -import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui' +import { Button, Collapsible, FormToggleSwitch, IconOutline, Tooltip } from '~/libs/ui' import { diceIdLogo, MFAImage, SettingSection } from '~/apps/accounts/src/lib' import { MemberMFAStatus, updateMemberMFAStatusAsync, useMemberMFAStatus, UserProfile } from '~/libs/core' @@ -82,14 +82,25 @@ const Security: FC = (props: SecurityProps) => { title='DICE ID Authenticator App' infoText='DICE ID authentication application.' actionElement={( -