feat: add event background images (#882)

Author: juanmahidalgo

webapp/src/components/MVMFPage/MVMFBanner/MVMFBanner.css

@@ -14,6 +14,10 @@
   border-radius: 10px;
 }
 
+.MVMFBanner.banner-container .banner.started {
+  padding-left: 52px;
+}
+
 .MVMFBanner.banner-container.small .banner {
   display: flex;
   flex-direction: row;
@@ -47,17 +51,37 @@
   height: 44px;
 }
 
+.MVMFBanner.banner-container.small .banner.started {
+  background-image: url('../../../images/mvmf-started-1064x100.gif');
+  height: 145px;
+  padding-right: 32px;
+  background-repeat: no-repeat;
+  background-color: #10141d;
+  flex-direction: column;
+}
+
+.MVMFBanner.banner-container.small .started button {
+  width: 300px;
+  margin-top: 16px;
+}
+
 .MVMFBanner.banner-container.small .banner {
   background-image: url('../../../images/mvmf-1064x100.gif');
   height: 100px;
   padding-right: 32px;
 }
 
 .MVMFBanner.banner-container.medium .banner {
-  background-image: url('../../../images/mvmf22-banner-small.png');
+  background-image: url('../../../images/mvmf-started-1064x153.gif');
   height: 150px;
 }
 
+.MVMFBanner.banner-container.big .banner.started {
+  background-image: url('../../../images/mvmf-started-1064x276.gif');
+  height: 276px;
+  background-repeat: no-repeat;
+}
+
 .MVMFBanner.banner-container.big .banner {
   background-image: url('../../../images/mvmf-1064x276.gif');
   height: 316px;

webapp/src/components/MVMFPage/MVMFBanner/MVMFBanner.tsx

@@ -194,7 +194,9 @@ const MVMFBanner = ({
   return isMVMFEnabled || isMVMFAnnouncementEnabled ? (
     <div className={classNames('MVMFBanner banner-container', type)}>
       <Container>
-        <div className="banner">{content}</div>
+        <div className={classNames('banner', isMVMFEnabled && 'started')}>
+          {content}
+        </div>
       </Container>
     </div>
   ) : null

webapp/src/components/Navigation/Navigation.css

@@ -1,9 +1,54 @@
-.sparkles-icon {
+.mvmf-icon {
   display: inline-block;
-  width: 15px;
-  height: 15px;
-  filter: brightness(0) invert(1);
+  width: 16px;
+  height: 16px;
   margin-right: 8px;
-  background-image: url(../../images/sparkles.svg);
+  background-image: url(../../images/rabbit.svg);
   background-size: cover;
 }
+
+.mvmf-tab {
+  background: linear-gradient(45deg, #92efeb, #bfffdc, #f7ffdc, #ecc8ff);
+  background-size: 30% 30%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  -webkit-animation: AnimationName 5s ease-out infinite;
+  -moz-animation: AnimationName 5s ease-out infinite;
+  animation: AnimationName 5s ease-out infinite;
+}
+
+@-webkit-keyframes AnimationName {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+@-moz-keyframes AnimationName {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+@keyframes AnimationName {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

webapp/src/components/Navigation/Navigation.tsx

@@ -32,10 +32,10 @@ const Navigation = (props: Props) => {
             })}
           >
             <Tabs.Tab active={activeTab === NavigationTab.MVMF}>
-              <>
-                <span className="sparkles-icon" />
+              <div className="mvmf-tab">
+                <span className="mvmf-icon" />
                 <span>{t('navigation.mvmf')}</span>
-              </>
+              </div>
             </Tabs.Tab>
           </Link>
         ) : null}