Add announcement message

.github/workflows/tag.yaml

@@ -2,6 +2,7 @@ on:
   push:
     tags:
       - 'v?[0-9]+.[0-9]+.[0-9]+'
+      - 'v?[0-9]+.[0-9]+.[0-9]+-[0-9]+'
 
 jobs:
   converge:

src/components/Announcement/Announcement.jsx

@@ -0,0 +1,34 @@
+import './Announcement.scss';
+
+const LAUNCH_DATE = new Date('2024-06-27');
+const DAYS_LEFT = Math.ceil((LAUNCH_DATE - new Date()) / (1000 * 60 * 60 * 24));
+const ANNOUNCEMENT_MESSAGE =
+  DAYS_LEFT === 0
+    ? 'RariMe app launched!'
+    : `RariMe app launching in ${DAYS_LEFT} ${
+        DAYS_LEFT === 1 ? 'day' : 'days'
+      }`;
+
+export default function Announcement() {
+  return (
+    <a
+      className="announcement"
+      href="https://rarime.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <span className="announcement__title">Announcement:</span>
+      <div className="announcement__content">
+        <svg width="20" height="20">
+          <use href="/icons/sprite.svg#icon-rarime"></use>
+        </svg>
+        <span className="announcement__content-text">
+          {ANNOUNCEMENT_MESSAGE}
+        </span>
+        <svg width="13" height="13">
+          <use href="/icons/sprite.svg#icon-arrow-right"></use>
+        </svg>
+      </div>
+    </a>
+  );
+}

src/components/Announcement/Announcement.scss

@@ -0,0 +1,41 @@
+.announcement {
+  height: var(--announcement-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: to-rem(16);
+  background-color: #CDFD4A;
+
+  &,
+  &:hover {
+    color: var(--col-total-black);
+  }
+}
+
+.announcement__title {
+  font-size: to-rem(14);
+  line-height: to-rem(20);
+  font-weight: 600;
+  display: none;
+
+  @include respond-above(medium) {
+    display: block;
+  }
+}
+
+.announcement__content {
+  display: flex;
+  align-items: center;
+  gap: to-rem(8);
+}
+
+.announcement__content-icon {
+  width: to-rem(16);
+  height: to-rem(16);
+}
+
+.announcement__content-text {
+  font-size: to-rem(14);
+  line-height: to-rem(20);
+  font-weight: 500;
+}

src/components/Announcement/index.js

@@ -0,0 +1 @@
+export { default } from './Announcement';

src/components/AppBar/AppBar.jsx

@@ -14,6 +14,8 @@ import useNavigation from '@/hooks/useNavigation';
 import useRouteLocation from '@/hooks/useRouteLocation';
 import { navigation } from '@/template-data';
 
+import Announcement from '../Announcement';
+
 const AppSidebar = lazy(() => import('@/components/AppSidebar'));
 const BurgerButton = lazy(() => import('@/components/BurgerButton'));
 
@@ -83,6 +85,7 @@ const AppBar = () => {
         },
       ])}
     >
+      <Announcement />
       <div className="app-bar__container">
         <div className="app-bar__content container">
           <Link className="app-bar__logo" to={ROUTES_PATHS.home}>

src/components/AppBar/AppBar.scss

@@ -4,7 +4,7 @@
   top: 0;
   right: 0;
   left: 0;
-  height: var(--app-bar-height);
+  height: calc(var(--app-bar-height) + var(--announcement-height));
   background-color: transparent;
   overflow: hidden;
   transition-property: background-color, transform;
@@ -14,6 +14,7 @@
 
   &.app-bar--filled {
     background-color: var(--primary-bg-color);
+    transform: translateY(calc(-1 * var(--announcement-height)));
   }
 
   &.app-bar--hidden {
@@ -32,7 +33,7 @@
 }
 
 .app-bar__container {
-  height: 100%;
+  height: var(--app-bar-height);
 }
 
 .app-bar__content {

src/styles/base/_variables.scss

@@ -144,6 +144,7 @@
 
   // App bar
   --app-bar-height: #{to-rem(80)};
+  --announcement-height: #{to-rem(40)};
   --app-bar-logo-color: var(--primary-title-color);
 
   // App footer