From 76a53d7fa757fa059395aab2b1a1d6bcec09dbc4 Mon Sep 17 00:00:00 2001
From: Taher <8665427+nullhook@users.noreply.github.com>
Date: Tue, 6 Dec 2022 15:11:52 +0530
Subject: [PATCH] Resolved feedback
---
browser/ui/webui/brave_welcome_ui.cc | 2 ++
.../brave_welcome_ui/brave_welcome.html | 4 +--
.../components/loader/index.tsx | 36 +++++++++++++++++++
.../components/welcome/index.tsx | 9 ++---
.../components/welcome/style.ts | 1 +
.../brave_welcome_ui/main_container.tsx | 3 +-
6 files changed, 48 insertions(+), 7 deletions(-)
create mode 100644 components/brave_welcome_ui/components/loader/index.tsx
diff --git a/browser/ui/webui/brave_welcome_ui.cc b/browser/ui/webui/brave_welcome_ui.cc
index fd7d89ed5f95..e863dedcc691 100644
--- a/browser/ui/webui/brave_welcome_ui.cc
+++ b/browser/ui/webui/brave_welcome_ui.cc
@@ -282,6 +282,8 @@ BraveWelcomeUI::BraveWelcomeUI(content::WebUI* web_ui, const std::string& name)
content::GpuDataManager::GetInstance()->HardwareAccelerationEnabled());
profile->GetPrefs()->SetBoolean(prefs::kHasSeenWelcomePage, true);
+
+ AddBackgroundColorToSource(source, web_ui->GetWebContents());
}
BraveWelcomeUI::~BraveWelcomeUI() = default;
diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html
index 890b56cc9aee..4a0eee481a1f 100644
--- a/components/brave_welcome_ui/brave_welcome.html
+++ b/components/brave_welcome_ui/brave_welcome.html
@@ -12,15 +12,15 @@
#root { height: 100%; width: 100%; }
body {
- background: black;
height: 100vh;
margin: 0;
padding: 0;
+ background: $i18n{backgroundColor};
}
-
+
diff --git a/components/brave_welcome_ui/components/loader/index.tsx b/components/brave_welcome_ui/components/loader/index.tsx
new file mode 100644
index 000000000000..9507a1ac8bb1
--- /dev/null
+++ b/components/brave_welcome_ui/components/loader/index.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import styled from 'styled-components'
+import { LoaderIcon } from 'brave-ui/components/icons'
+
+const Loading = styled('div')`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+
+const Graphic = styled('div')`
+ width: 50px;
+ height: 50px;
+ align-self: center;
+
+ svg {
+ fill: white;
+ }
+`
+
+export default function Loader () {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/components/brave_welcome_ui/components/welcome/index.tsx b/components/brave_welcome_ui/components/welcome/index.tsx
index 97024578645e..c655a1c4d45f 100644
--- a/components/brave_welcome_ui/components/welcome/index.tsx
+++ b/components/brave_welcome_ui/components/welcome/index.tsx
@@ -4,18 +4,19 @@
// you can obtain one at https://mozilla.org/MPL/2.0/.
import * as React from 'react'
-import { getLocale } from '$web-common/locale'
-import classnames from '$web-common/classnames'
-
import * as S from './style'
+import classnames from '$web-common/classnames'
+import { getLocale } from '$web-common/locale'
+import Button from '$web-components/button'
+
import { WelcomeBrowserProxyImpl, DefaultBrowserBrowserProxyImpl } from '../../api/welcome_browser_proxy'
import WebAnimationPlayer from '../../api/web_animation_player'
+
import DataContext from '../../state/context'
import { ViewType } from '../../state/component_types'
import { useShouldPlayAnimations } from '../../state/hooks'
-import Button from '$web-components/button'
import braveLogoUrl from '../../assets/brave_logo_3d@2x.webp'
function Welcome () {
diff --git a/components/brave_welcome_ui/components/welcome/style.ts b/components/brave_welcome_ui/components/welcome/style.ts
index 4d6d1f263490..eb18f868c474 100644
--- a/components/brave_welcome_ui/components/welcome/style.ts
+++ b/components/brave_welcome_ui/components/welcome/style.ts
@@ -43,6 +43,7 @@ export const Box = styled.div`
position: relative;
z-index: 3;
+ // We define an initial state here if animations are enabled
&.initial {
transform: translateY(20px);
opacity: 0;
diff --git a/components/brave_welcome_ui/main_container.tsx b/components/brave_welcome_ui/main_container.tsx
index 3c6b0615b293..958a41cbdc63 100644
--- a/components/brave_welcome_ui/main_container.tsx
+++ b/components/brave_welcome_ui/main_container.tsx
@@ -13,6 +13,7 @@ import HelpImprove from './components/help-improve'
import ImportInProgress from './components/import-in-progress'
import Background from './components/background'
import Welcome from './components/welcome'
+import Loader from './components/loader'
const SelectBrowser = React.lazy(() => import('./components/select-browser'))
const SelectProfile = React.lazy(() => import('./components/select-profile'))
@@ -61,7 +62,7 @@ function MainContainer () {
static={!shouldPlayAnimations}
onLoad={onBackgroundImgLoad}
>
- Loading...}>
+ }>
{mainEl}