import { ResizableBox } from 'react-resizable' import { transparentize } from 'polished' import styled, { css } from 'styled-components' export const Container = styled(ResizableBox).attrs({ resizeHandles: ['e'], axis: 'x' })` height: 100%; padding: 24px; border-right: 1px solid ${props => props.theme.backgrounds.lightest}; display: flex; flex-direction: column; ` export const Header = styled.header` display: flex; flex-direction: row; align-items: center; justify-content: space-between; ` export const HeaderTextContainer = styled.section` display: flex; flex-direction: row; align-items: flex-end; margin-right: 16px; ` export const HeaderTitle = styled.p` font-weight: 500; font-size: 24px; line-height: 24px; ` export const HeaderDatabaseDetails = styled.p` font-weight: normal; font-size: 12px; line-height: 14px; color: #9696a7; margin-left: 8px; span + span { margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.1); } ` export const KeyListWrapper = styled.div` height: calc(100vh - 140px); overflow: auto; margin-top: 18px; ` export const KeyListContainer = styled.section` position: relative; ` export const Key = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 0; & + div { border-top: 1px solid rgba(225, 225, 230, 0.1); } button { background: transparent; border: 0; cursor: pointer; svg { color: ${props => props.theme.colors.grey}; width: 14px; height: 14px; } &:hover svg { color: ${props => props.theme.colors.white}; } } ` interface KeyTextContainerProps { selected: boolean } export const KeyTextContainer = styled.button<KeyTextContainerProps>` display: flex; flex-direction: row; align-items: center; color: ${props => props.theme.colors.white}; ${props => !props.selected && css` &:hover { color: ${props => transparentize(0.2, props.theme.colors.pink)}; } `} ${props => props.selected && css` color: ${props.theme.colors.pink}; `} ` export const KeyTitle = styled.p` font-weight: 500; font-size: 14px; line-height: 16px; ` export const KeyChidrenCount = styled.p` font-weight: normal; font-size: 11px; line-height: 13px; color: #9696a7; margin-left: 4px; `