lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

review fixes

Browse Source
This commit is contained in:
tom
2022-08-15 16:36:50 +03:00
parent a4a89a01d3
commit 75a56dbecf
10 changed files with 62 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
icons/networks/arbitrum.svg
+1 -6
View File
@@ -1,8 +1,3 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="5" x="7" y="7" fill="#48A9A6"/>
<rect width="10" height="5" x="22" y="7" fill="#48A9A6"/>
<rect width="10" height="5" x="7" y="27" fill="#48A9A6"/>
<rect width="10" height="5" x="22" y="27" fill="#48A9A6"/>
<rect width="5" height="10" x="7" y="22" fill="#48A9A6"/>
<rect width="5" height="10" x="27" y="22" fill="#48A9A6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7H7v6h10V7Zm16 0H23v6h10V7Zm0 14.5h-6v5h-4v6h10v-11Zm-20 0H7v11h10v-6h-4v-5Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 443 B

After

Width:  |  Height:  |  Size: 237 B

icons/networks/ethereum-classic.svg
+4 -4
View File
@@ -1,6 +1,6 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 21.338c3.264 1.733 6.669 3.547 9.299 4.95l9.223-4.95c-3.34 4.96-6.122 9.091-9.223 13.662-3.107-4.56-6.537-9.593-9.299-13.662Zm.355-1.369 8.954-4.778 8.838 4.743-8.833 4.784-8.96-4.749Zm8.944-6.309L11 18.556 20.258 5l9.264 13.586-9.223-4.926Z" fill="#3AB83A"/>
<path d="m20.299 26.289 9.223-4.951C26.182 26.298 20.299 35 20.299 35v-8.711Zm.01-11.098 8.838 4.743-8.833 4.784-.005-9.527Zm-.01-1.53L20.259 5l9.263 13.586-9.223-4.925Z" fill="#0B8311"/>
<path d="m11.355 19.97 8.955.734 8.838-.765-8.834 4.784-8.959-4.754Z" fill="#0B8311"/>
<path d="m20.31 20.704 8.838-.765-8.833 4.784-.005-4.019Z" fill="#146714"/>
<path d="M11 21.338c3.264 1.733 6.669 3.547 9.299 4.95l9.223-4.95c-3.34 4.96-6.122 9.091-9.223 13.662-3.107-4.56-6.537-9.593-9.299-13.662Zm.355-1.369 8.954-4.778 8.838 4.743-8.833 4.784-8.96-4.749Zm8.944-6.309L11 18.556 20.258 5l9.264 13.586-9.223-4.926Z" fill="currentColor" fill-opacity=".48"/>
<path d="m20.299 26.289 9.223-4.951C26.182 26.298 20.299 35 20.299 35v-8.711Zm.01-11.098 8.838 4.743-8.833 4.784-.005-9.527Zm-.01-1.53L20.259 5l9.263 13.586-9.223-4.925Z" fill="currentColor" fill-opacity=".48"/>
<path d="m11.355 19.97 8.955.734 8.838-.765-8.834 4.784-8.959-4.754Z" fill="currentColor" fill-opacity=".48"/>
<path d="m20.31 20.704 8.838-.765-8.833 4.784-.005-4.019Z" fill="currentColor" fill-opacity=".48"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 714 B

After

Width:  |  Height:  |  Size: 810 B

icons/networks/ethereum.svg
+6 -9
View File
@@ -1,15 +1,12 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="m20.471 5-.207.683v19.833l.207.2 9.47-5.441L20.472 5Z" fill="#343434"/>
<path d="M20.47 5 11 20.275l9.47 5.442V5Z" fill="#8C8C8C"/>
<path d="m20.47 27.46-.116.138v7.064l.117.331 9.476-12.972-9.476 5.438Z" fill="#3C3C3B"/>
<path d="M20.47 34.993V27.46L11 22.02l9.47 12.973Z" fill="#8C8C8C"/>
<path d="m20.47 25.716 9.471-5.441-9.47-4.184v9.625Z" fill="#141414"/>
<path d="m11 20.275 9.47 5.441V16.09L11 20.275Z" fill="#393939"/>
<g clip-path="url(#ethereum-a)" fill="currentColor" fill-opacity=".48">
<path d="m20.471 5-.207.683v19.833l.207.2 9.47-5.441L20.472 5Z"/>
<path d="M20.47 5 11 20.275l9.47 5.442V5ZM20.47 27.46l-.116.138v7.064l.117.331 9.476-12.972-9.476 5.438Z"/>
<path d="M20.47 34.993V27.46L11 22.02l9.47 12.973ZM20.47 25.716l9.471-5.441-9.47-4.184v9.625ZM11 20.275l9.47 5.441V16.09L11 20.275Z"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" transform="translate(11 5)" d="M0 0h18.947v30H0z"/>
<clipPath id="ethereum-a">
<path transform="translate(11 5)" d="M0 0h18.947v30H0z"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 709 B

After

Width:  |  Height:  |  Size: 614 B

icons/networks/poa.svg → icons/networks/placeholder.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 579 B

After

Width:  |  Height:  |  Size: 579 B

icons/networks/rsk.svg
+3 -9
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

