fix:Added rebranding (#291)

Author: sanjam-deriv

img/hamburger_icon.svg

@@ -26,6 +26,18 @@
     width: fit-content;
     padding: 0.8rem 1.6rem;
 
+    &:hover {
+      --btn-background: var(--gray-05);
+    }
+  }
+  &.logout {
+    --btn-background: transparent;
+    --btn-text-color: var(--red-01);
+    border: solid 2px var(--red-01);
+    border-radius: 10px;
+    width: fit-content;
+    padding: 0.8rem 1.6rem;
+
     &:hover {
       --btn-background: var(--gray-05);
     }

img/wordmark.svg

@@ -14,7 +14,10 @@ export default function Button({
     let classesNames = `${styles.btn}`;
     if (type === 'secondary') {
         classesNames += ` ${styles.secondary}`;
+    } else if (type === 'logout') {
+        classesNames += ` ${styles.logout}`;
     }
+
     return (
         <button disabled={disabled} onClick={onClick} className={classesNames}>
             {children}

src/components/global/Button/Button.module.scss

@@ -19,7 +19,7 @@
         margin-left: 2.4rem;
     }
     .logo {
-        background-image: url(/img/deriv.svg);
+        background-image: url(/img/wordmark.svg);
         width: 18rem;
         height: 7.3rem;
         background-size: contain;
@@ -38,8 +38,7 @@
 }
 
 [data-state*="responsive.mobile"] {
-    .logoLink {
-        justify-content: center;
+    .logoLink { 
         .logo {
             height: 4.8rem;
             width: 8.4rem;

src/components/global/Button/Button.tsx

@@ -11,7 +11,6 @@ export const DerivLogo = () => {
         <Link className={styles.logoLink} to='/' data-testid='mainLogo'>
             <div className={styles.flexContainer}>
                 <div data-testid='home_logo' onClick={clickLogo} className={styles.logo} />
-                <h1 className={styles.branding}>API</h1>
             </div>
         </Link>
     );

src/components/global/DerivLogo/DerivLogo.module.scss

@@ -5,13 +5,13 @@
   z-index: 100;
   display: flex;
   flex-direction: column;
-  background-color: var(--black-01);
+  background-color: var(--white);
   a {
     position: relative;
     margin-right: 4rem;
     font-size: var(--text-size-s);
     line-height: 1.5;
-    color: var(--white);
+    color: var(--black-01);
     &:empty {
       display: none !important;
     }
@@ -60,7 +60,7 @@
         margin-right: 4rem;
         font-size: var(--text-size-xxs);
         line-height: var(--text-lh-m);
-        color: var(--copy-color);
+        color: var(--black-01);
 
         &::before {
           visibility: hidden;
@@ -73,7 +73,8 @@
     align-items: center;
     justify-content: center;
     height: 7.3rem;
-    background-color: var(--black-01);
+    background-color: var(--white);
+    border-bottom: 1px var(--gray-01) solid;
     .headerContainer {
       display: flex;
       flex-wrap: nowrap;
@@ -82,7 +83,7 @@
       .hamburger {
         width: 1.6rem;
         height: 1.6rem;
-        background-image: url(/img/hamburger_menu.svg);
+        background-image: url(/img/hamburger_icon.svg);
         background-repeat: no-repeat;
         padding: 0.1rem;
         display: none;

src/components/global/DerivLogo/DerivLogo.tsx

@@ -4,7 +4,7 @@ export const TopNav = () => {
         <div className={`${styles.topNav} ${styles.flexContainer}`}>
             <div className={styles.topNavContainer}>
                 <a href='https://deriv.com/'>Deriv website</a>
-                <a href='https://deriv.com/who-we-are'>About us</a>
+                <a href='https://deriv.com/who-we-are'>Who we are</a>
                 <a href='https://deriv.com/contact-us'>Contact us</a>
             </div>
         </div>

src/components/global/Header/Header.module.scss

@@ -14,7 +14,7 @@ export const LogoutButton = () => {
     return (
         <Suspense fallback={<div />}>
             <div className={styles.signOut}>
-                <LazyButton onClick={logout}>Sign out</LazyButton>
+                <LazyButton onClick={logout} type='logout'>Sign out</LazyButton>
             </div>
         </Suspense>
     );

src/components/global/Header/TopNav.tsx

@@ -6,8 +6,6 @@
   z-index: 100;
   color: var(--white);
   background-color: transparent;
-  border: solid 2px var(--gray-05);
-  border-radius: 4px;
 }
 
 [data-state*="mobile"] .signOut {