[C-3918] Fix wallet and dev-apps icons (#7749)

packages/harmony/src/components/hint/Hint.tsx

@@ -1,32 +1,43 @@
+import { ReactNode } from 'react'
+
 import type { IconComponent } from 'components/icon'
+import { Flex } from 'components/layout'
 import { Paper, PaperProps } from 'components/layout/Paper'
 import { Text } from 'components/text'
 
 type HintProps = {
   icon: IconComponent
+  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
-  const { icon: Icon, children, ...other } = props
+  const { icon: Icon, children, actions, ...other } = props
   return (
     <Paper
       role='alert'
+      backgroundColor='surface2'
       ph='l'
       pv='m'
-      backgroundColor='surface2'
-      alignItems='center'
-      gap='l'
+      direction='column'
+      gap='m'
       shadow='flat'
       border='strong'
       {...other}
     >
-      <Icon size='l' color='default' />
-      <Text variant='body' color='default'>
-        {children}
-      </Text>
+      <Flex gap='l' alignItems='center'>
+        <Icon size='l' color='default' />
+        <Text variant='body' color='default'>
+          {children}
+        </Text>
+      </Flex>
+      {actions ? (
+        <Flex pl='unit10' gap='l'>
+          {actions}
+        </Flex>
+      ) : null}
     </Paper>
   )
 }

packages/mobile/src/components/audio-breakdown-drawer/AudioBreakdownDrawer.tsx

@@ -10,12 +10,10 @@ import BN from 'bn.js'
 import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { IconInfo } from '@audius/harmony-native'
 import { GradientText } from 'app/components/core'
 import { AppDrawer } from 'app/components/drawer'
 import Text from 'app/components/text'
 import { makeStyles } from 'app/styles'
-import { spacing } from 'app/styles/spacing'
 
 import { Wallet } from './Wallet'
 const { getAccountBalance } = walletSelectors
@@ -70,9 +68,6 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     color: palette.neutralLight4,
     fontSize: spacing(3)
   },
-  infoIcon: {
-    marginLeft: 8
-  },
   walletsHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -192,11 +187,6 @@ export const AudioBreakdownDrawer = () => {
           <View style={styles.sectionDescription}>
             <Text style={styles.description} weight='bold'>
               {messages.linkedWalletsDescription}
-              <IconInfo
-                style={styles.infoIcon}
-                height={spacing(3)}
-                width={spacing(3)}
-              />
             </Text>
           </View>
         </View>

packages/mobile/src/components/audio-breakdown-drawer/Wallet.tsx

@@ -40,9 +40,6 @@ const useSyles = makeStyles(({ palette, spacing }) => ({
     fontSize: 14
   },
   copyIcon: {
-    lineHeight: 16,
-    marginBottom: 2,
-    color: palette.neutralLight4,
     marginLeft: 10
   }
 }))
@@ -77,7 +74,7 @@ export const Wallet = (props: WalletProps) => {
             <Text style={styles.walletAddress} weight='demiBold'>
               {displayAddress(address)}
             </Text>
-            <IconCopy style={styles.copyIcon} height={16} width={16} />
+            <IconCopy style={styles.copyIcon} size='s' color='subdued' />
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>

packages/web/src/pages/settings-page/components/desktop/DeveloperApps/AppDetailsPage.module.css

@@ -4,41 +4,8 @@
   gap: var(--unit-6);
 }
 
-.secretNotice {
-  background-color: var(--neutral-light-9);
-  border: 1px solid var(--netural-light-7);
-  border-radius: var(--unit-2);
-  display: flex;
-  flex-direction: column;
-  gap: var(--unit-3);
-  padding: var(--unit-3) var(--unit-4);
-}
-
-.noticeIcon {
-  height: var(--unit-8);
-  width: var(--unit-8);
-}
-
-.noticeTextRoot {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--unit-4);
-}
-
-.noticeText {
-  font-size: var(--font-l);
-  font-weight: var(--font-medium);
-  line-height: 1.3;
-}
-
 .readTheDocs {
-  /* left-aligns link with title */
-  margin-left: calc(var(--unit-5) + var(--unit-4));
-  align-self: flex-start;
-  font-size: var(--font-m);
-  font-weight: var(--font-medium);
   color: var(--secondary);
-  text-align: left;
   text-decoration: underline !important;
 }
 

packages/web/src/pages/settings-page/components/desktop/DeveloperApps/AppDetailsPage.tsx

@@ -1,13 +1,15 @@
 import { useCallback } from 'react'
 
 import {
-  IconCopy as IconCopyPlain,
-  IconError as IconWarning,
+  IconCopy,
+  IconError,
   IconCaretRight,
-  IconButton
+  IconButton,
+  Hint
 } from '@audius/harmony'
 
 import { Divider } from 'components/divider'
+import { ExternalLink } from 'components/link'
 import Toast from 'components/toast/Toast'
 import { MountPlacement } from 'components/types'
 import { copyToClipboard } from 'utils/clipboardUtil'
@@ -55,20 +57,17 @@ export const AppDetailsPage = (props: AppDetailsPageProps) => {
   return (
     <div className={styles.root}>
       {!apiSecret ? null : (
-        <div className={styles.secretNotice}>
-          <span className={styles.noticeTextRoot}>
-            <IconWarning className={styles.noticeIcon} />
-            <p className={styles.noticeText}>{messages.secretReminder}</p>
-          </span>
-          <a
-            target='_blank'
-            href={AUDIUS_SDK_LINK}
-            className={styles.readTheDocs}
-            rel='noreferrer'
-          >
-            {messages.readTheDocs}
-          </a>
-        </div>
+        <Hint
+          icon={IconError}
+          actions={
+            // TODO: use variant='visible' when migrated to harmony
+            <ExternalLink to={AUDIUS_SDK_LINK} className={styles.readTheDocs}>
+              {messages.readTheDocs}
+            </ExternalLink>
+          }
+        >
+          {messages.secretReminder}
+        </Hint>
       )}
       <h4 className={styles.appName}>{name}</h4>
       {!description ? null : (
@@ -88,7 +87,7 @@ export const AppDetailsPage = (props: AppDetailsPageProps) => {
               onClick={copyApiKey}
               aria-label={messages.copyApiKeyLabel}
               color='subdued'
-              icon={IconCopyPlain}
+              icon={IconCopy}
             />
           </Toast>
         </span>
@@ -105,7 +104,7 @@ export const AppDetailsPage = (props: AppDetailsPageProps) => {
                 onClick={copySecret}
                 aria-label={messages.copyApiKeyLabel}
                 color='subdued'
-                icon={IconCopyPlain}
+                icon={IconCopy}
               />
             </Toast>
           </span>