Merge pull request #9914 from brave/vpn_webui

Added select location ui on brave vpn w/o service logic

browser/brave_content_browser_client.cc

@@ -388,14 +388,14 @@ void BraveContentBrowserClient::RegisterBrowserInterfaceBindersForFrame(
       brave_wallet::mojom::PanelHandlerFactory, WalletPanelUI>(map);
   chrome::internal::RegisterWebUIControllerInterfaceBinder<
       brave_wallet::mojom::PageHandlerFactory, WalletPageUI>(map);
+#endif
+#endif
 #if BUILDFLAG(ENABLE_BRAVE_VPN) && !defined(OS_ANDROID)
   if (brave_vpn::IsBraveVPNEnabled()) {
     chrome::internal::RegisterWebUIControllerInterfaceBinder<
         brave_vpn::mojom::PanelHandlerFactory, VPNPanelUI>(map);
   }
 #endif
-#endif
-#endif
 }
 
 bool BraveContentBrowserClient::HandleExternalProtocol(

components/brave_vpn/resources/panel/components/panel-box/index.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import * as S from './style'
+
+interface Props {
+  children: React.ReactNode
+}
+
+function PanelBox (props: Props) {
+  return (
+    <S.Box>
+      {props.children}
+      <S.Waves />
+    </S.Box>
+  )
+}
+
+export default PanelBox

components/brave_vpn/resources/panel/components/panel-box/style.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import wavesLightUrl from '../../assets/svg-icons/waves-light.svg'
+
+export const Box = styled.div`
+  width: 100%;
+  height: 100%;
+  max-height: 450px;
+  background: ${(p) => p.theme.color.panelBackground};
+  position: relative;
+  overflow: hidden;
+`
+export const Waves = styled.div`
+  width: 100%;
+  height: 100%;
+  background-image: url(${wavesLightUrl});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  user-select: none;
+  pointer-events: none;
+`

components/brave_vpn/resources/panel/components/region-selector-button/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as S from './style'
+import { CaratStrongRightIcon } from 'brave-ui/components/icons'
+
+interface Props {
+  region: string
+  onClick: Function
+}
+
+function RegionSelectorButton (props: Props) {
+  const handleOnClick = () => {
+    props.onClick()
+  }
+
+  return (
+    <S.Box
+      type='button'
+      onClick={handleOnClick}
+    >
+      <S.RegionLabel>{props.region}</S.RegionLabel>
+      <CaratStrongRightIcon />
+    </S.Box>
+  )
+}
+
+export default RegionSelectorButton

components/brave_vpn/resources/panel/components/region-selector-button/style.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+export const Box = styled.button`
+  --region-label-color: ${(p) => p.theme.color.text01};
+  --svg-color: ${(p) => p.theme.color.text01};
+  --border-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 260px;
+  height: 48px;
+  border-radius: 38px;
+  border: 4px solid var(--border-color);
+  box-shadow: 0px 0px 16px rgba(99, 105, 110, 0.18);
+  background-color: ${(p) => p.theme.color.background02};
+  padding: 0 16px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  svg>path {
+    fill: var(--svg-color);
+  }
+
+  &:hover {
+    --region-label-color: ${(p) => p.theme.color.interactive05};
+    --svg-color: ${(p) => p.theme.color.interactive05};
+  }
+
+  &:focus {
+    --border-color: #A0A5EB;
+  }
+`
+
+export const RegionLabel = styled.span`
+  font-family: Poppins;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--region-label-color);
+  letter-spacing: 0.04em;
+`