diff --git a/components/Header/index.module.scss b/components/Header/index.module.scss index 7d6a6fbe..7190b357 100644 --- a/components/Header/index.module.scss +++ b/components/Header/index.module.scss @@ -1,12 +1,29 @@ .bahamut { + $negative-margin: $unit * -2; + + align-items: center; background: #2b4683; - color: white; + box-sizing: border-box; + display: flex; + gap: $unit; + justify-content: center; text-align: center; font-weight: $bold; - padding: $unit; - border-radius: $full-corner; - margin-bottom: $unit; - width: 100%; + padding: $unit-2x; + margin-top: $negative-margin; + margin-left: $negative-margin; + margin-right: $negative-margin; + margin-bottom: $unit-2x; + width: 100vw; + + p { + color: white; + } + + svg { + width: 1.2em; + fill: white; + } } .header { diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 2bc75fa3..4cba70d0 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -26,6 +26,7 @@ import AccountModal from '~components/auth/AccountModal' import Button from '~components/common/Button' import Tooltip from '~components/common/Tooltip' +import BahamutIcon from '~public/icons/Bahamut.svg' import ChevronIcon from '~public/icons/Chevron.svg' import MenuIcon from '~public/icons/Menu.svg' import PlusIcon from '~public/icons/Add.svg' @@ -383,7 +384,10 @@ const Header = () => { return ( <> {accountState.account.user?.bahamut && ( -
Bahamut Mode is active
+
+ +

Bahamut Mode is active

+
)}