diff --git a/packages/adena-extension/src/components/atoms/list-box/index.tsx b/packages/adena-extension/src/components/atoms/list-box/index.tsx index a07cdc24..9a8035c9 100644 --- a/packages/adena-extension/src/components/atoms/list-box/index.tsx +++ b/packages/adena-extension/src/components/atoms/list-box/index.tsx @@ -78,22 +78,19 @@ const Wrapper = styled.div` if (mode === ListHierarchy.Static) return modeVariants.static; return modeVariants.default; }} + flex-shrink: 0; width: 100%; height: 60px; padding: ${({ padding }): CSSProperties['padding'] => (padding ? padding : '0px 17px 0px 14px')}; transition: all 0.4s ease; - cursor: ${({ cursor }): CSSProperties['cursor'] => cursor ?? 'pointer'}; border-radius: 18px; + cursor: ${({ cursor }): CSSProperties['cursor'] => cursor ?? 'pointer'}; + .logo { margin-right: 12px; } + & + & { margin-top: 12px; } - /* & > :nth-child(2) { - margin-left: 12px; - } - & > :nth-child(3) { - margin-left: auto; - } */ `; diff --git a/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx b/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx index e7955937..dc2eab52 100644 --- a/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx +++ b/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx @@ -1,17 +1,17 @@ -import React, { useEffect, useState } from 'react'; -import styled, { useTheme } from 'styled-components'; +import { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; +import styled, { useTheme } from 'styled-components'; -import { Text, ListBox, ListHierarchy } from '@components/atoms'; -import { LoadingNft, CloseShadowButton } from '@components/molecules'; -import { getTheme } from '@styles/theme'; -import { WalletState } from '@states'; -import DefaultImage from '@assets/favicon-default-small.svg'; import disconnected from '@assets/disconnected.svg'; +import DefaultImage from '@assets/favicon-default-small.svg'; +import { ListBox, ListHierarchy, Text } from '@components/atoms'; +import { CloseShadowButton, LoadingNft } from '@components/molecules'; +import useAppNavigate from '@hooks/use-app-navigate'; import { useAdenaContext } from '@hooks/use-context'; import { useCurrentAccount } from '@hooks/use-current-account'; +import { WalletState } from '@states'; import mixins from '@styles/mixins'; -import useAppNavigate from '@hooks/use-app-navigate'; +import { getTheme } from '@styles/theme'; export const ConnectedApps = (): JSX.Element => { const theme = useTheme(); @@ -83,6 +83,9 @@ export const ConnectedApps = (): JSX.Element => { No connections )} + +
+ ) : ( @@ -120,6 +123,14 @@ const Wrapper = styled.main` text-overflow: ellipsis; white-space: nowrap; } + + .empty-box { + ${mixins.flex({ direction: 'row' })}; + flex-shrink: 0; + width: 100%; + height: 96px; + margin-top: 20px; + } `; const DisconnectedBtn = styled.button`