ui/navigation/networkMenu/NetworkMenu.tsx
+2 -1
View File
@@ -12,7 +12,7 @@ interface Props {
const NetworkMenu = ({ isCollapsed }: Props) => {
return (
<Popover trigger="hover" openDelay={ 0 } placement="right-start" gutter={ 22 }>
<Popover openDelay={ 0 } placement="right-start" gutter={ 22 }>
<PopoverTrigger>
<Box display="inline-flex" alignSelf="stretch" alignItems="center">
<Icon
@@ -20,6 +20,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
width="16px"
height="16px"
color={ useColorModeValue('gray.500', 'white') }
_hover={{ color: 'blue.400' }}
marginLeft={ isCollapsed ? '0px' : '27px' }
cursor="pointer"
{ ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
ui/navigation/networkMenu/NetworkMenuLink.tsx
+13 -6
View File
@@ -5,16 +5,18 @@ import React from 'react';
import type { NetworkLink } from './types';
import checkIcon from 'icons/check.svg';
import placeholderIcon from 'icons/networks/placeholder.svg';
import useColors from '../useColors';
import useColors from './useColors';
interface Props extends NetworkLink {
isActive: boolean;
}
const NetworkMenuLink = ({ name, pathname, icon, iconColor, isActive, isNewUi }: Props) => {
const colors = useColors();
const NetworkMenuLink = ({ name, pathname, icon, isActive, isNewUi }: Props) => {
const href = isNewUi ? pathname : 'https://blockscout.com' + pathname;
const hasIcon = Boolean(icon);
const colors = useColors({ hasIcon });
return (
<Box as="li" listStyleType="none">
@@ -30,12 +32,17 @@ const NetworkMenuLink = ({ name, pathname, icon, iconColor, isActive, isNewUi }:
borderRadius="base"
color={ isActive ? colors.text.active : colors.text.default }
bgColor={ isActive ? colors.bg.active : colors.bg.default }
_hover={{ color: isActive ? colors.text.active : colors.text.hover }}
_hover={{
color: isActive ? colors.text.active : colors.text.hover,
svg: {
color: isActive ? colors.icon.active : colors.icon.hover,
},
}}
>
<Icon
as={ icon }
as={ hasIcon ? icon : placeholderIcon }
boxSize="40px"
color={ iconColor || 'inherit' }
color={ isActive ? colors.icon.active : colors.icon.default }
/>
<Text
marginLeft={ 3 }
ui/navigation/networkMenu/NetworkMenuPopup.tsx
+5 -9
View File
@@ -1,4 +1,4 @@
import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, useColorModeValue } from '@chakra-ui/react';
import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack } from '@chakra-ui/react';
import React from 'react';
import type { NetworkLink } from './types';
@@ -9,7 +9,6 @@ import ethereumClassicIcon from 'icons/networks/ethereum-classic.svg';
import ethereumIcon from 'icons/networks/ethereum.svg';
import gnosisIcon from 'icons/networks/gnosis.svg';
import poaSokolIcon from 'icons/networks/poa-sokol.svg';
import poaIcon from 'icons/networks/poa.svg';
import rskIcon from 'icons/networks/rsk.svg';
import useBasePath from 'lib/hooks/useBasePath';
@@ -20,19 +19,16 @@ type PopupTab = 'mainnets' | 'testnets' | 'other';
const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
const NetworkMenuPopup = () => {
const gnosisChainIconColor = useColorModeValue('black', 'white');
const poaChainIconColor = useColorModeValue('gray.100', 'gray.100');
const basePath = useBasePath();
const LINKS: Record<PopupTab, Array<NetworkLink>> = {
mainnets: [
{ name: 'Gnosis Chain', pathname: '/xdai/mainnet', icon: gnosisIcon, iconColor: gnosisChainIconColor, isNewUi: true },
{ name: 'Optimism on Gnosis Chain', pathname: '/xdai/optimism', icon: gnosisIcon, iconColor: gnosisChainIconColor },
{ name: 'Gnosis Chain', pathname: '/xdai/mainnet', icon: gnosisIcon, isNewUi: true },
{ name: 'Optimism on Gnosis Chain', pathname: '/xdai/optimism', icon: gnosisIcon },
{ name: 'Arbitrum on xDai', pathname: '/xdai/aox', icon: arbitrumIcon },
{ name: 'Ethereum', pathname: '/eth/mainnet', icon: ethereumIcon },
{ name: 'Ethereum Classic', pathname: '/etc/mainnet', icon: ethereumClassicIcon },
{ name: 'POA', pathname: '/poa/core', icon: poaIcon, iconColor: poaChainIconColor },
{ name: 'POA', pathname: '/poa/core' },
{ name: 'RSK', pathname: '/rsk/mainnet', icon: rskIcon },
],
testnets: [
@@ -41,7 +37,7 @@ const NetworkMenuPopup = () => {
],
other: [
{ name: 'ARTIS Σ1', pathname: '/artis/sigma1', icon: artisIcon },
{ name: 'LUKSO L14', pathname: '/lukso/l14', icon: poaIcon, iconColor: poaChainIconColor },
{ name: 'LUKSO L14', pathname: '/lukso/l14' },
],
};
ui/navigation/networkMenu/types.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import type { FunctionComponent, SVGAttributes } from 'react';
export interface NetworkLink {
pathname: string;
name: string;
icon: FunctionComponent<SVGAttributes<SVGElement>>;
icon?: FunctionComponent<SVGAttributes<SVGElement>>;
iconColor?: string;
isNewUi?: boolean;
}
ui/navigation/networkMenu/useColors.ts
+27
View File
@@ -0,0 +1,27 @@
import { useColorModeValue } from '@chakra-ui/react';
export default function useColors({ hasIcon }: {hasIcon: boolean}) {
const iconDefaultColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
const iconPlaceholderDefaultColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
return {
text: {
'default': useColorModeValue('gray.700', 'gray.400'),
active: useColorModeValue('gray.700', 'gray.50'),
hover: 'blue.400',
},
icon: {
'default': hasIcon ? iconDefaultColor : iconPlaceholderDefaultColor,
active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
hover: 'blue.400',
},
bg: {
'default': 'transparent',
active: useColorModeValue('blue.50', 'gray.800'),
},
border: {
'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
active: useColorModeValue('blue.50', 'gray.800'),
},
};
}