aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui/container.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-02 08:52:15 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-02 08:52:15 +0800
commitab245fe7dec88c509452dab75fff523c4c4a9461 (patch)
treefc01a1ee6b3f0bf7851a97dbe0a79c11e1fc53de /packages/instant/src/components/ui/container.tsx
parent7de33c5dd9842ef0e83eac64c6e42c69608e4ad0 (diff)
downloaddexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar.gz
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar.bz2
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar.lz
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar.xz
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.tar.zst
dexon-sol-tools-ab245fe7dec88c509452dab75fff523c4c4a9461.zip
feat: implement basic token selection UI
Diffstat (limited to 'packages/instant/src/components/ui/container.tsx')
-rw-r--r--packages/instant/src/components/ui/container.tsx9
1 files changed, 9 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 7b8642761..e228a01b6 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,3 +1,5 @@
+import { darken } from 'polished';
+
import { ColorOption, styled } from '../../style/theme';
import { cssRuleIfExists } from '../../style/util';
@@ -30,6 +32,7 @@ export interface ContainerProps {
opacity?: number;
cursor?: string;
overflow?: string;
+ darkenOnHover?: boolean;
}
export const Container =
@@ -64,6 +67,12 @@ export const Container =
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+ &:hover {
+ ${props =>
+ props.darkenOnHover
+ ? `background-color: ${darken(0.05, props.theme[props.backgroundColor || 'white'])}`
+ : ''};
+ }
`;
Container.defaultProps = {