Merge pull request #945 from BuilderOSS/fix/dark-mode

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

Author: dan13ram

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'}