Skip to content
This repository was archived by the owner on Dec 28, 2023. It is now read-only.

fix:Added rebranding #291

Merged
hubert-deriv merged 3 commits into from
Mar 3, 2023
Merged

fix:Added rebranding #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2df5570
Added rebranding
sanjam-deriv Feb 23, 2023
46f73cd
added hamnurger icon
sanjam-deriv Feb 23, 2023
6fbd92a
Changes the top nav
sanjam-deriv Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions img/hamburger_icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions img/wordmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/components/global/Button/Button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/global/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions src/components/global/DerivLogo/DerivLogo.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -38,8 +38,7 @@
}

[data-state*="responsive.mobile"] {
.logoLink {
justify-content: center;
.logoLink {
.logo {
height: 4.8rem;
width: 8.4rem;
Expand Down
1 change: 0 additions & 1 deletion src/components/global/DerivLogo/DerivLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
11 changes: 6 additions & 5 deletions src/components/global/Header/Header.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/global/Header/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/global/LogoutButton/LogoutButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 0 additions & 2 deletions src/components/global/LogoutButton/LogoutButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down