MP-40 adds dice info tooltip when active

Author: kkartunov

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;
+            }
         }
     }
-}
+}

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<SecurityProps> = (props: SecurityProps) => {
                 title='DICE ID Authenticator App'
                 infoText='DICE ID authentication application.'
                 actionElement={(
-                    <Button
-                        label='Setup DICE ID Authentication'
-                        secondary
-                        size='lg'
-                        className={styles.diceIdButton}
-                        onClick={handleDiceModalStatus}
-                        disabled={!mfaEnabled || mfaStatusData?.diceEnabled}
-                    />
+                    <div className={styles.diceBtnWrap}>
+                        <Button
+                            label='Setup DICE ID Authentication'
+                            secondary
+                            size='lg'
+                            className={styles.diceIdButton}
+                            onClick={handleDiceModalStatus}
+                            disabled={!mfaEnabled || mfaStatusData?.diceEnabled}
+                        />
+                        {
+                            mfaStatusData?.diceEnabled && (
+                                <Tooltip
+                                    content='Please reach out to support@topcoder.com for deactivating Dice ID.'
+                                >
+                                    <IconOutline.InformationCircleIcon />
+                                </Tooltip>
+                            )
+                        }
+                    </div>
                 )}
             />