diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index bab1b55d13e..a85b48a2d73 100644 --- a/CHANGELOG.unreleased.md +++ b/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) diff --git a/frontend/javascripts/admin/welcome_ui.tsx b/frontend/javascripts/admin/welcome_ui.tsx index 2f673a1f8ac..9af6b205cfe 100644 --- a/frontend/javascripts/admin/welcome_ui.tsx +++ b/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

{title}

{description}

- ); @@ -81,58 +73,49 @@ export const WhatsNextHeader = ({ activeUser, onDismiss }: WhatsNextHeaderProps)
-

Welcome to WEBKNOSSOS!

-
-

- Congratulations on your new WEBKNOSSOS account! To hit the ground running, we - recommend the following steps to you: -

-
+

Welcome to WEBKNOSSOS

+

+ Congratulations on your new WEBKNOSSOS account! To hit the ground running, we recommend + the following steps to you: +

+
+ } + /> + + {isUserAdminOrDatasetManager(activeUser) ? ( } + title="Import Your Own Data" + description="Directly upload your data as a zip file." + to="/datasets/upload" + icon={} /> + ) : null} - {isUserAdminOrDatasetManager(activeUser) ? ( - } - /> - ) : null} - + } + href="https://www.youtube.com/watch?v=jsz0tc3tuKI&t=30s" + /> + {isUserAdminOrTeamManager(activeUser) ? ( } - 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={} + onClick={() => { + renderIndependently((destroy) => ( + + )); + }} /> - {isUserAdminOrTeamManager(activeUser) ? ( - } - onClick={() => { - renderIndependently((destroy) => ( - - )); - }} - /> - ) : null} -
+ ) : null}
diff --git a/frontend/stylesheets/_dashboard.less b/frontend/stylesheets/_dashboard.less index 39b3b3f3b94..f65acd77e78 100644 --- a/frontend/stylesheets/_dashboard.less +++ b/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; + } } } } diff --git a/frontend/stylesheets/dark.less b/frontend/stylesheets/dark.less index c309194cd0c..8e0817c5648 100644 --- a/frontend/stylesheets/dark.less +++ b/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 { diff --git a/public/images/icon-annotate.svg b/public/images/icon-annotate.svg new file mode 100644 index 00000000000..90def37b0d7 --- /dev/null +++ b/public/images/icon-annotate.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icon-import-own-data.svg b/public/images/icon-import-own-data.svg new file mode 100644 index 00000000000..b68c41b6c6e --- /dev/null +++ b/public/images/icon-import-own-data.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icon-invite-colleagues.svg b/public/images/icon-invite-colleagues.svg new file mode 100644 index 00000000000..1ab337f4166 --- /dev/null +++ b/public/images/icon-invite-colleagues.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icon-open-demo.svg b/public/images/icon-open-demo.svg new file mode 100644 index 00000000000..e04bdaf08b4 --- /dev/null +++ b/public/images/icon-open-demo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +