fix: improve UI accessibility and dark-mode icon rendering

Author: dan13ram

apps/web/public/why-dark.svg

@@ -316,11 +316,13 @@ export const navPopUpWrapper = style({
 export const wrongNetworkButton = style({
   transition:
     'border 0.1s ease-in-out, background 0.1s ease-in-out, transform 0.1s ease-out',
-  background: vars.color.negativeDisabled,
-  color: color.negative,
+  borderWidth: 'normal',
+  borderStyle: 'solid',
+  borderColor: vars.color.negative,
+  color: vars.color.negative,
   selectors: {
     '&:hover': {
-      background: vars.color.negative,
+      background: vars.color.negativeDisabled,
     },
   },
 })

apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts

@@ -206,56 +206,13 @@ export const ProfileMenu: React.FC<ProfileMenuProps> = ({
 
   const onDisconnect = useWalletDisconnect()
 
-  const renderConnectedUser = () => (
-    <>
-      <Flex direction={'column'} align={'stretch'} gap={'x2'}>
-        <Flex direction={'row'} align={'center'} justify={'space-between'} w={'100%'}>
-          <Link
-            href={`/profile/${address}`}
-            passHref
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ textDecoration: 'none', flex: 1 }}
-          >
-            <Flex
-              direction={'row'}
-              align={'center'}
-              className={profileRow}
-              aria-label="Open profile"
-            >
-              <Avatar address={address!} src={ensAvatar} size={'40'} />
-              <Flex direction={'column'} ml={'x2'}>
-                <Text fontWeight={'display'}>{displayName}</Text>
-                <Text variant={'paragraph-md'} color={'tertiary'}>
-                  {userBalance}
-                </Text>
-              </Flex>
-            </Flex>
-          </Link>
-          <CopyButton text={address!} />
-        </Flex>
-
-        <Button
-          className={disconnectButton}
-          variant={'outline'}
-          color="negative"
-          onClick={onDisconnect}
-          id={'close-modal'}
-        >
-          Disconnect
-        </Button>
-      </Flex>
-      <Box color="border" borderStyle="solid" borderWidth="thin" />
-    </>
-  )
-
-  const renderConnectedUserStatic = () => (
+  const renderConnectedUserCommon = ({ isStatic = false }: { isStatic?: boolean }) => (
     <>
       <Flex
         direction={'column'}
         align={'stretch'}
         gap={'x2'}
-        style={{ paddingBottom: '8px' }}
+        style={isStatic ? { paddingBottom: '8px' } : undefined}
       >
         <Flex direction={'row'} align={'center'} justify={'space-between'} w={'100%'}>
           <Link
@@ -297,6 +254,10 @@ export const ProfileMenu: React.FC<ProfileMenuProps> = ({
     </>
   )
 
+  const renderConnectedUser = () => renderConnectedUserCommon({ isStatic: false })
+
+  const renderConnectedUserStatic = () => renderConnectedUserCommon({ isStatic: true })
+
   const renderUserContent = (isMobileFullscreen = false, showCreateButton = true) => (
     <>
       {daos.length > 0 && (

apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useCallback } from 'react'
 import { getDefaultLayout } from 'src/layouts/DefaultLayout'
-import { whyCreateButton, whyTextStyle } from 'src/styles/about.css'
+import { darkWhy, lightWhy, whyCreateButton, whyTextStyle } from 'src/styles/about.css'
 
 import { NextPageWithLayout } from './_app'
 
@@ -35,7 +35,21 @@ const AboutPage: NextPageWithLayout = () => {
           width={'100%'}
           px={'x4'}
         >
-          <Image src={'/why.svg'} alt="why" style={{ alignSelf: 'center' }} width={500} />
+          <Image
+            src={'/why.svg'}
+            alt="why"
+            style={{ alignSelf: 'center' }}
+            width={500}
+            className={lightWhy}
+          />
+          <Image
+            src={'/why-dark.svg'}
+            alt={''}
+            aria-hidden={true}
+            style={{ alignSelf: 'center' }}
+            width={500}
+            className={darkWhy}
+          />
 
           <Box>
             Nouns Builder makes it easy for communities and collectives to create Nounish

apps/web/src/pages/about.tsx

@@ -15,3 +15,23 @@ export const whyCreateButton = style({
     },
   },
 })
+
+const darkWordSelector = 'html[data-theme-mode="dark"] &'
+
+export const lightWhy = style({
+  display: 'block',
+  selectors: {
+    [darkWordSelector]: {
+      display: 'none',
+    },
+  },
+})
+
+export const darkWhy = style({
+  display: 'none',
+  selectors: {
+    [darkWordSelector]: {
+      display: 'block',
+    },
+  },
+})

apps/web/src/styles/about.css.ts

@@ -83,6 +83,7 @@ export const TRANSACTION_TYPES: TransactionTypesPropsMap = {
     title: 'Fix Metadata Renderer Base',
     subTitle: 'Restore NFT image visibility on external marketplaces',
     icon: 'spanner',
+    iconFill: 'warningStrong',
     iconBackdrop: iconBackdrop(color.warning),
   },
   [TransactionType.RESUME_AUCTIONS]: {
@@ -114,7 +115,7 @@ export const TRANSACTION_TYPES: TransactionTypesPropsMap = {
     title: 'Migration',
     subTitle: 'Migrate from L1 to L2',
     icon: 'migrate',
-    iconBackdrop: `color-mix(in srgb, ${color.warning} 10%, transparent)`,
+    iconBackdrop: iconBackdrop(color.warning),
   },
   [TransactionType.WALLET_CONNECT]: {
     title: 'WalletConnect',

packages/proposal-ui/src/constants/transactionTypes.ts

@@ -1,7 +1,13 @@
 import { Box, Icon, PopUp } from '@buildeross/zord'
 import { useRef, useState } from 'react'
 
-export const Tooltip = ({ children }: { children: string }) => {
+export const Tooltip = ({
+  children,
+  label = 'Help',
+}: {
+  children: string
+  label?: string
+}) => {
   const [showTooltip, setShowTooltip] = useState(false)
   const triggerRef = useRef<HTMLDivElement | null>(null)
 
@@ -17,8 +23,9 @@ export const Tooltip = ({ children }: { children: string }) => {
         ref={triggerRef}
         tabIndex={0}
         color="text3"
+        aria-label={label}
       >
-        <Icon id="question" size="sm" />
+        <Icon id="question" size="sm" aria-hidden />
       </Box>
       <PopUp
         open={showTooltip}

packages/ui/src/Tooltip/Tooltip.tsx

@@ -195,6 +195,7 @@ export const theme = createThemeContract({
     warningDisabled: '',
     onWarning: '',
     onWarningDisabled: '',
+    warningStrong: '',
     negative: '',
     negativeHover: '',
     negativeActive: '',