Redesign "Welcome" toast

CHANGELOG.unreleased.md

@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Changed
 - Moved the view mode selection in the toolbar next to the position field. [#6949](https://github.com/scalableminds/webknossos/pull/6949)
+- Redesigned welcome toast for new, annonymous users with new branding. [#6961](https://github.com/scalableminds/webknossos/pull/6961)
 
 ### Fixed
 - Fixed incorrect initial tab when clicking "Show Annotations" for a user in the user list. Also, the datasets tab was removed from that page as it was the same as the datasets table from the main dashboard. [#6957](https://github.com/scalableminds/webknossos/pull/6957)

frontend/javascripts/oxalis/view/novel_user_experiences/welcome_toast.tsx

@@ -7,45 +7,42 @@ import { OxalisState } from "oxalis/store";
 
 function showWelcomeToast() {
   notification.open({
-    message: (
-      <div>
-        <span className="logo" />
-        Welcome to WEBKNOSSOS!
-      </div>
-    ),
+    className: "webknossos-welcome-toast",
+    duration: 0,
+    placement: "bottomRight",
+    style: {
+      width: 360,
+    },
+    icon: <i className="logo" />,
+    message: "Welcome to WEBKNOSSOS",
     description: (
       <div>
-        WEBKNOSSOS is a web-based platform for visualization, annotation, and sharing of large-scale
-        3D image datasets. Try out the annotation features and upload your own data with a free
-        account.
-        <div
-          style={{
-            marginTop: 12,
-          }}
-        >
-          <Button type="primary" href="/auth/signup" target="_blank" rel="noopener noreferrer">
+        <p>
+          WEBKNOSSOS is a web-based platform for visualization, annotation, and sharing of
+          large-scale 3D image datasets.
+        </p>
+        <p>Try out the annotation features and upload your own data with a free account.</p>
+        <div>
+          <Button type="default" href="/auth/signup" target="_blank" rel="noopener noreferrer">
             Create a free account
           </Button>
-          <Button
-            type="default"
-            href="https://webknossos.org/features"
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{
-              borderColor: "#eaeaea",
-              marginLeft: 12,
-            }}
-          >
-            Learn More
-          </Button>
+          <span className="drawing-welcome-guy">
+            <Button
+              ghost
+              type="default"
+              href="https://webknossos.org/features"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                marginLeft: 12,
+              }}
+            >
+              Learn More
+            </Button>
+          </span>
         </div>
       </div>
     ),
-    className: "webknossos-welcome-toast",
-    style: {
-      width: 600,
-    },
-    duration: 0,
   });
 }
 

frontend/stylesheets/main.less

@@ -384,48 +384,63 @@ i.without-icon-margin,
 }
 
 .webknossos-welcome-toast {
-  background: url(/assets/images/mesh_background.webp) 50% 50% / cover no-repeat, rgb(23, 103, 139);
-
-  &:before {
-    content: "";
-    background: linear-gradient(0deg, #222222d4 0%, rgba(23, 103, 139, 0.73) 100%);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
+  background-color: @primary-color;
+  color: white;
+
   .logo {
-    background: url(/assets/images/icon-only.svg) 15px center no-repeat;
-    padding-left: 105px;
-    height: 140px;
-    float: left;
-    margin-top: 2px;
-    margin-left: -15px;
-    background-size: 70px 70px;
+    background: url(/assets/images/logo-icon-only.svg) 15px center no-repeat;
+    filter: brightness(4);
+    width: 74px;
+    height: 50px;
+    background-size: 50px 50px;
+    display: inline-block;
   }
 
   .ant-notification-notice-content {
     position: relative;
   }
   .ant-notification-notice-message {
+    padding-left: 40px; 
+    margin-top: 20px;
+    margin-bottom: 30px;
     color: white;
     font-size: 24px;
-    font-weight: bold;
   }
 
   .ant-notification-notice-description {
     font-size: 16px;
     line-height: 21px;
-    color: #ececec;
+    color: white;
+    margin-left: 24px;
+
+    p {
+      margin-bottom: 30px;
+      margin-right: 60px;
+    }
+
+    .drawing-welcome-guy{
+      position: relative;
+
+      &:before {
+        width: 53px;
+        height: 100px;
+        display: block;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        content: " ";
+        transform: translate(15%, -104%);
+        background-image: url(/assets/images/drawings/waving-person.svg);
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
   }
 
   .ant-notification-notice-close {
     color: white;
   }
 
-  color: white;
 }
 
 .no-borders {