summaryrefslogtreecommitdiffhomepage
path: root/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
blob: ad7c092f9cfe7f728252ff55b35420181b87e314 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
import ImageView from './ImageView';

const Container = styled.div({
  display: 'flex',
  alignItems: 'center',
});

const Caption = styled.span((props: { open: boolean }) => ({
  fontFamily: 'Open Sans',
  fontSize: '15px',
  fontWeight: 600,
  lineHeight: '20px',
  color: props.open ? colors.white : colors.white40,
  [Container + ':hover &']: {
    color: colors.white,
  },
}));

const Chevron = styled(ImageView)({
  [Container + ':hover &']: {
    backgroundColor: colors.white,
  },
});

interface IProps {
  pointsUp: boolean;
  onToggle?: () => void;
  children: React.ReactText;
  className?: string;
}

export default function ConnectionPanelDisclosure(props: IProps) {
  return (
    <Container className={props.className} onClick={props.onToggle}>
      <Caption open={props.pointsUp}>{props.children}</Caption>
      <Chevron
        source={props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
        width={24}
        height={24}
        tintColor={colors.white40}
      />
    </Container>
  );
}