fix: make minor changes to fix dark mode + fixed bottom mobile action bar for dao create flow

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

@@ -273,6 +273,20 @@ export const chainPopUpButton = style({
   },
 })
 
+export const chainPopUpItem = style({
+  border: 0,
+  width: '100%',
+  textAlign: 'left',
+  font: 'inherit',
+  appearance: 'none',
+  selectors: {
+    '&:disabled': {
+      pointerEvents: 'auto',
+      cursor: 'not-allowed',
+    },
+  },
+})
+
 export const themeToggleButton = style([
   atoms({
     borderStyle: 'solid',
@@ -318,6 +332,7 @@ export const wrongNetworkButton = style({
     'border 0.1s ease-in-out, background 0.1s ease-in-out, transform 0.1s ease-out',
   borderWidth: 'normal',
   borderStyle: 'solid',
+  background: 'transparent',
   borderColor: vars.color.negative,
   color: vars.color.negative,
   selectors: {

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

@@ -10,6 +10,7 @@ import { useAccount, useSwitchChain } from 'wagmi'
 
 import {
   chainPopUpButton,
+  chainPopUpItem,
   navButton,
   navPopUpWrapper,
   wrongNetworkButton,
@@ -140,7 +141,7 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
             borderColor="border"
             borderStyle="solid"
             borderWidth="normal"
-            backgroundColor="background1"
+            backgroundColor="transparent"
             borderRadius="curved"
             cursor={'pointer'}
             align={'center'}
@@ -175,6 +176,8 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
         <Stack my="x4" mx="x2">
           {isWrongNetwork && selectedChain && (
             <Flex
+              as="button"
+              type="button"
               className={wrongNetworkButton}
               fontWeight={'label'}
               borderRadius="normal"
@@ -191,22 +194,19 @@ export const ChainMenu: React.FC<ChainMenuProps> = ({
           )}
           {PUBLIC_DEFAULT_CHAINS.map((chain, i, chains) => (
             <Flex
+              as="button"
+              type="button"
               key={chain.id}
-              className={chainPopUpButton}
+              className={[chainPopUpButton, chainPopUpItem]}
               borderRadius="normal"
               onClick={() => onChainChange(chain.id)}
-              cursor={
-                hasNetwork
-                  ? isSelectedChain(chain.id)
-                    ? undefined
-                    : 'not-allowed'
-                  : 'pointer'
-              }
               height={'x10'}
               px="x4"
               mb={i !== chains.length - 1 ? 'x2' : undefined}
               align={'center'}
               justify={'space-between'}
+              disabled={hasNetwork && !isSelectedChain(chain.id)}
+              aria-current={selectedChain.id === chain.id ? 'location' : undefined}
             >
               <Flex align={'center'}>
                 <Box h="x6" w="x6" mr="x2">

apps/web/src/modules/dashboard/Dashboard.tsx

@@ -315,7 +315,7 @@ export const Dashboard: React.FC = () => {
               ? `${totalProposals} active proposal${totalProposals !== 1 ? 's' : ''}`
               : 'No active proposals'
           }
-          description={<Stack gap="x1">{proposalList}</Stack>}
+          description={<Stack gap="x3">{proposalList}</Stack>}
           titleFontSize={18}
           mb={'x0'}
           showWarning={hasProposalsNeedingVote}

apps/web/src/modules/dashboard/SingleDaoSelector.css.ts

@@ -14,7 +14,7 @@ export const sectionTitle = style({
   fontSize: '14px',
   fontWeight: 600,
   marginBottom: space.x3,
-  color: color.text2,
+  color: color.text1,
 })
 
 export const daoItem = style([

apps/web/src/modules/explore/ExploreSortMenu.tsx

@@ -67,6 +67,8 @@ export const ExploreSortMenu: React.FC<ExploreSortMenuProps> = () => {
         onChange={handleSortChange}
         customLabel={defaultSort}
         positioning="absolute"
+        height="x10"
+        minWidth="120px"
       />
     </Flex>
   )

apps/web/src/modules/explore/ExploreToolbar.tsx

@@ -28,7 +28,7 @@ export const ExploreToolbar: React.FC<ExploreToolbarProps> = ({
       align={'center'}
       style={{ maxWidth: 912 }}
     >
-      <Flex direction={'row'} w={'100%'} justify={'space-between'}>
+      <Flex direction={'row'} w={'100%'} justify={'space-between'} align={'center'}>
         <Box fontSize={28} fontWeight={'heading'} mb={'x8'}>
           {title}
         </Box>

apps/web/src/modules/explore/SearchInput.css.ts

@@ -25,7 +25,7 @@ export const searchInputStyle = style({
       borderColor: vars.color.border,
     },
     '&:focus-visible': {
-      outline: `2px solid ${vars.color.accent}`,
+      outline: `2px solid ${vars.color.focusRing}`,
       outlineOffset: '2px',
     },
     '&::placeholder': {

apps/web/src/modules/playground/PlaygroundPage.tsx

@@ -49,7 +49,7 @@ export const PlaygroundPage: React.FC = () => {
   const isCustomView = view === 'custom'
 
   return (
-    <Box w="100%">
+    <Box w="100%" pb="x12">
       <PlaygroundHeader
         dao={selectedDao}
         view={view}

apps/web/src/modules/playground/components/PlaygroundLanding.css.ts

@@ -1,4 +1,4 @@
-import { atoms } from '@buildeross/zord'
+import { atoms, vars } from '@buildeross/zord'
 import { style } from '@vanilla-extract/css'
 
 export const landingContainer = style([
@@ -81,12 +81,12 @@ export const card = style([
     gap: '16px',
     minHeight: '240px',
     ':hover': {
-      outlineColor: 'var(--zord-colors-border-primary)',
+      outlineColor: vars.color.focusRing,
       transform: 'translateY(-4px)',
       boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
     },
     ':focus-visible': {
-      outlineColor: 'var(--zord-colors-border-primary)',
+      outlineColor: vars.color.focusRing,
       outlineOffset: '2px',
     },
   },

apps/web/src/pages/create.tsx

@@ -32,6 +32,7 @@ const CreatePage: NextPageWithLayout = () => {
   const { isGnosisSafe } = useIsGnosisSafe(address, chain.id)
 
   const { push } = useRouter()
+
   const handleSuccessfulDeploy = React.useCallback(
     async (token: string) => {
       await push({
@@ -86,7 +87,7 @@ const CreatePage: NextPageWithLayout = () => {
 
     const reviewAndDeploy: CreateFormSection = {
       title: 'Deploy',
-      subHeading: '[Confirm your contract settings before deploying your DAO]',
+      subHeading: 'Confirm your contract settings before deploying your DAO',
       form: (
         <ReviewAndDeploy
           key={'review-and-deploy'}

apps/web/src/styles/flatpickr-theme.css

@@ -85,3 +85,12 @@ span.flatpickr-weekday,
 .flatpickr-time .flatpickr-am-pm:focus {
   background: var(--flatpickr-hover);
 }
+
+.flatpickr-day:focus-visible,
+.flatpickr-time input:focus-visible,
+.flatpickr-time .flatpickr-am-pm:focus-visible,
+.flatpickr-months .flatpickr-prev-month:focus-visible,
+.flatpickr-months .flatpickr-next-month:focus-visible {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}

apps/web/src/styles/globals.css

@@ -44,6 +44,7 @@ body {
   --flatpickr-selected-bg: #000;
   --flatpickr-selected-text: #fff;
   --flatpickr-backdrop-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
+  --focus-ring-color: #0085ff; /* vars.color.focusRing holds the canonical tokenized value; update both in sync */
   --mde-border: #c8ccd0;
   --mde-header-bg: #f9f9f9;
   --mde-surface: #fff;
@@ -70,6 +71,7 @@ html[data-theme-mode='dark'] {
   --flatpickr-selected-bg: #fff;
   --flatpickr-selected-text: #1f2024;
   --flatpickr-backdrop-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
+  --focus-ring-color: #0085ff; /* vars.color.focusRing holds the canonical tokenized value; update both in sync */
   --mde-border: #3f4047;
   --mde-header-bg: #2a2b30;
   --mde-surface: #1f2024;

apps/web/src/styles/react-mde-theme.css

@@ -44,6 +44,16 @@
   outline: none;
 }
 
+.markdown-editor-wrapper .mde-textarea-wrapper:focus-within {
+  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
+}
+
+.markdown-editor-wrapper .mde-tabs button:focus-visible,
+.markdown-editor-wrapper ul.mde-header-group li.mde-header-item button:focus-visible {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}
+
 .markdown-editor-wrapper .mde-preview .mde-preview-content {
   background: var(--mde-surface);
   color: var(--mde-text);

packages/auction-ui/src/components/AllBids/AllBids.tsx

@@ -38,7 +38,11 @@ export const AllBids: React.FC<AuctionAllBidsProps> = ({ bids, onClose }) => {
             style={{ maxHeight: 'min(70vh, 640px)' }}
           >
             {bids.map((bid: AuctionBidFragment) => (
-              <BidCard key={`${bid.bidder}_${bid.amount}_expanded`} bid={bid} />
+              <BidCard
+                key={`${bid.bidder}_${bid.amount}_expanded`}
+                bid={bid}
+                walletPreview={false}
+              />
             ))}
           </Flex>
         </>

packages/auction-ui/src/components/AllBids/BidCard.tsx

@@ -1,26 +1,41 @@
 import { useEnsData } from '@buildeross/hooks/useEnsData'
 import { AuctionBidFragment } from '@buildeross/sdk/subgraph'
-import { WalletIdentityWithPreview } from '@buildeross/ui'
+import { WalletIdentity, WalletIdentityWithPreview } from '@buildeross/ui'
 import { walletSnippet } from '@buildeross/utils/helpers'
 import { formatCryptoVal } from '@buildeross/utils/numbers'
 import { Box, Flex, Icon, Text, vars } from '@buildeross/zord'
-import React from 'react'
 
-export const BidCard = ({ bid }: { bid: AuctionBidFragment }) => {
+export const BidCard = ({
+  bid,
+  walletPreview = true,
+}: {
+  bid: AuctionBidFragment
+  walletPreview?: boolean
+}) => {
   const { displayName, ensAvatar } = useEnsData(bid?.bidder)
   const resolvedDisplayName = displayName || walletSnippet(bid.bidder as `0x${string}`)
   const comment = bid.comment?.trim()
 
   return (
     <Flex direction={'column'} my="x4" align="center">
       <Flex direction="row" width={'100%'} align="center" justify="space-between">
-        <WalletIdentityWithPreview
-          address={bid.bidder as `0x${string}`}
-          displayName={resolvedDisplayName}
-          avatarSrc={ensAvatar}
-          avatarSize="28"
-          mobileTapBehavior="toggle"
-        />
+        {walletPreview ? (
+          <WalletIdentityWithPreview
+            address={bid.bidder as `0x${string}`}
+            displayName={resolvedDisplayName}
+            avatarSrc={ensAvatar}
+            avatarSize="28"
+            mobileTapBehavior="toggle"
+          />
+        ) : (
+          <WalletIdentity
+            address={bid.bidder as `0x${string}`}
+            displayName={resolvedDisplayName}
+            avatarSrc={ensAvatar}
+            avatarSize="28"
+            asLink
+          />
+        )}
         <Flex direction="row" align="center">
           <Flex
             as="a"

packages/auction-ui/src/components/Auction.css.ts

@@ -200,6 +200,9 @@ export const bidInput = style([
       '&::placeholder': {
         color: theme.colors.tertiary,
       },
+      '&:focus': {
+        outline: `2px solid ${vars.color.focusRing}`,
+      },
     },
   },
   atoms({
@@ -226,6 +229,7 @@ export const bidCommentInput = style([
       '&:focus': {
         borderColor: vars.color.accent,
         backgroundColor: vars.color.background1,
+        outline: `2px solid ${vars.color.focusRing}`,
       },
     },
   },

packages/create-dao-ui/src/components/AuctionSettingsForm/AuctionSettingsForm.tsx

@@ -205,12 +205,16 @@ export const AuctionSettingsForm: React.FC<AuctionSettingsFormProps> = ({ title
               <Flex mt={'x4'} mb={'x4'}>
                 <Flex align={'center'} justify={'center'} gap={'x4'}>
                   <Flex
+                    as={'button'}
+                    type="button"
                     align={'center'}
                     justify={'center'}
                     className={
                       deployCheckboxStyleVariants[enableFastDAO ? 'confirmed' : 'default']
                     }
                     onClick={() => handleFastDAOToggle(formik)}
+                    aria-pressed={enableFastDAO}
+                    aria-label="Enable Fast DAO"
                   >
                     {enableFastDAO && <Icon fill="background1" id="check" />}
                   </Flex>