neptune/ghost-keychain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

JSON input styling via theme (#352)

Browse Source
This commit is contained in:
Jaco Greeff 2020-06-01 12:00:53 +02:00 committed by GitHub
parent 1c6c71329f
commit 56cc6b301a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/extension-ui/src/components/InputFileWithLabel.tsx
View File

@ -2,6 +2,8 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { ThemeProps } from '../types';
import React, { useCallback, useState, createRef } from 'react';
import Dropzone, { DropzoneRef } from 'react-dropzone';
import styled from 'styled-components';
@ -15,7 +17,7 @@ function classes (...classNames: (boolean | null | string | undefined)[]): strin
.join(' ');
}
export interface InputFileProps {
export interface InputFileProps extends ThemeProps {
// Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
// i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
className?: string;
@ -121,21 +123,17 @@ function InputFile ({ accept, className = '', clearContent, convertHex, isDisabl
: dropZone;
}
export default React.memo(styled(InputFile)`
border: 1px solid rgb(67, 68, 75);
background: rgb(17, 18, 24);
border-radius: 0.28571429rem;
export default React.memo(styled(InputFile)(({ isError, theme }: InputFileProps) => `
border: 1px solid ${isError ? theme.errorBorderColor : theme.inputBorderColor};
background: ${theme.inputBackground};
border-radius: ${theme.borderRadius};
color: ${isError ? theme.errorBorderColor : theme.textColor};
font-size: 1rem;
margin: 0.25rem 0;
color: rgb(255, 255, 255);
padding: 0.5rem 0.75rem;
overflow-wrap: anywhere;
&.error {
border-color: rgb(126, 53, 48);
}
padding: 0.5rem 0.75rem;
&:hover {
cursor: pointer;
}
`);
`));

34
packages/extension-ui/src/components/TextInputs.ts
View File

@ -6,43 +6,33 @@ import { ThemeProps } from '../types';
import styled, { css } from 'styled-components';
interface Props {
interface Props extends ThemeProps {
withError?: boolean;
}
const DefaultTextInputColors = css`
background: ${({ theme }: ThemeProps): string => theme.inputBackground};
border-color: ${({ theme }: ThemeProps): string => theme.inputBorderColor};
color: ${({ theme }: ThemeProps): string => theme.textColor};
`;
const ErroredTextInputColors = css`
background: ${({ theme }: ThemeProps): string => theme.inputBackground};
border-color: ${({ theme }: ThemeProps): string => theme.errorBorderColor};
color: ${({ theme }: ThemeProps): string => theme.errorColor};
`;
const TextInput = css<Props>`
border-radius: ${({ theme }: ThemeProps): string => theme.borderRadius};
border: ${({ theme }: ThemeProps): string => `1px solid ${theme.inputBorderColor}`};
outline: none;
const TextInput = css(({ theme, withError }: Props) => `
background: ${theme.inputBackground};
border-color: ${withError ? theme.errorBorderColor : theme.inputBorderColor};
border-radius: ${theme.borderRadius};
border: 1px solid ${theme.inputBorderColor};
box-sizing: border-box;
color: ${withError ? theme.errorColor : theme.textColor};
display: block;
font-family: ${({ theme }: ThemeProps): string => theme.fontFamily};
font-size: ${({ theme }: ThemeProps): string => theme.fontSize};
font-family: ${theme.fontFamily};
font-size: ${theme.fontSize};
font-weight: 600;
height: 40px;
outline: none;
padding: 0.5rem 0.75rem;
resize: none;
width: 100%;
${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)};
&:read-only {
background: ${({ theme }: ThemeProps): string => theme.readonlyInputBackground};
background: ${theme.readonlyInputBackground};
box-shadow: none;
outline: none;
}
`;
`);
export const TextArea = styled.textarea<Props>`${TextInput}`;
export const Input = styled.input<Props>`${TextInput}`;