diff options
Diffstat (limited to 'gui/src')
23 files changed, 251 insertions, 247 deletions
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx index a34b5b499c..239b5206cd 100644 --- a/gui/src/renderer/components/AdvancedSettings.tsx +++ b/gui/src/renderer/components/AdvancedSettings.tsx @@ -16,7 +16,7 @@ import { } from './AdvancedSettingsStyles'; import * as AppButton from './AppButton'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { Layout } from './Layout'; import { ModalAlert, ModalAlertType, ModalContainer, ModalMessage } from './Modal'; import { @@ -26,7 +26,7 @@ import { NavigationItems, TitleBarItem, } from './NavigationBar'; -import Selector, { ISelectorItem } from './Selector'; +import Selector, { ISelectorItem } from './cell/Selector'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; const MIN_MSSFIX_VALUE = 1000; diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx index f9bd6db82b..0bccc7c158 100644 --- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx +++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { Container } from './Layout'; import { NavigationScrollbars } from './NavigationBar'; -import Selector from './Selector'; +import Selector from './cell/Selector'; export const StyledContainer = styled(Container)({ backgroundColor: colors.darkBlue, diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx deleted file mode 100644 index 2bbfd5b928..0000000000 --- a/gui/src/renderer/components/CellStyles.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { colors } from '../../config.json'; -import { buttonText, mediumText, smallText } from './common-styles'; -import ImageView, { IImageViewProps } from './ImageView'; - -export const StyledContainer = styled.div({ - display: 'flex', - backgroundColor: colors.blue, - alignItems: 'center', - paddingLeft: '22px', - paddingRight: '16px', -}); - -export const StyledSection = styled.div({ - display: 'flex', - flexDirection: 'column', -}); - -export const StyledSectionTitle = styled.span(buttonText, { - backgroundColor: colors.blue, - padding: '14px 16px 14px 22px', - marginBottom: '1px', -}); - -interface IStyledCellButtonProps { - selected?: boolean; - containedInSection: boolean; -} - -export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({ - display: 'flex', - padding: '0 16px 0 22px', - marginBottom: '1px', - flex: 1, - alignItems: 'center', - alignContent: 'center', - cursor: 'default', - border: 'none', - backgroundColor: props.selected - ? colors.green - : props.containedInSection - ? colors.blue40 - : colors.blue, - ':not(:disabled):hover': { - backgroundColor: props.selected ? colors.green : colors.blue80, - }, -})); - -export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({ - margin: '14px 0', - flex: 1, - color: props.disabled ? colors.white40 : colors.white, - textAlign: 'left', -})); - -export const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({ - color: props.disabled ? colors.white20 : colors.white60, - fontWeight: 800, - flex: -1, - textAlign: 'right', - marginLeft: '8px', - marginRight: '8px', -})); - -export const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({ - tintColor: props.tintColor ?? colors.white60, - tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60, -}))((props: IImageViewProps) => ({ - [StyledCellButton + ':hover &']: { - backgroundColor: props.tintHoverColor, - }, -})); - -export const StyledFooter = styled.div({ - padding: '6px 22px 20px', -}); - -export const StyledFooterText = styled.span(smallText); - -export const StyledFooterBoldText = styled(StyledFooterText)({ - fontWeight: 900, -}); - -export const StyledInputFrame = styled.div({ - flexGrow: 0, - backgroundColor: 'rgba(255,255,255,0.1)', - borderRadius: '4px', - padding: '4px 8px', -}); - -const inputTextStyles: React.CSSProperties = { - ...mediumText, - fontWeight: 600, - height: '28px', - textAlign: 'right', - padding: '0px', -}; - -export const StyledInput = styled.input({}, (props: { valid?: boolean }) => ({ - ...inputTextStyles, - backgroundColor: 'transparent', - border: 'none', - width: '100%', - height: '100%', - color: props.valid !== false ? colors.white : colors.red, - '::placeholder': { - color: colors.white60, - }, -})); - -export const StyledAutoSizingTextInputContainer = styled.div({ - position: 'relative', -}); - -export const StyledAutoSizingTextInputFiller = styled.pre({ - ...inputTextStyles, - minWidth: '80px', - color: 'transparent', -}); - -export const StyledAutoSizingTextInputWrapper = styled.div({ - position: 'absolute', - top: '0px', - left: '0px', - width: '100%', - height: '100%', -}); - -export const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({ - opacity: props.disabled ? 0.4 : 1, -})); diff --git a/gui/src/renderer/components/ChevronButton.tsx b/gui/src/renderer/components/ChevronButton.tsx index 63452b521e..1e62ebbc08 100644 --- a/gui/src/renderer/components/ChevronButton.tsx +++ b/gui/src/renderer/components/ChevronButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { colors } from '../../config.json'; -import * as Cell from './Cell'; +import * as Cell from './cell'; interface IProps extends React.HTMLAttributes<HTMLButtonElement> { up: boolean; diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx index f60ed38dca..ded22a2eb8 100644 --- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx +++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx @@ -7,7 +7,7 @@ import { messages } from '../../shared/gettext'; import { LoginState } from '../redux/account/reducers'; import * as AppButton from './AppButton'; import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { StyledAccountTokenContainer, StyledAccountTokenLabel, diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx index f85bd66aa4..3559d3b8ad 100644 --- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx +++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; import AccountTokenLabel from './AccountTokenLabel'; import * as AppButton from './AppButton'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { bigText, smallText } from './common-styles'; import CustomScrollbars from './CustomScrollbars'; diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx index 5fe43e85e0..9426601532 100644 --- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx +++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx @@ -9,7 +9,7 @@ import ISplitTunnelingApplication from '../../shared/linux-split-tunneling-appli import consumePromise from '../../shared/promise'; import { useAppContext } from '../context'; import * as AppButton from './AppButton'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import ImageView from './ImageView'; import { Container, Layout } from './Layout'; import { ModalContainer, ModalAlert, ModalAlertType } from './Modal'; diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx index 2f8d44048e..c47312f158 100644 --- a/gui/src/renderer/components/LocationList.tsx +++ b/gui/src/renderer/components/LocationList.tsx @@ -8,7 +8,7 @@ import { relayLocationComponents, } from '../../shared/daemon-rpc-types'; import { IRelayLocationRedux } from '../redux/settings/reducers'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import LocationRow from './LocationRow'; export enum LocationSelectionType { diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx index 48f5982af2..0ffc4299cc 100644 --- a/gui/src/renderer/components/LocationRow.tsx +++ b/gui/src/renderer/components/LocationRow.tsx @@ -5,7 +5,7 @@ import { colors } from '../../config.json'; import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types'; import { messages } from '../../shared/gettext'; import Accordion from './Accordion'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import ChevronButton from './ChevronButton'; import RelayStatusIndicator from './RelayStatusIndicator'; diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx index aaa7fd2874..c8469ba672 100644 --- a/gui/src/renderer/components/LoginStyles.tsx +++ b/gui/src/renderer/components/LoginStyles.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; import ImageView from './ImageView'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { bigText, smallText } from './common-styles'; export const StyledAccountDropdownContainer = styled.ul({ diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx index f3c35f90d0..a064edcf83 100644 --- a/gui/src/renderer/components/Preferences.tsx +++ b/gui/src/renderer/components/Preferences.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { messages } from '../../shared/gettext'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { Layout } from './Layout'; import { BackBarItem, diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx index ef4567059a..050cf6f514 100644 --- a/gui/src/renderer/components/RelayStatusIndicator.tsx +++ b/gui/src/renderer/components/RelayStatusIndicator.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { colors } from '../../config.json'; -import * as Cell from './Cell'; +import * as Cell from './cell'; const StyledRelayStatus = styled.div((props: { active: boolean }) => ({ width: '16px', diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx index d21e6f0918..7c67927182 100644 --- a/gui/src/renderer/components/SelectLanguage.tsx +++ b/gui/src/renderer/components/SelectLanguage.tsx @@ -13,7 +13,7 @@ import { NavigationScrollbars, TitleBarItem, } from './NavigationBar'; -import Selector, { ISelectorItem } from './Selector'; +import Selector, { ISelectorItem } from './cell/Selector'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; interface IProps { diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx index 3cfdefebd5..9c4c36a0a6 100644 --- a/gui/src/renderer/components/Settings.tsx +++ b/gui/src/renderer/components/Settings.tsx @@ -3,7 +3,7 @@ import { colors, links } from '../../config.json'; import { hasExpired, formatRemainingTime } from '../../shared/account-expiry'; import { messages } from '../../shared/gettext'; import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { Layout } from './Layout'; import { CloseBarItem, diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx index d396faaecc..80738638b4 100644 --- a/gui/src/renderer/components/SettingsStyles.tsx +++ b/gui/src/renderer/components/SettingsStyles.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; import * as AppButton from './AppButton'; -import * as Cell from './Cell'; +import * as Cell from './cell'; import { Container } from './Layout'; import { NavigationScrollbars } from './NavigationBar'; diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx new file mode 100644 index 0000000000..a55ffc1153 --- /dev/null +++ b/gui/src/renderer/components/cell/CellButton.tsx @@ -0,0 +1,44 @@ +import React, { useContext } from 'react'; +import styled from 'styled-components'; +import { colors } from '../../../config.json'; +import { CellDisabledContext } from './Container'; +import { CellSectionContext } from './Section'; + +interface IStyledCellButtonProps { + selected?: boolean; + containedInSection: boolean; +} + +const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({ + display: 'flex', + padding: '0 16px 0 22px', + marginBottom: '1px', + flex: 1, + alignItems: 'center', + alignContent: 'center', + cursor: 'default', + border: 'none', + backgroundColor: props.selected + ? colors.green + : props.containedInSection + ? colors.blue40 + : colors.blue, + ':not(:disabled):hover': { + backgroundColor: props.selected ? colors.green : colors.blue80, + }, +})); + +interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { + selected?: boolean; +} + +export const CellButton = styled( + React.forwardRef(function Button(props: ICellButtonProps, ref: React.Ref<HTMLButtonElement>) { + const containedInSection = useContext(CellSectionContext); + return ( + <CellDisabledContext.Provider value={props.disabled ?? false}> + <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} /> + </CellDisabledContext.Provider> + ); + }), +)({}); diff --git a/gui/src/renderer/components/cell/Container.tsx b/gui/src/renderer/components/cell/Container.tsx new file mode 100644 index 0000000000..843180af76 --- /dev/null +++ b/gui/src/renderer/components/cell/Container.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import styled from 'styled-components'; +import { colors } from '../../../config.json'; + +const StyledContainer = styled.div({ + display: 'flex', + backgroundColor: colors.blue, + alignItems: 'center', + paddingLeft: '22px', + paddingRight: '16px', +}); + +export const CellDisabledContext = React.createContext<boolean>(false); + +interface IContainerProps extends React.HTMLAttributes<HTMLDivElement> { + disabled?: boolean; +} + +export const Container = React.forwardRef(function ContainerT( + props: IContainerProps, + ref: React.Ref<HTMLDivElement>, +) { + const { disabled, ...otherProps } = props; + return ( + <CellDisabledContext.Provider value={disabled ?? false}> + <StyledContainer ref={ref} {...otherProps} /> + </CellDisabledContext.Provider> + ); +}); diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx new file mode 100644 index 0000000000..2f0dacd10f --- /dev/null +++ b/gui/src/renderer/components/cell/Footer.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { smallText } from '../common-styles'; + +export const Footer = styled.div({ + padding: '6px 22px 20px', +}); + +export const FooterText = styled.span(smallText); + +export const FooterBoldText = styled(FooterText)({ + fontWeight: 900, +}); diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/cell/Input.tsx index 7c021b060d..4a11791136 100644 --- a/gui/src/renderer/components/Cell.tsx +++ b/gui/src/renderer/components/cell/Input.tsx @@ -1,109 +1,59 @@ import React, { useCallback, useContext, useState } from 'react'; -import { - StyledAutoSizingTextInputContainer, - StyledAutoSizingTextInputWrapper, - StyledAutoSizingTextInputFiller, - StyledCellButton, - StyledContainer, - StyledIconContainer, - StyledInput, - StyledLabel, - StyledSection, - StyledSubText, - StyledTintedIcon, -} from './CellStyles'; -import ImageView, { IImageViewProps } from './ImageView'; -import StandaloneSwitch from './Switch'; +import styled from 'styled-components'; +import { colors } from '../../../config.json'; +import { mediumText } from '../common-styles'; +import { CellDisabledContext } from './Container'; +import StandaloneSwitch from '../Switch'; -export { - StyledFooter as Footer, - StyledFooterBoldText as FooterBoldText, - StyledFooterText as FooterText, - StyledInputFrame as InputFrame, - StyledSectionTitle as SectionTitle, -} from './CellStyles'; - -const CellSectionContext = React.createContext<boolean>(false); -const CellDisabledContext = React.createContext<boolean>(false); - -interface IContainerProps extends React.HTMLAttributes<HTMLDivElement> { - disabled?: boolean; -} - -export const Container = React.forwardRef(function ContainerT( - props: IContainerProps, - ref: React.Ref<HTMLDivElement>, -) { - const { disabled, ...otherProps } = props; - return ( - <CellDisabledContext.Provider value={disabled ?? false}> - <StyledContainer ref={ref} {...otherProps} /> - </CellDisabledContext.Provider> - ); -}); - -interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { - selected?: boolean; +export function Switch(props: StandaloneSwitch['props']) { + const disabled = useContext(CellDisabledContext); + return <StandaloneSwitch disabled={disabled} {...props} />; } -export const CellButton = React.forwardRef(function Button( - props: ICellButtonProps, - ref: React.Ref<HTMLButtonElement>, -) { - const containedInSection = useContext(CellSectionContext); - return ( - <CellDisabledContext.Provider value={props.disabled ?? false}> - <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} /> - </CellDisabledContext.Provider> - ); +export const InputFrame = styled.div({ + flexGrow: 0, + backgroundColor: 'rgba(255,255,255,0.1)', + borderRadius: '4px', + padding: '4px 8px', }); -export function Section(props: React.HTMLAttributes<HTMLDivElement>) { - const { children, ...otherProps } = props; - return ( - <StyledSection {...otherProps}> - <CellSectionContext.Provider value={true}>{children}</CellSectionContext.Provider> - </StyledSection> - ); -} +const inputTextStyles: React.CSSProperties = { + ...mediumText, + fontWeight: 600, + height: '28px', + textAlign: 'right', + padding: '0px', +}; -export function Label(props: React.HTMLAttributes<HTMLDivElement>) { - const disabled = useContext(CellDisabledContext); - return <StyledLabel disabled={disabled} {...props} />; -} +const StyledInput = styled.input({}, (props: { valid?: boolean }) => ({ + ...inputTextStyles, + backgroundColor: 'transparent', + border: 'none', + width: '100%', + height: '100%', + color: props.valid !== false ? colors.white : colors.red, + '::placeholder': { + color: colors.white60, + }, +})); -export function InputLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) { - const disabled = useContext(CellDisabledContext); - return <StyledLabel as="label" disabled={disabled} {...props} />; -} - -export function SubText(props: React.HTMLAttributes<HTMLDivElement>) { - const disabled = useContext(CellDisabledContext); - return <StyledSubText disabled={disabled} {...props} />; -} - -export function UntintedIcon(props: IImageViewProps) { - const disabled = useContext(CellDisabledContext); - return ( - <StyledIconContainer disabled={disabled}> - <ImageView {...props} /> - </StyledIconContainer> - ); -} +const StyledAutoSizingTextInputContainer = styled.div({ + position: 'relative', +}); -export function Icon(props: IImageViewProps) { - const disabled = useContext(CellDisabledContext); - return ( - <StyledIconContainer disabled={disabled}> - <StyledTintedIcon {...props} /> - </StyledIconContainer> - ); -} +const StyledAutoSizingTextInputFiller = styled.pre({ + ...inputTextStyles, + minWidth: '80px', + color: 'transparent', +}); -export function Switch(props: StandaloneSwitch['props']) { - const disabled = useContext(CellDisabledContext); - return <StandaloneSwitch disabled={disabled} {...props} />; -} +const StyledAutoSizingTextInputWrapper = styled.div({ + position: 'absolute', + top: '0px', + left: '0px', + width: '100%', + height: '100%', +}); interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> { value?: string; diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx new file mode 100644 index 0000000000..12a312049b --- /dev/null +++ b/gui/src/renderer/components/cell/Label.tsx @@ -0,0 +1,69 @@ +import React, { useContext } from 'react'; +import styled from 'styled-components'; +import { colors } from '../../../config.json'; +import { buttonText, smallText } from '../common-styles'; +import ImageView, { IImageViewProps } from '../ImageView'; +import { CellButton } from './CellButton'; +import { CellDisabledContext } from './Container'; + +const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({ + margin: '14px 0', + flex: 1, + color: props.disabled ? colors.white40 : colors.white, + textAlign: 'left', +})); + +const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({ + color: props.disabled ? colors.white20 : colors.white60, + fontWeight: 800, + flex: -1, + textAlign: 'right', + marginLeft: '8px', + marginRight: '8px', +})); + +const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({ + opacity: props.disabled ? 0.4 : 1, +})); + +const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({ + tintColor: props.tintColor ?? colors.white60, + tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60, +}))((props: IImageViewProps) => ({ + [CellButton + ':hover &']: { + backgroundColor: props.tintHoverColor, + }, +})); + +export function Label(props: React.HTMLAttributes<HTMLDivElement>) { + const disabled = useContext(CellDisabledContext); + return <StyledLabel disabled={disabled} {...props} />; +} + +export function InputLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) { + const disabled = useContext(CellDisabledContext); + return <StyledLabel as="label" disabled={disabled} {...props} />; +} + +export function SubText(props: React.HTMLAttributes<HTMLDivElement>) { + const disabled = useContext(CellDisabledContext); + return <StyledSubText disabled={disabled} {...props} />; +} + +export function UntintedIcon(props: IImageViewProps) { + const disabled = useContext(CellDisabledContext); + return ( + <StyledIconContainer disabled={disabled}> + <ImageView {...props} /> + </StyledIconContainer> + ); +} + +export function Icon(props: IImageViewProps) { + const disabled = useContext(CellDisabledContext); + return ( + <StyledIconContainer disabled={disabled}> + <StyledTintedIcon {...props} /> + </StyledIconContainer> + ); +} diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx new file mode 100644 index 0000000000..25bef54df5 --- /dev/null +++ b/gui/src/renderer/components/cell/Section.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import { colors } from '../../../config.json'; +import { buttonText } from '../common-styles'; + +const StyledSection = styled.div({ + display: 'flex', + flexDirection: 'column', +}); + +export const SectionTitle = styled.span(buttonText, { + backgroundColor: colors.blue, + padding: '14px 16px 14px 22px', + marginBottom: '1px', +}); + +export const CellSectionContext = React.createContext<boolean>(false); + +export function Section(props: React.HTMLAttributes<HTMLDivElement>) { + const { children, ...otherProps } = props; + return ( + <StyledSection {...otherProps}> + <CellSectionContext.Provider value={true}>{children}</CellSectionContext.Provider> + </StyledSection> + ); +} diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx index e7c1e8c0a1..cd308fa3e4 100644 --- a/gui/src/renderer/components/Selector.tsx +++ b/gui/src/renderer/components/cell/Selector.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../../config.json'; -import { AriaInput, AriaLabel } from './AriaGroup'; -import * as Cell from './Cell'; +import { colors } from '../../../config.json'; +import { AriaInput, AriaLabel } from '../AriaGroup'; +import * as Cell from '.'; export interface ISelectorItem<T> { label: string; diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts new file mode 100644 index 0000000000..a16cb93097 --- /dev/null +++ b/gui/src/renderer/components/cell/index.ts @@ -0,0 +1,6 @@ +export * from './CellButton'; +export * from './Container'; +export * from './Footer'; +export * from './Input'; +export * from './Label'; +export * from './Section'; |