Refactor and remove unnecessary stuff from theme

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -31,7 +31,6 @@ export default function Accounts (): React.ReactElement<Props> {
         (accounts.length === 0)
           ? <AddAccount
             header='add accounts'
-            type='warn'
             to='/account/create'
             imageVisible
           >

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -7,7 +7,7 @@ import { RequestAuthorizeTab } from '@polkadot/extension/background/types';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { ActionBar, ActionContext, Button, Icon, Link, Warning, Svg } from '../../components';
+import { ActionBar, ActionContext, Button, Icon, Link, Warning } from '../../components';
 import { approveAuthRequest, rejectAuthRequest } from '../../messaging';
 
 interface Props {
@@ -58,7 +58,7 @@ const RequestInfo = styled.div`
   flex-direction: column;
   align-items: center;
   margin-bottom: 8px;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
 `;
 
 const Info = styled.div`
@@ -73,11 +73,7 @@ const AcceptButton = styled(Button)`
 `;
 
 const RequestWarning = styled(Warning)`
-  ${Svg} {
-    width: 36px;
-    height: 14px;
-    margin: 5px 11px 5px 28px;
-  }
+  margin: 1rem 1rem 0 1.45rem;
 `;
 
 AcceptButton.displayName = 'AcceptButton';
@@ -91,14 +87,14 @@ export default styled(Request)`
   height: 100%;
 
   .icon {
-    background: ${({ theme }): string => theme.btnBgDanger};
-    color: ${({ theme }): string => theme.btnColorDanger};
+    background: ${({ theme }): string => theme.buttonBackgroundDanger};
+    color: ${({ theme }): string => theme.textColor};
     min-width: 18px;
     width: 18px;
     height: 18px;
     font-size: 14px;
     line-height: 20px;
-    margin: 1rem 10px 0 1.75rem;
+    margin: 1rem 15px 0 1.35rem;
   }
 
   .tab-info {
@@ -108,7 +104,7 @@ export default styled(Request)`
 
   .tab-name,
   .tab-url {
-    color: ${({ theme }): string => theme.linkColor};
+    color: ${({ theme }): string => theme.textColor};
     display: inline-block;
     max-width: 20rem;
     overflow: hidden;

packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx

@@ -20,7 +20,7 @@ const Title = styled.span`
   letter-spacing: 0.04em;
   text-transform: uppercase;
   opacity: 0.65;
-  color: ${({ theme }): string => theme.color}
+  color: ${({ theme }): string => theme.textColor}
 `;
 
 const CurrentStep = styled.span`
@@ -33,7 +33,7 @@ const CurrentStep = styled.span`
 const TotalSteps = styled.span`
   font-size: ${({ theme }): string => theme.labelFontSize};
   line-height: ${({ theme }): string => theme.labelLineHeight};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-weight: 600;
 `;
 

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

@@ -4,11 +4,10 @@
 
 import React, { useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { ActionContext, Address, Button, Warning, Svg, Title } from '../components';
+import { ActionContext, Address, Button, Warning, Title } from '../components';
 
 import { forgetAccount } from '../messaging';
 import { Back } from '../partials';
-import styled from 'styled-components';
 
 type Props = RouteComponentProps<{ address: string }>;
 
@@ -25,7 +24,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
       <Back />
       <Title>Forget account</Title>
       <Address address={address}>
-        <WarningText danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</WarningText>
+        <Warning danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Warning>
         <Button
           isDanger
           label='I want to forget this account'
@@ -36,12 +35,4 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
   );
 }
 
-const WarningText = styled(Warning)`
-  ${Svg} {
-    width: 36px;
-    height: 14px;
-    padding-right: 8px;
-  }
-`;
-
 export default withRouter(Forget);

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

@@ -56,5 +56,5 @@ const Note = styled.p`
 
 const TextBox = styled(Box)`
   margin: 0.75rem 1rem;
-  border: 1px solid ${({ theme }): string => theme.inputBorder};
+  border: 1px solid ${({ theme }): string => theme.inputBorderColor};
 `;

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

@@ -33,7 +33,7 @@ export default styled(ActionText)`
   }
 
   ${Svg} {
-    background: ${({ theme }): string => theme.iconLabelColor};
+    background: ${({ theme }): string => theme.iconNeutralColor};
     display: inline-block;
     position: relative;
     top: 2px;

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

@@ -4,14 +4,12 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Theme } from './themes';
 import addAccountImage from '../assets/addAccount.png';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
   header?: React.ReactNode;
-  type?: keyof Theme['box'];
   to?: string;
   onClick?: () => void;
   imageVisible?: boolean;
@@ -53,11 +51,11 @@ const Image = styled.img`
 `;
 
 export default styled(AddAccount)`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   height: 100%;
 
   h3 {
-    color: ${({ theme }): string => theme.color};
+    color: ${({ theme }): string => theme.textColor};
     font-weight: normal;
     text-align: center;
   }

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

@@ -104,7 +104,7 @@ const AccountInfoRow = styled.div`
   align-items: center;
   height: 72px;
   margin-bottom: 8px;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
 `;
 
 const Info = styled.div`
@@ -147,7 +147,7 @@ const Settings = styled.div`
     top: 25%;
     bottom: 25%;
     width: 1px;
-    background: ${({ theme }): string => theme.inputBorder};
+    background: ${({ theme }): string => theme.inputBorderColor};
   }
 
   &:hover {
@@ -161,7 +161,7 @@ Settings.displayName = 'Details';
 const ActionsIcon = styled(Svg).attrs(() => ({
   src: DetailsImg
 }))`
-  background: ${({ theme }): string => theme.iconLabelColor};
+  background: ${({ theme }): string => theme.iconNeutralColor};
 `;
 
 const ActiveActionsIcon = styled(Svg).attrs(() => ({

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

@@ -22,10 +22,9 @@ function Box ({ banner, children, className }: Props): React.ReactElement<Props>
 
 export default styled(Box)`
   background: ${({ theme }): string => theme.readonlyInputBackground};
-  border: ${({ theme }): string => theme.boxBorder};
+  border: none;
   border-radius: ${({ theme }): string => theme.borderRadius};
-  box-shadow: ${({ theme }): string => theme.boxShadow};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   margin: ${({ theme }): string => theme.boxMargin};

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

@@ -44,17 +44,17 @@ export default styled(Button)`
   width: ${({ isSmall }): string => isSmall ? 'auto' : '100%'};
 
   button {
-    background: ${({ isDanger, theme }): string => isDanger ? theme.btnBgDanger : theme.btnBg};
-    border: ${({ theme }): string => theme.btnBorder}${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor};
+    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
+    border: none;
     border-radius: ${({ theme }): string => theme.borderRadius};
-    color: ${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor};
+    color: ${({ theme }): string => theme.textColor};
     cursor: pointer;
     display: block;
     font-size: 15px;
     font-weight: 600;
     height: 48px;
     line-height: 20px;
-    padding: ${({ theme }): string => theme.btnPadding};
+    padding: 0.75rem 1rem;
     text-align: center;
     width: 100%;
 

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

@@ -8,7 +8,7 @@ import Button from './Button';
 export default styled.div`
   display: flex;
   flex-direction: row;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
   padding: 12px 1rem;
 
   &&& {

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

@@ -57,7 +57,7 @@ export default styled(Checkbox)`
         left: 3px;
         top: -4px;
         position: absolute;
-        color: ${({ theme }): string => theme.color};
+        color: ${({ theme }): string => theme.textColor};
         font-size: 14px;
       }
     }

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

@@ -62,17 +62,17 @@ export default styled(Dropdown)`
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background: ${({ isError, isReadOnly, theme }): string => isError ? theme.box.error.background : (isReadOnly ? '#eee' : '#fff')};
-    border-color: ${({ isError, theme }): string => isError ? theme.box.error.border : theme.inputBorder};
+    background: ${({ isError, isReadOnly, theme }): string => isError ? theme.inputBackground : (isReadOnly ? '#eee' : '#fff')};
+    border-color: ${({ isError, theme }): string => isError ? theme.errorBorderColor : theme.inputBorderColor};
     border-radius: ${({ theme }): string => theme.borderRadius};
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: ${({ isError, theme }): string => isError ? theme.box.error.border : theme.color};
+    color: ${({ isError, theme }): string => isError ? theme.errorBorderColor : theme.textColor};
     display: block;
     font-family: ${({ theme }): string => theme.fontFamily};
     font-size: ${({ theme }): string => theme.fontSize};
-    padding: ${({ label, theme }): string => label ? theme.inputPaddingLabel : theme.inputPadding};
+    padding: 0.5rem 0.75rem;
     width: 100%;
 
     &:read-only {

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

@@ -36,14 +36,14 @@ const Container = styled.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid ${({ theme }): string => theme.inputBorder};
+    border-bottom: 1px solid ${({ theme }): string => theme.inputBorderColor};
 `;
 
 const Branding = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${({ theme }): string => theme.hdrColor};
+  color: ${({ theme }): string => theme.labelColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   text-align: center;
   width: 100%;
@@ -68,12 +68,11 @@ const Gear = styled.img`
 `;
 
 const LogoText = styled.span`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
 `;
 
 export default styled(Header)`
-  background: ${({ theme }): string => theme.hdrBg};
   box-sizing: border-box;
   font-weight: normal;
   margin: 0 -1rem;

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

@@ -21,7 +21,7 @@ function Label ({ children, className, label }: Props): React.ReactElement<Props
 }
 
 export default styled(Label)`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
 
   label {
     font-size: ${({ theme }): string => theme.labelFontSize};

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

@@ -25,17 +25,17 @@ function Link ({ children, className, onClick, to }: Props): React.ReactElement<
 export default styled(Link)`
   display: flex;
   align-items: center;
-  color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+  color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
   opacity: 0.9;
   text-decoration: none;
   vertical-align: middle;
 
   &:hover {
-    color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+    color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
     opacity: 1.0;
   }
 
   &:visited {
-    color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+    color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
   }
 `;

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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export default styled.ul`
   list-style: none;
   padding-inline-start: 10px;
+  padding-inline-end: 10px;
   text-indent: -22px;
   margin-left: 21px;  
 

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

@@ -21,7 +21,7 @@ export default styled(Menu)`
   right: 0;
   margin-top: 90px;
   padding: 16px 0;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
   border-radius: 4px;
   border: 1px solid #222222;
   box-sizing: border-box;

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

@@ -12,5 +12,5 @@ export default styled.span<Props>`
     display: block;
     mask: ${({ src }): string => `url(${src})`};
     mask-size: cover;
-    background: ${({ theme }): string => theme.color}; 
+    background: ${({ theme }): string => theme.textColor}; 
 `;

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

@@ -6,27 +6,28 @@ interface Props {
 
 const DefaultTextInputColors = css`
   background: ${({ theme }): string => theme.inputBackground};
-  border-color: ${({ theme }): string => theme.inputBorder};
-  color: ${({ theme }): string => theme.color};
+  border-color: ${({ theme }): string => theme.inputBorderColor};
+  color: ${({ theme }): string => theme.textColor};
 `;
 
 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};
+  background: ${({ theme }): string => theme.inputBackground};
+  border-color: ${({ theme }): string => theme.errorBorderColor};
+  color: ${({ theme }): string => theme.errorColor};
 `;
 
 const TextInput = css<Props>`
   border-radius: ${({ theme }): string => theme.borderRadius};
-  border: ${({ theme }): string => `1px solid ${theme.inputBorder}`};
+  border: ${({ theme }): string => `1px solid ${theme.inputBorderColor}`};
+  outline: none;
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   display: block;
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   font-weight: 600;
-  height: ${({ theme }): string => theme.inputHeight};
-  padding: ${({ theme }): string => theme.inputPadding};
+  height: 40px;
+  padding: 0.5rem 0.75rem;
   resize: none;
   width: 100%;
   ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)};

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

@@ -22,7 +22,7 @@ export default styled(View)`
   display: flex;
   flex-direction: column;
   background: ${({ theme }): string => theme.background};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   line-height: ${({ theme }): string => theme.lineHeight};