Fix welcome notification on wk.org (#7623)

* fix welcome notification on wk.org

* updated changelog

* overwride welcome toast ghost button hover color

CHANGELOG.unreleased.md

@@ -33,6 +33,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug in proofreading aka editable mapping annotations where splitting would sometimes give the new id to the selected segment rather than to the split-off one. [#7608](https://github.com/scalableminds/webknossos/pull/7608)
 - Fixed small styling errors as a follow up to the antd v5 upgrade [#7612](https://github.com/scalableminds/webknossos/pull/7612)
 -Fixed deprecation warnings caused by Antd <Collapse> components. [#7610](https://github.com/scalableminds/webknossos/pull/7610)
+- Fixed small styling error with a welcome notification for new users on webknossos.org. [7623](https://github.com/scalableminds/webknossos/pull/7623)
 
 
 ### Removed

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

@@ -10,9 +10,6 @@ function showWelcomeToast() {
     className: "webknossos-welcome-toast",
     duration: 0,
     placement: "bottomRight",
-    style: {
-      width: 360,
-    },
     icon: <i className="logo" />,
     message: "Welcome to WEBKNOSSOS",
     description: (

frontend/stylesheets/main.less

@@ -369,38 +369,35 @@ button.narrow {
 }
 
 .webknossos-welcome-toast {
-  background-color: var(--ant-color-primary);
-  color: white;
+  // small notification in the bottom right corner when you are viewing a dataset and you are not logged in
+  background-color: var(--color-wk-blue);
 
   .logo {
     background: url(/assets/images/logo-icon-only.svg) 15px center no-repeat;
     filter: brightness(4);
     width: 74px;
-    height: 50px;
-    background-size: 50px 50px;
+    height: 45px;
+    background-size: 45px 45px;
     display: inline-block;
   }
 
-  .ant-notification-notice-content {
-    position: relative;
-  }
   .ant-notification-notice-message {
     padding-left: 40px;
     margin-top: 20px;
-    margin-bottom: 30px;
-    color: white;
+    margin-bottom: 30px !important;
+    color: white !important;
     font-size: 24px;
   }
 
   .ant-notification-notice-description {
     font-size: 16px;
     line-height: 21px;
-    color: white;
-    margin-left: 24px;
+    color: white !important;
+    margin-inline-start: 24px !important;
 
     p {
       margin-bottom: 30px;
-      margin-right: 60px;
+      margin-inline-end: 60px;
     }
 
     .drawing-welcome-guy {
@@ -411,7 +408,7 @@ button.narrow {
         height: 100px;
         display: block;
         position: absolute;
-        top: 0px;
+        top: -5px;
         right: 0px;
         content: " ";
         transform: translate(15%, -104%);
@@ -420,6 +417,11 @@ button.narrow {
         background-size: cover;
       }
     }
+
+    .ant-btn-background-ghost:hover {
+      color: #bbb;
+      border-color: #bbb;
+    }
   }
 
   .ant-notification-notice-close {