color name correction

Author: iamvijaydev

TODO.md

@@ -9,5 +9,5 @@
 - [*] Proper demo components with styles that can be removed quickly
 - [ ] Create a protected route component
 - [ ] Add new component for showing the notifications
-- [ ] Add table component that can recive data like these `<Table header={object[]} body={any[][]} minWidth={number} />`
+- [ ] Add table component that can recieve data like these `<Table header={object[]} body={any[][]} minWidth={number} />`
 - [ ] Proper step-by-step instructions to use this repo for a new project

config/theme/colors.js

@@ -2,15 +2,15 @@ const colors = {
   white: '#fff',
   black: '#000',
 
-  gray100: '#F5F5F5',
-  gray200: '#EEEEEE',
-  gray300: '#E0E0E0',
-  gray400: '#BDBDBD',
-  gray500: '#9E9E9E',
-  gray600: '#757575',
-  gray700: '#616161',
-  gray800: '#424242',
-  gray900: '#212121',
+  grey100: '#F5F5F5',
+  grey200: '#EEEEEE',
+  grey300: '#E0E0E0',
+  grey400: '#BDBDBD',
+  grey500: '#9E9E9E',
+  grey600: '#757575',
+  grey700: '#616161',
+  grey800: '#424242',
+  grey900: '#212121',
 
   red400: '#Ef5350',
   red500: '#F44336',

config/theme/darktheme.js

@@ -27,7 +27,7 @@ const darktheme = {
   errorColor: colors.red500,
   successColor: colors.green500,
   notifColor: colors.green500,
-  neutralColor: colors.gray200,
+  neutralColor: colors.grey200,
 
   /* link colors */
   linkColor: colors.blue500,

config/theme/whitetheme.js

@@ -16,7 +16,7 @@ const whitetheme = {
 
   /* dark theme */
   backgroudColor: colors.white,
-  textColor: colors.gray900,
+  textColor: colors.grey900,
 
   /* for UI elements */
   primaryColor: colors.green500,
@@ -27,7 +27,7 @@ const whitetheme = {
   errorColor: colors.red500,
   successColor: colors.green500,
   notifColor: colors.green500,
-  neutralColor: colors.gray200,
+  neutralColor: colors.grey200,
 
   /* link colors */
   linkColor: colors.blue500,

src/App/AppGlobalStyles/index.js

@@ -62,16 +62,16 @@ const GlobalStyles = ({ theme }) => {
       }
 
       ::-webkit-input-placeholder {
-        color: ${theme.colors.gray400};
+        color: ${theme.colors.grey400};
       }
       ::-moz-placeholder {
-        color: ${theme.colors.gray400};
+        color: ${theme.colors.grey400};
       }
       :-ms-input-placeholder {
-        color: ${theme.colors.gray400};
+        color: ${theme.colors.grey400};
       }
       :-moz-placeholder {
-        color: ${theme.colors.gray400};
+        color: ${theme.colors.grey400};
       }
 
       #modal-root {

src/App/DemoToBeDeleted/components/DemoModal/styled.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 export const Header = styled.header`
-border-bottom: 1px solid ${props => props.theme.colors.gray300};
-padding: 1rem 1rem 2rem;
+  border-bottom: 1px solid ${props => props.theme.colors.grey300};
+  padding: 1rem 1rem 2rem;
 
   h3 {
     margin: 0;
@@ -14,7 +14,7 @@ export const Article = styled.article`
 `;
 
 export const Footer = styled.footer`
-  border-top: 1px solid ${props => props.theme.colors.gray300};
+  border-top: 1px solid ${props => props.theme.colors.grey300};
   padding: 2rem 1rem 1rem;
   display: flex;
   justify-content: flex-end;

src/App/DemoToBeDeleted/styled.js

@@ -6,7 +6,7 @@ const Styled = styled.aside`
   top: 0;
   bottom: 0;
   width: 30rem;
-  background-color: ${props => props.theme.colors.gray100};
+  background-color: ${props => props.theme.colors.grey100};
   display: flex;
   flex-direction: column;
 `;
@@ -23,13 +23,13 @@ const List = styled.ul`
 
 export const ListItem = styled.li`
   padding: 1rem;
-  background-color: ${props => props.theme.colors.gray300};
-  color: ${props => props.theme.colors.gray900};
+  background-color: ${props => props.theme.colors.grey300};
+  color: ${props => props.theme.colors.grey900};
 `;
 
 export const ListSubItem = styled(ListItem)`
-  background-color: ${props => props.theme.colors.gray100};
-  border-bottom: ${props => '1px solid' + props.theme.colors.gray300};
+  background-color: ${props => props.theme.colors.grey100};
+  border-bottom: ${props => '1px solid' + props.theme.colors.grey300};
   padding: 1.5rem 1rem 1.5rem 3rem;
 `;
 

src/components/Modal/styled.js

@@ -27,6 +27,7 @@ const ModalWrap = styled(Base)`
 const Modal = styled.div`
   margin: 3rem;
   background: ${props => props.theme.colors.white};
+  color: ${props => props.theme.colors.grey900};
   border-radius: 4px;
   padding: 1rem;
   position: relative;