From 20cdc3de75e4b209f984b79c687cca257c560943 Mon Sep 17 00:00:00 2001 From: Badi Ifaoui Date: Tue, 12 Dec 2023 12:29:13 +0100 Subject: [PATCH] feat: homescreen ui (#17) --- components.json | 3 +- res/css/superhero/custom.css | 59 ++++++++++++++ .../superhero/img/arts/chat-screenshot.svg | 43 ++++++++++ res/themes/superhero/img/icons/chrome.svg | 11 +++ res/themes/superhero/img/icons/firefox.svg | 81 +++++++++++++++++++ .../superhero/img/logos/superhero-logo.svg | 13 ++- src/components/structures/HomePage.tsx | 80 ++++++++++++++++++ 7 files changed, 286 insertions(+), 4 deletions(-) create mode 100644 res/themes/superhero/img/arts/chat-screenshot.svg create mode 100644 res/themes/superhero/img/icons/chrome.svg create mode 100644 res/themes/superhero/img/icons/firefox.svg create mode 100644 src/components/structures/HomePage.tsx diff --git a/components.json b/components.json index 2c7bb36186..b1b0c988c9 100644 --- a/components.json +++ b/components.json @@ -12,5 +12,6 @@ "src/editor/commands.tsx": "src/editor/commands.tsx", "src/autocomplete/Autocompleter.ts": "src/autocomplete/Autocompleter.ts", "src/components/views/dialogs/InviteDialog.tsx": "src/components/views/dialogs/InviteDialog.tsx", - "src/components/views/right_panel/UserInfo.tsx": "src/components/views/right_panel/UserInfo.tsx" + "src/components/views/right_panel/UserInfo.tsx": "src/components/views/right_panel/UserInfo.tsx", + "src/components/structures/HomePage.tsx": "src/components/structures/HomePage.tsx" } diff --git a/res/css/superhero/custom.css b/res/css/superhero/custom.css index 9ee14d4de9..88358b8034 100644 --- a/res/css/superhero/custom.css +++ b/res/css/superhero/custom.css @@ -822,3 +822,62 @@ h2 .sh_VerifiedIcon { --cpd-color-gray-200: #181a1f; --cpd-color-gray-100: #14171b; */ } + +.mx_HomePage_title { + font-size: 38px; + font-weight: 700; + line-height: 45px; + letter-spacing: 0em; + text-align: left; + color: #1b1d22; + margin-bottom: 24px; + align-items: center; + display: flex; + align-items: center; +} + +@media (max-width: 1250px) { + .mx_HomePage_title { + flex-direction: column; + } +} + +.cpd-theme-dark .mx_HomePage_title { + color: #ffffff; +} + +.mx_HomePage_title svg { + heigh: 44px; + width: 173.99px; + margin-right: 8px; +} + +.mx_HomePage_default_buttons_title { + font-size: 32px; +} +.cpd-theme-dark .mx_HomePage_default_buttons_title { + opacity: 0.7; +} + +.mx_HomePage_default .mx_HomePage_default_buttons { + margin: 10px auto 0 !important; +} + +.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom { + width: auto !important; + min-height: auto !important; + padding: 16px 30px !important; + align-items: center; + display: flex; + flex-direction: column; +} +.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom svg { + width: 50px !important; + height: 50px !important; + display: block !important; + margin-bottom: 4px; +} + +.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom::before { + display: none !important; +} diff --git a/res/themes/superhero/img/arts/chat-screenshot.svg b/res/themes/superhero/img/arts/chat-screenshot.svg new file mode 100644 index 0000000000..3d3312078e --- /dev/null +++ b/res/themes/superhero/img/arts/chat-screenshot.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/themes/superhero/img/icons/chrome.svg b/res/themes/superhero/img/icons/chrome.svg new file mode 100644 index 0000000000..e88225dcde --- /dev/null +++ b/res/themes/superhero/img/icons/chrome.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/res/themes/superhero/img/icons/firefox.svg b/res/themes/superhero/img/icons/firefox.svg new file mode 100644 index 0000000000..758bb73978 --- /dev/null +++ b/res/themes/superhero/img/icons/firefox.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/themes/superhero/img/logos/superhero-logo.svg b/res/themes/superhero/img/logos/superhero-logo.svg index 1ff4ef7bfe..f87ee95894 100644 --- a/res/themes/superhero/img/logos/superhero-logo.svg +++ b/res/themes/superhero/img/logos/superhero-logo.svg @@ -1,4 +1,11 @@ - - - + + + + + + + + + + diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx new file mode 100644 index 0000000000..cc6bcf1fff --- /dev/null +++ b/src/components/structures/HomePage.tsx @@ -0,0 +1,80 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import SdkConfig from "matrix-react-sdk/src/SdkConfig"; +import AutoHideScrollbar from "matrix-react-sdk/src/components/structures/AutoHideScrollbar"; +import EmbeddedPage from "matrix-react-sdk/src/components/structures/EmbeddedPage"; +import AccessibleButton from "matrix-react-sdk/src/components/views/elements/AccessibleButton"; +import { useMatrixClientContext } from "matrix-react-sdk/src/contexts/MatrixClientContext"; +import { getHomePageUrl } from "matrix-react-sdk/src/utils/pages"; +import * as React from "react"; + +import { Icon as ChatScreenShot } from "../../../res/themes/superhero/img/arts/chat-screenshot.svg"; +import { Icon as ChromeIcon } from "../../../res/themes/superhero/img/icons/chrome.svg"; +import { Icon as FirefoxIcon } from "../../../res/themes/superhero/img/icons/firefox.svg"; +import { Icon as SuperheroLogo } from "../../../res/themes/superhero/img/logos/superhero-logo.svg"; + +interface IProps { + justRegistered?: boolean; +} + +const HomePage: React.FC = () => { + const cli = useMatrixClientContext(); + const config = SdkConfig.get(); + const pageUrl = getHomePageUrl(config, cli); + + if (pageUrl) { + return ; + } + + return ( + +
+ +
+ +
is so much better with our Wallet
+
+
Download extension for your browser
+
+ { + window.open("https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/", "_blank"); + }} + className="mx_HomePage_button_custom" + > + + from Firefox Add-ons + + { + window.open( + "https://chromewebstore.google.com/detail/superhero/mnhmmkepfddpifjkamaligfeemcbhdne", + "_blank", + ); + }} + className="mx_HomePage_button_custom" + > + + from Chrome Web Store + +
+
+ + ); +}; + +export default HomePage;