Redesign Welcome UI (#6904)

* added flashy background image to signup

* prevent wrong colors in dark mode

* changelog

* use more less variables

* use smaller SVG file and revert change password view

* welcome header restyling (WIP)

* more styling changes

* added custom icons to welcome screen

* finalized icon styling for welcome screen

* updated changelog

* Update CHANGELOG.unreleased.md

Co-authored-by: Philipp Otto <[email protected]>

* fix formatting

---------

Co-authored-by: Philipp Otto <[email protected]>

Author: hotzenklotz

CHANGELOG.unreleased.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Changed
 - Upgraded antd UI library to v4.24.8 [#6865](https://github.com/scalableminds/webknossos/pull/6865)
 - The view mode dropdown was slimmed down by using icons to make the toolbar more space efficient. [#6900](https://github.com/scalableminds/webknossos/pull/6900)
+- Updated the styling of the "welcome" screen for new users to be in line with the new branding. [#6904](https://github.com/scalableminds/webknossos/pull/6904)
 
 ### Fixed
 - Fixed a bug where N5 datasets reading with end-chunks that have a chunk size differing from the metadata-supplied chunk size would fail for some areas. [#6890](https://github.com/scalableminds/webknossos/pull/6890)

frontend/javascripts/admin/welcome_ui.tsx

@@ -1,11 +1,4 @@
-import {
-  CloseOutlined,
-  CloudUploadOutlined,
-  MailOutlined,
-  PlayCircleOutlined,
-  PlusCircleOutlined,
-  RightOutlined,
-} from "@ant-design/icons";
+import { CloseOutlined } from "@ant-design/icons";
 import { Button, Tooltip } from "antd";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -31,7 +24,6 @@ const WhatsNextAction = ({ title, description, icon, onClick, href, to }: WhatsN
         <h2>{title}</h2>
         <p>{description}</p>
       </div>
-      <RightOutlined className="chevron" />
     </React.Fragment>
   );
 
@@ -81,58 +73,49 @@ export const WhatsNextHeader = ({ activeUser, onDismiss }: WhatsNextHeaderProps)
       </div>
       <div className="welcome-header-content">
         <div className="text-and-button-container">
-          <h1>Welcome to WEBKNOSSOS!</h1>
-          <div className="subtitle">
-            <p
-              style={{
-                fontSize: 20,
-                lineHeight: 1.5,
-                marginTop: 0,
-                marginBottom: 8,
-              }}
-            >
-              Congratulations on your new WEBKNOSSOS account! To hit the ground running, we
-              recommend the following steps to you:
-            </p>
-            <div className="whats-next-actions-grid">
+          <h1>Welcome to WEBKNOSSOS</h1>
+          <p className="subtitle">
+            Congratulations on your new WEBKNOSSOS account! To hit the ground running, we recommend
+            the following steps to you:
+          </p>
+          <div className="whats-next-actions-grid">
+            <WhatsNextAction
+              title="Open a Demo Dataset"
+              description="Have a look at a public dataset to experience WEBKNOSSOS in action."
+              href={getDemoDatasetUrl()}
+              icon={<i className="icon-open-demo" />}
+            />
+
+            {isUserAdminOrDatasetManager(activeUser) ? (
               <WhatsNextAction
-                title="Open a Demo Dataset"
-                description="Have a look at a public dataset to experience WEBKNOSSOS in action."
-                href={getDemoDatasetUrl()}
-                icon={<PlayCircleOutlined className="action-icon" />}
+                title="Import Your Own Data"
+                description="Directly upload your data as a zip file."
+                to="/datasets/upload"
+                icon={<i className="icon-import-own-data" />}
               />
+            ) : null}
 
-              {isUserAdminOrDatasetManager(activeUser) ? (
-                <WhatsNextAction
-                  title="Import Your Own Data"
-                  description="Directly upload your data as a zip file."
-                  to="/datasets/upload"
-                  icon={<CloudUploadOutlined className="action-icon" />}
-                />
-              ) : null}
-
+            <WhatsNextAction
+              title="Learn How To Create Annotations"
+              description="Watch a short video to see how data can be annotated with WEBKNOSSOS."
+              icon={<i className="icon-annotate" />}
+              href="https://www.youtube.com/watch?v=jsz0tc3tuKI&t=30s"
+            />
+            {isUserAdminOrTeamManager(activeUser) ? (
               <WhatsNextAction
-                title="Learn How To Create Annotations"
-                description="Watch a short video to see how data can be annotated with WEBKNOSSOS."
-                icon={<PlusCircleOutlined className="action-icon" />}
-                href="https://www.youtube.com/watch?v=jsz0tc3tuKI&t=30s"
+                title="Invite Your Colleagues"
+                description="Send email invites to your colleagues and ask them to join your organization."
+                icon={<i className="icon-invite-colleagues" />}
+                onClick={() => {
+                  renderIndependently((destroy) => (
+                    <InviteUsersModal
+                      organizationName={activeUser.organization}
+                      destroy={destroy}
+                    />
+                  ));
+                }}
               />
-              {isUserAdminOrTeamManager(activeUser) ? (
-                <WhatsNextAction
-                  title="Invite Your Colleagues"
-                  description="Send email invites to your colleagues and ask them to join your organization."
-                  icon={<MailOutlined className="action-icon" />}
-                  onClick={() => {
-                    renderIndependently((destroy) => (
-                      <InviteUsersModal
-                        organizationName={activeUser.organization}
-                        destroy={destroy}
-                      />
-                    ));
-                  }}
-                />
-              ) : null}
-            </div>
+            ) : null}
           </div>
         </div>
       </div>

frontend/stylesheets/_dashboard.less

@@ -28,41 +28,47 @@
 }
 
 .welcome-header-wrapper {
-  background-color: @component-background;
-  background-image: linear-gradient(0deg, @body-background 0%, @blue-1 70%);
+  background: @background-blue-neurons;
+  
+  button {
+    color: white
+  }
 }
 .welcome-header-content {
-  padding: 20px 0px 20px;
-
+  padding: 40px 0px 40px;
+  
   .text-and-button-container {
     max-width: 1000px;
     margin: auto;
 
     h1 {
-      color: @text-color;
-      margin-left: 56px;
+      color: white;
       font-weight: 200;
       font-size: 64px;
       line-height: 150%;
       margin-bottom: 0;
+      text-align: center;
     }
-
+    
     .subtitle {
-      margin: 0 20px 0px 60px;
+      color: white;
       font-weight: 300;
-      font-size: 20px;
+      font-size: 18px;
       line-height: 150%;
-      color: @text-color-secondary;
+      max-width: 70%;
+      text-align: center;
+      margin-left: auto;
+      margin-right: auto;
     }
 
     .whats-next-actions-grid {
       display: flex;
       flex-wrap: wrap;
-      justify-content: left;
+      justify-content: center;
       padding-inline-start: 0;
 
       a {
-        color: rgb(107, 114, 128);
+        color: @black;
         flex: 0 1 400px; /*  No stretching: */
         margin: 20px;
         margin-left: 0;
@@ -84,34 +90,27 @@
         h2 {
           font-size: 16px;
           line-height: 18px;
-          color: @text-color;
-          margin-bottom: 4px;
+          color: @black;
+          margin-bottom: 8px;
         }
 
         p {
           font-size: 14px;
           line-height: 18px;
-          color: @text-color-secondary;
+          color: @black;
           margin: 0;
         }
 
-        .chevron,
-        .action-icon {
-          font-size: 32px;
-          margin: 8px;
-        }
-
-        background: @component-background;
-        box-shadow: @box-shadow-base;
+        background: white;
         border-radius: 3px;
+        border: white 2px solid;
       }
 
       a:hover {
         background: @primary-color;
 
-        .chevron,
-        .action-icon {
-          color: @text-color-dark;
+        i {
+            filter: brightness(100);
         }
 
         h2 {
@@ -122,6 +121,28 @@
           color: @text-color-secondary-dark;
         }
       }
+
+    .icon-open-demo {
+        background-image: url(/assets/images/icon-open-demo.svg); 
+      };
+      .icon-import-own-data {
+        background-image: url(/assets/images/icon-import-own-data.svg); 
+        background-size: 94px;
+      };        
+      .icon-annotate {
+        background-image: url(/assets/images/icon-annotate.svg); 
+      };        
+      .icon-invite-colleagues {
+        background-image: url(/assets/images/icon-invite-colleagues.svg); 
+      };
+                        
+      i {
+        background-repeat: no-repeat;
+        background-size: 100px;
+        background-position: center;
+        height: 100%;
+        width: 64px;
+      }
     }
   }
 }

frontend/stylesheets/dark.less

@@ -5,10 +5,6 @@ body {
   background-color: #000;
 }
 
-.welcome-header-wrapper {
-  background-image: linear-gradient(0deg, @body-background 0%, @blue-2 70%);
-}
-
 .info-tab-block .info-tab-icon {
   filter: invert(1);
   svg {