refactor(my-diary): delete hard code colors

affects: @my-diary/app, @components/form-add-post, @components/main-page-header, @components/post-controls, @practice/my-diary, @ui/button, @ui/drawer, @ui/input, @ui/list, @ui/text, @ui/theme ISSUES CLOSED: #77
atls-academy · May 15, 2021 · fbbf65f · fbbf65f
1 parent d4db3f7
commit fbbf65f
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 32 deletions.
diff --git a/practice/my-diary/app/src/App.tsx b/practice/my-diary/app/src/App.tsx
@@ -13,29 +13,28 @@ import { ShowDrawerProvider }  from '@store/show-drawer'
 import { Box, Column, Layout } from '@ui/layout'
 
 export const App = () => {
-  const uniqueKey = () => Math.random() * Date.now()
   const [notes, setNotes] = useState([
     {
       note: 'Flight to Moscow',
       important: false,
       liked: false,
-      id: uniqueKey(),
+      id: 1,
       onHover: false,
       done: false,
     },
     {
       note: 'Friends meeting',
       important: false,
       liked: false,
-      id: uniqueKey(),
+      id: 2,
       onHover: false,
       done: false,
     },
     {
       note: 'Buy a new frying pan in Ikea',
       important: false,
       liked: false,
-      id: uniqueKey(),
+      id: 3,
       onHover: false,
       done: false,
     },
@@ -52,7 +51,6 @@ export const App = () => {
           <FilterProvider value={[filter, setFilter]}>
             <ShowDrawerProvider value={[showDrawer, setShowDrawer]}>
               <Box
-                margin='auto'
                 width='100%'
                 height='100%'
                 justifyContent='center'

diff --git a/practice/my-diary/components/form-add-post/src/FormAddPost.tsx b/practice/my-diary/components/form-add-post/src/FormAddPost.tsx
@@ -40,8 +40,9 @@ export const FormAddPost = () => {
         fontWeight='bold'
         color='white'
         backgroundColor='deepPurple'
-        borderRadius='gigant'
+        borderRadius='giant'
         boxShadow='violet'
+        border='none'
         onClick={() => {
           setInputStatus('visible')
           if (inputStatus === 'visible' && newNote !== '') {

diff --git a/practice/my-diary/components/main-page-header/src/MainPageHeader.tsx b/practice/my-diary/components/main-page-header/src/MainPageHeader.tsx
@@ -15,7 +15,7 @@ export const MainPageHeader = () => {
   const [, setShowDrawer] = useShowDrawer()
   return (
     <Column>
-      <Row backgroundColor='deepPurple' lineHeights='gigant' alignItems='center'>
+      <Row backgroundColor='deepPurple' lineHeights='giant' alignItems='center'>
         <Layout flexBasis={50} />
         <HamburgerButtonIcon cursor='pointer' onClick={() => setShowDrawer(true)} />
         <Layout flexBasis={220} />

diff --git a/practice/my-diary/components/post-controls/src/PostControls.tsx b/practice/my-diary/components/post-controls/src/PostControls.tsx
@@ -33,6 +33,7 @@ export const PostControls = () => {
               color='white'
               backgroundColor='deepPurple'
               borderRadius='rightSide'
+              border='1px solid'
               onClick={() => {
                 setFilter('all')
                 setSearchValue('')
@@ -46,7 +47,7 @@ export const PostControls = () => {
             <Button
               backgroundColor={filter === 'all' ? 'deepPurple' : 'white'}
               color={filter === 'all' ? 'white' : 'grayBlue'}
-              border='1px solid #e4eaff'
+              border='1px solid'
               borderRadius='leftSide'
               onClick={() => setFilter('all')}
             >
@@ -57,15 +58,15 @@ export const PostControls = () => {
             <Button
               backgroundColor={filter === 'important' ? 'deepPurple' : 'white'}
               color={filter === 'important' ? 'white' : 'grayBlue'}
-              border='1px solid #e4eaff'
+              border='1px solid'
               onClick={() => setFilter('important')}
             >
               {intl.formatMessage(messages.important)}
             </Button>
             <Button
               backgroundColor={filter === 'liked' ? 'deepPurple' : 'white'}
               color={filter === 'liked' ? 'white' : 'grayBlue'}
-              border='1px solid #e4eaff'
+              border='1px solid'
               borderRadius='rightSide'
               onClick={() => setFilter('liked')}
             >

diff --git a/practice/my-diary/ui/button/src/Button.tsx b/practice/my-diary/ui/button/src/Button.tsx
@@ -35,8 +35,8 @@ export const Button = styled.button(
 )
 
 Button.defaultProps = {
-  color: '#6c757d',
-  border: 'none',
+  color: 'grey',
+  borderColor: 'purple',
   fontSize: '17px',
   fontWeight: '400',
   textAlign: 'center',

diff --git a/practice/my-diary/ui/drawer/src/Drawer.tsx b/practice/my-diary/ui/drawer/src/Drawer.tsx
@@ -1,8 +1,8 @@
-import React            from 'react'
-import styled           from '@emotion/styled'
-import { color, space } from 'styled-system'
+import React                    from 'react'
+import styled                   from '@emotion/styled'
+import { color, shadow, space } from 'styled-system'
 
-import { Box }          from '@ui/layout'
+import { Box }                  from '@ui/layout'
 
 const StyledContainer = styled.div(
   ({ visible }) => ({
@@ -11,16 +11,15 @@ const StyledContainer = styled.div(
     left: '0',
     width: '100%',
     height: '100%',
-    backgroundColor: 'transperent',
     visibility: 'hidden',
     zIndex: 1,
     animation: `${visible ? 'appear' : visible === false && 'disappear'} 0.3s forwards`,
     '@keyframes appear': {
       from: { backgroundColor: 'transparent', visibility: 'hidden' },
-      to: { backgroundColor: 'rgba(0,0,0,0.2)', visibility: 'visible' },
+      to: { backgroundColor: 'grey', visibility: 'visible', opacity: '0.3' },
     },
     '@keyframes disappear': {
-      from: { backgroundColor: 'rgba(0,0,0,0.2)', visibility: 'visible' },
+      from: { backgroundColor: 'grey', visibility: 'visible', opacity: '0.3' },
       to: { backgroundColor: 'transparent', visibility: 'hidden' },
     },
   }),
@@ -31,9 +30,8 @@ const StyledDrawer = styled.div(
   ({ visible }) => ({
     width: '400px',
     height: '100%',
-    backgroundColor: '#fff',
+    backgroundColor: 'white',
     boxSizing: 'border-box',
-    boxShadow: '2px 0 5px rgba(0,0,0,0.2)',
     position: 'fixed',
     display: 'flex',
     justifyContent: 'center',
@@ -54,13 +52,16 @@ const StyledDrawer = styled.div(
   }),
   color,
   space,
+  shadow,
 )
 
 export const Drawer = ({ isVisible, onClose, children }) => {
   return (
     <Box>
       <StyledContainer onClick={onClose} visible={isVisible} />
-      <StyledDrawer visible={isVisible}>{children}</StyledDrawer>
+      <StyledDrawer visible={isVisible} boxShadow='darkGrey'>
+        {children}
+      </StyledDrawer>
     </Box>
   )
 }
diff --git a/practice/my-diary/ui/input/src/Input.tsx b/practice/my-diary/ui/input/src/Input.tsx
@@ -5,9 +5,8 @@ export const Input = styled.input(
   () => ({
     display: 'block',
     height: '40px',
-    backgroundColor: '#fff',
+    border: '1px solid',
     padding: '0 20px',
-    border: '1px solid #e4eaff',
     fontSize: 16,
     fontWeight: 400,
     outline: 'none',
@@ -16,3 +15,8 @@ export const Input = styled.input(
   border,
   color,
 )
+
+Input.defaultProps = {
+  borderColor: 'purple',
+  backgroundColor: 'white',
+}
diff --git a/practice/my-diary/ui/list/src/Item.tsx b/practice/my-diary/ui/list/src/Item.tsx
@@ -46,9 +46,8 @@ export const Item = ({ notes, setNotes, note, deleteItem, toggleStatus }) => (
       >
         <Text
           lineHeight='large'
-          color='grayBlue'
+          color='greyBlue'
           textDecoration={note.done ? 'line-through' : 'none'}
-          textDecorationColor='#e4eaff'
         >
           {note.note}
         </Text>
@@ -61,7 +60,7 @@ export const Item = ({ notes, setNotes, note, deleteItem, toggleStatus }) => (
         >
           <StarIcon
             opacity={note.important || note.onHover ? '1' : '0'}
-            color={note.important ? '#FFD700' : 'gray'}
+            color={note.important ? 'khaki' : 'gray'}
           />
         </Button>
         <Button
@@ -77,7 +76,7 @@ export const Item = ({ notes, setNotes, note, deleteItem, toggleStatus }) => (
         <Button
           backgroundColor='white'
           border='none'
-          color='grayBlue'
+          color='greyBlue'
           onClick={() => setNotes(deleteItem(notes, note.id))}
           opacity={note.onHover ? '1' : '0'}
         >

diff --git a/practice/my-diary/ui/text/src/Text.tsx b/practice/my-diary/ui/text/src/Text.tsx
@@ -20,4 +20,5 @@ Text.defaultProps = {
   fontFamily: ['Segoe UI', 'Roboto', 'Ubuntu', 'sans-serif'],
   fontWeight: 'normal',
   fontSize: '20px',
+  textDecorationColor: '#e4eaff',
 }
diff --git a/practice/my-diary/ui/theme/src/colors.ts b/practice/my-diary/ui/theme/src/colors.ts
@@ -1,10 +1,9 @@
 export const colors = {
   grey: '#6c757d',
-  lightGray: 'rgba(0,0,0,0.2)',
   purple: '#e4eaff',
   deepPurple: '#b07fec',
   blue: '#17a2b8',
-  grayBlue: '#919abc',
+  greyBlue: '#919abc',
   white: '#fff',
   yellow: '#FFD700',
 }
diff --git a/practice/my-diary/ui/theme/src/radii.ts b/practice/my-diary/ui/theme/src/radii.ts
@@ -1,7 +1,7 @@
 export const radii = {
   normal: 4,
   extra: 18,
-  gigant: 35,
+  giant: 35,
   leftSide: '15px 0 0 15px',
   rightSide: '0 15px 15px 0',
 }
diff --git a/practice/my-diary/ui/theme/src/shadows.ts b/practice/my-diary/ui/theme/src/shadows.ts
@@ -1,4 +1,5 @@
 export const shadows = {
-  gray: '0 0 10px rgba(0,0,0,0.5)',
+  grey: '0 0 10px rgba(0,0,0,0.5)',
+  darkGrey: '2px 0 5px rgba(0,0,0,0.2)',
   violet: '0 0 10px rgba(176, 127, 236, 1)',
 }