Vijayasree/refactor: all the magic numbers and string in the whole sinbad codeba…

src/common/constants.ts

@@ -1,2 +1,3 @@
 export const EMAIL = '[email protected]'
 export const MOBILE = '971508611678'
+export const HR_EMAIL = '[email protected]'

src/components/layout/header.tsx

@@ -94,7 +94,7 @@ const StyledBurger = styled.button<MenuProps>`
     div {
         width: 2.5rem;
         height: 0.25rem;
-        background: ${({ open }) => (open ? '#0D0C1D' : 'var(--color-sand-4)')};
+        background: ${({ open }) => (open ? 'var(--color-black-4)' : 'var(--color-sand-4)')};
         border-radius: 10px;
         transition: all 0.3s linear;
         position: relative;

src/components/layout/join-us/job.tsx

@@ -6,6 +6,7 @@ import { Button } from 'components/elements'
 import { JoinUsImageContainer } from 'components/containers/main'
 import Sinbad from 'images/common/openpositions/join-us-background.png'
 import { Banner } from 'images/common/jd'
+import { HR_EMAIL } from 'common/constants'
 
 const Wrapper = styled.div`
     background-color: var(--color-sand-transparent);
@@ -28,7 +29,7 @@ const JoinUsWrapper = styled(JoinUsContainer)`
 
 const JoinUsJob = () => {
     const sendMailToHR = () => {
-        const link = 'mailto:[email protected]'
+        const link = `mailto:${HR_EMAIL}`
         window.open(link, '_blank')
     }
 

src/pages/careers/work-with-us.tsx

@@ -35,7 +35,7 @@ const StyledHeader = styled.div<{ font_family?: string; color?: string; padding?
     display: flex;
     font-size: 4.8rem;
     line-height: 57px;
-    color: ${(props) => props.color || '#2a2a2a'};
+    color: ${(props) => props.color || 'var(--color-black-1)'};
     font-weight: 640;
     font-family: ${(props) => props.font_family || 'Maven Pro Bold'};
     text-align: center;

static/css/global-style.css

@@ -4,6 +4,7 @@
     --color-black-1: #2a2a2a;
     --color-black-2: #242424;
     --color-black-3: #232323;
+    --color-black-4: #0D0C1D;
     --color-blue-1: #0e2432;
     --color-blue-2: #3bc8f7;
     --color-blue-3: #ecf6f8;