Apply colors from design, styles refactoring #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

vanruch merged 4 commits into master from use-theme-provider

Nov 7, 2019

packages/extension-ui/src/Popup/Create.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -4,7 +4,7 @@
  
    import React, { useContext, useEffect, useState } from 'react';

    import { ActionContext, Address, Button, Header, Loading, TextArea } from '../components';

    import { ActionContext, Address, Button, Header, Loading, TextAreaWithLabel } from '../components';

    import { createAccountSuri, createSeed } from '../messaging';

    import { Back, Name, Password } from '../partials';

    @@ -38,7 +38,7 @@ export default function Create (): React.ReactElement<Props> {
  
          <Back />

          <Loading>{account && (

            <>

              <TextArea

              <TextAreaWithLabel

                isReadOnly

                label='generated 12-word mnemonic seed'

                value={account.seed}

packages/extension-ui/src/Popup/Export.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,7 +5,7 @@
  
    import React, { useContext, useState } from 'react';

    import { RouteComponentProps, withRouter } from 'react-router';

    import { ActionContext, Address, Button, Header, Input, Tip } from '../components';

    import { ActionContext, Address, Button, Header, InputWithLabel, Tip } from '../components';

    import { exportAccount } from '../messaging';

    import { Back } from '../partials';

    @@ -40,7 +40,7 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
  
          <Back />

          <Address address={address}>

            <Tip header='danger' type='error'>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</Tip>

            <Input

            <InputWithLabel

              isError={pass.length < MIN_LENGTH || wrongPasswordHighlight}

              label='password for this account'

              onChange={setPass}

packages/extension-ui/src/Popup/ImportSeed.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -4,7 +4,7 @@
  
    import React, { useContext, useState } from 'react';

    import { ActionContext, Address, Button, Header, TextArea } from '../components';

    import { ActionContext, Address, Button, Header, TextAreaWithLabel } from '../components';

    import { createAccountSuri, validateSeed } from '../messaging';

    import { Back, Name, Password } from '../partials';

    @@ -35,9 +35,9 @@ export default function Import (): React.ReactElement<Props> {
  
        <div>

          <Header label='import account' />

          <Back />

          <TextArea

          <TextAreaWithLabel

            isError={!account}

            isFocussed

            isFocused

            label='existing 12 or 24-word mnemonic seed'

            onChange={_onChangeSeed}

          />

packages/extension-ui/src/Popup/Signing/Unlock.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -4,7 +4,7 @@
  
    import React, { useState, useEffect } from 'react';

    import { Button, Input } from '../../components';

    import { Button, InputWithLabel } from '../../components';

    interface Props {

      className?: string;

    @@ -27,9 +27,9 @@ export default function Unlock ({ className, onSign }: Props): React.ReactElemen
  
      return (

        <div className={className}>

          <Input

          <InputWithLabel

            isError={!password || !!error}

            isFocussed

            isFocused

            label='password for this account'

            onChange={setPassword}

            type='password'

packages/extension-ui/src/components/Box.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     }
     export default styled(Box)`
-      background: white;
+      background: ${({ theme }): string => theme.background};
       border: ${({ theme }): string => theme.boxBorder};
       border-radius: ${({ theme }): string => theme.borderRadius};
       box-shadow: ${({ theme }): string => theme.boxShadow};
@@ Expand Down @@

packages/extension-ui/src/components/Input.tsx

This file was deleted.

packages/extension-ui/src/components/InputWithLabel.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,50 @@
+    // Copyright 2019 @polkadot/extension-ui authors & contributors
+    // This software may be modified and distributed under the terms
+    // of the Apache-2.0 license. See the LICENSE file for details.
+    import React from 'react';
+    import Label from './Label';
+    import styled from 'styled-components';
+    import { Input } from './TextInputs';
+    interface Props {
+      className?: string;
+      defaultValue?: string | null;
+      isError?: boolean;
+      isFocused?: boolean;
+      isReadOnly?: boolean;
+      label?: string | null;
+      onBlur?: () => void;
+      onChange?: (value: string) => void;
+      type?: 'text' | 'password';
+      value?: string;
+    }
+    function InputWithLabel ({ className, defaultValue, label, isFocused, isReadOnly, onBlur, onChange, type = 'text', value, isError }: Props): React.ReactElement<Props> {
+      const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange && onChange(value.trim());
+      };
+      return (
+        <Label
+          className={className}
+          label={label}
+        >
+          <Input
+            withError={isError}
+            autoFocus={isFocused}
+            defaultValue={defaultValue || undefined}
+            readOnly={isReadOnly}
+            onBlur={onBlur}
+            onChange={_onChange}
+            type={type}
+            value={value}
+          />
+        </Label>
+      );
+    }
+    export default styled(InputWithLabel)`
+      padding: ${({ label, theme }): string => label ? theme.inputPaddingLabel : theme.inputPadding};
+    `;

packages/extension-ui/src/components/TextArea.tsx

This file was deleted.

packages/extension-ui/src/components/TextAreaWithLabel.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,46 @@
+    // Copyright 2019 @polkadot/extension-ui authors & contributors
+    // This software may be modified and distributed under the terms
+    // of the Apache-2.0 license. See the LICENSE file for details.
+    import React from 'react';
+    import Label from './Label';
+    import { TextArea } from '@polkadot/extension-ui/components/TextInputs';
+    import styled from 'styled-components';
+    interface Props {
+      className?: string;
+      isError?: boolean;
+      isFocused?: boolean;
+      isReadOnly?: boolean;
+      rowsCount?: number;
+      label: string;
+      onChange?: (value: string) => void;
+      value?: string;
+    }
+    function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
+      const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        onChange && onChange(value.trim());
+      };
+      return (
+        <Label
+          className={className}
+          label={label}
+        >
+          <TextArea
+            withError={isError}
+            autoFocus={isFocused}
+            onChange={_onChange}
+            readOnly={isReadOnly}
+            value={value}
+            rows={rowsCount || 2}
+          />
+        </Label>
+      );
+    }
+    export default styled(TextAreaWithLabel)`
+      padding: ${({ label, theme }): string => label ? theme.inputPaddingLabel : theme.inputPadding};
+    `;

packages/extension-ui/src/components/TextInputs.ts

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    import styled, { css } from 'styled-components';
+    const DefaultTextInputColors = css`
+      background: ${({ theme }): string => theme.inputBackground};
+      border-color: ${({ theme }): string => theme.inputBorder};
+      color: ${({ theme }): string => theme.color};
+    `;
+    const ErroredTextInputColors = css`
+      background: ${({ theme }): string => theme.box.error.background};
+      border-color: ${({ theme }): string => theme.box.error.border};
+      color: ${({ theme }): string => theme.box.error.border};
+    `;
+    const TextInput = css<{ withError?: boolean }>`
+      box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
+      border-radius: ${({ theme }): string => theme.borderRadius};
+      border-style: solid;
+      border-width: 1px;
+      box-sizing: border-box;
+      display: block;
+      font-family: ${({ theme }): string => theme.fontFamily};
+      font-size: ${({ theme }): string => theme.fontSize};
+      resize: none;
+      width: 100%;
+      ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)}
+      &:read-only {
+        background: ${({ theme }): string => theme.readonlyInputBackground}
+        box-shadow: none;
+        outline: none;
+      }
+    `;
+    export const TextArea = styled.textarea`${TextInput}`;
+    export const Input = styled.input`${TextInput}`;

packages/extension-ui/src/components/View.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     }
     export default styled(View)`
+      background: ${({ theme }): string => theme.background};
       color: ${({ theme }): string => theme.color};
       font-family: ${({ theme }): string => theme.fontFamily};
       font-size: ${({ theme }): string => theme.fontSize};
       line-height: ${({ theme }): string => theme.lineHeight};
+      height: 100%;
+      padding: 0 1rem;
       h3 {
         margin: 0 0 0.75rem;
         text-transform: uppercase;
@@ Expand Down @@

packages/extension-ui/src/components/index.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -10,12 +10,13 @@ export { default as Dropdown } from './Dropdown';
  
    export { default as Header } from './Header';

    export { default as Icon } from './Icon';

    export { default as IconBox } from './IconBox';

    export { default as Input } from './Input';

    export { default as InputWithLabel } from './InputWithLabel';

    export { default as Link } from './Link';

    export { default as Loading } from './Loading';

    export { default as TextArea } from './TextArea';

    export { default as TextAreaWithLabel } from './TextAreaWithLabel';

    export { default as Tip } from './Tip';

    export { default as View } from './View';

    export { Input, TextArea } from './TextInputs';

    export * from './contexts';

    export * from './themes';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apply colors from design, styles refactoring #5

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!