Skip to content

Commit 39694c2

Browse files
flavioislimaflavioislima
authored
[Fix] SVG Icons not correctly loaded (#33)
* feat: add logos as RC and export them * chore: disable update check * fix: tray icons unpack * feat: replace img with React SVG icons * fix: Sidebar logo * fix: tray icons name * fix: app name
1 parent b0f0b2a commit 39694c2

File tree

13 files changed

+74
-45
lines changed

13 files changed

+74
-45
lines changed

‎.devcontainer/devcontainer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "Heroic Games Launcher",
2+
"name": "HyperPlay",
33

44
// Sets the run context to one level up instead of the .devcontainer folder.
55
"context": "..",

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Heroic Games Launcher</title>
6+
<title>HyperPlay</title>
77
<script type="module" src="/src/frontend/index.tsx"></script>
88
</head>
99
<body>

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "hyperplay",
3-
"version": "0.0.1-beta.1",
3+
"version": "0.0.1-alpha.1",
44
"private": true,
55
"main": "build/electron/main.js",
66
"homepage": "./",
@@ -27,8 +27,8 @@
2727
"build/icon.png",
2828
"build/icon.icns",
2929
"build/win_icon.ico",
30-
"build/icon-dark.png",
31-
"build/icon-light.png"
30+
"build/trayIconLight24x24.png",
31+
"build/trayIconDark24x24.png"
3232
],
3333
"protocols": [
3434
{

‎src/backend/updater.ts

+17-7
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { autoUpdater } from 'electron-updater'
33
import { t } from 'i18next'
44

55
import { icon } from './constants'
6-
import { logError, LogPrefix } from './logger/logger'
76
import { nativeImage } from 'electron'
7+
import { logError, LogPrefix } from './logger/logger'
88

99
autoUpdater.autoDownload = false
1010
autoUpdater.autoInstallOnAppQuit = false
@@ -47,12 +47,22 @@ autoUpdater.on('update-downloaded', async () => {
4747
})
4848

4949
autoUpdater.on('error', (err) => {
50-
dialog.showErrorBox(
51-
t('box.error.update.title', 'Update Error'),
52-
t(
53-
'box.error.update.message',
54-
'Something went wrong with the update, please check the logs or try again later!'
55-
)
50+
logError(
51+
[
52+
t('box.error.update.title', 'Update Error'),
53+
t(
54+
'box.error.update.message',
55+
'Something went wrong with the update, please check the logs or try again later!'
56+
)
57+
],
58+
LogPrefix.Backend
5659
)
60+
// dialog.showErrorBox(
61+
// t('box.error.update.title', 'Update Error'),
62+
// t(
63+
// 'box.error.update.message',
64+
// 'Something went wrong with the update, please check the logs or try again later!'
65+
// )
66+
// )
5767
logError(['failed to update', `${err}`], LogPrefix.Backend, false)
5868
})

‎src/frontend/assets/hyperplay/index.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ReactComponent as BackArrow } from './back_arrow.svg'
2+
import { ReactComponent as CloseX } from './close_x.svg'
3+
import { ReactComponent as HyperPlayLogo } from './hyperplay_logo.svg'
4+
import { ReactComponent as HyperPlayLogoGreen } from './hyperplay_logo_green.svg'
5+
import { ReactComponent as HyperPlayLogoRed } from './hyperplay_logo_red.svg'
6+
import { ReactComponent as HyperPlayLogoWhite } from './hyperplay_logo_white.svg'
7+
import { ReactComponent as Disconnected } from './disconnected.svg'
8+
import { ReactComponent as ForwardArrow } from './forward_arrow.svg'
9+
import { ReactComponent as MMTransparent } from './mm_icon_md_transparent.svg'
10+
import { ReactComponent as PlusIcon } from './plus.svg'
11+
import { ReactComponent as RejectedIcon } from './rejected.svg'
12+
import { ReactComponent as SuccessIcon } from './success.svg'
13+
import { ReactComponent as WCBlue } from './walletconnect_icon_blue.svg'
14+
15+
export {
16+
BackArrow,
17+
CloseX,
18+
HyperPlayLogo,
19+
HyperPlayLogoGreen,
20+
HyperPlayLogoWhite,
21+
HyperPlayLogoRed,
22+
MMTransparent,
23+
ForwardArrow,
24+
Disconnected,
25+
PlusIcon,
26+
RejectedIcon,
27+
SuccessIcon,
28+
WCBlue
29+
}

‎src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import ContextProvider from 'frontend/state/ContextProvider'
1919
import { Runner, GameInfo } from 'common/types'
2020
import './index.css'
2121
import QuitButton from '../QuitButton'
22+
import { HyperPlayLogoWhite } from 'frontend/assets/hyperplay'
2223

2324
interface LocationState {
2425
fromGameCard: boolean
@@ -100,9 +101,10 @@ export default function SidebarLinks() {
100101
return (
101102
<div className="SidebarLinks Sidebar__section">
102103
<div className="hyperplaySidebarLogoContainer">
103-
<img
104+
<HyperPlayLogoWhite
105+
height={64}
106+
width={64}
104107
className="hyperplaySidebarLogo"
105-
src="/src/frontend/assets/hyperplay/hyperplay_logo_white.svg"
106108
/>
107109
</div>
108110
<h6 className="Sidebar__categoryTitle">GAMES</h6>

‎src/frontend/components/UI/Sidebar/components/wallet/index.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import './index.css'
22
import React, { useState } from 'react'
33
import Blockies from 'react-blockies'
44
import classNames from 'classnames'
5+
import { Disconnected } from 'frontend/assets/hyperplay'
56

67
interface WalletProps {
78
onClick: () => void
@@ -27,12 +28,7 @@ const Wallet: React.FC<WalletProps> = function (props) {
2728

2829
const getProfilePic = function () {
2930
if (walletText === disconnectedText) {
30-
return (
31-
<img
32-
src={'/src/frontend/assets/hyperplay/disconnected.svg'}
33-
className="Sidebar__itemIcon disconnectedImg"
34-
></img>
35-
)
31+
return <Disconnected className="Sidebar__itemIcon disconnectedImg" />
3632
}
3733
const itemIconCssClass = 'Sidebar__itemIcon'
3834
const itemElem = document.querySelector('.' + itemIconCssClass)

‎src/frontend/screens/Onboarding/components/walletOption/index.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
import './index.css'
22
import React from 'react'
3+
import { ForwardArrow } from 'frontend/assets/hyperplay'
34

45
interface WalletOptionProps {
56
title: string
67
subtext: string
7-
icon: string
8+
icon: React.ReactNode
89
onClick: () => void
910
}
1011

1112
const WalletOption: React.FC<WalletOptionProps> = function (props) {
1213
return (
1314
<button className="walletOption" onClick={() => props.onClick()}>
1415
<div className="optionContent">
15-
<div className="walletOptionIcon">
16-
<img className="walletOptionIcon" src={props.icon}></img>
17-
</div>
16+
<div className="walletOptionIcon">{props.icon}</div>
1817
<div className="walletOptionContent">
1918
<div className="subtitle walletOptionTitleText">{props.title}</div>
2019
<div className="content-sm walletOptionSubtext">{props.subtext}</div>
2120
</div>
2221
</div>
23-
<img
24-
className="walletOptionArrow"
25-
src="/src/frontend/assets/hyperplay/forward_arrow.svg"
26-
></img>
22+
<ForwardArrow className="walletOptionArrow" />
2723
</button>
2824
)
2925
}

‎src/frontend/screens/Onboarding/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { WrapRendererCallback } from 'common/types'
1515
import Success from './success'
1616
import Rejected from './rejected'
1717
import Download from './download'
18+
import { BackArrow, CloseX } from 'frontend/assets/hyperplay'
1819

1920
interface OnboardingProps {
2021
disableOnboarding: () => void
@@ -178,7 +179,7 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
178179
setContentParams({ content: ONBOARDING_CONTENT.WELCOME })
179180
}
180181
>
181-
<img src="/src/frontend/assets/hyperplay/back_arrow.svg"></img>
182+
<BackArrow />
182183
</button>
183184
<h6 className="welcomeTitle">{onboardingParams.title}</h6>
184185
<button
@@ -189,7 +190,7 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
189190
}
190191
onClick={() => props.disableOnboarding()}
191192
>
192-
<img src="/src/frontend/assets/hyperplay/close_x.svg"></img>
193+
<CloseX />
193194
</button>
194195
</div>
195196
<div className="contentContainer">

‎src/frontend/screens/Onboarding/rejected/index.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import './index.css'
22
import React, { useEffect } from 'react'
33
import { OnboardingModalConfig } from '../types'
44
import YesNoActionButtons from '../components/yesNoActionButtons'
5+
import { RejectedIcon } from 'frontend/assets/hyperplay'
56

67
interface RejectedProps {
78
setOnboardingModalParams: React.Dispatch<Partial<OnboardingModalConfig>>
@@ -24,10 +25,7 @@ const Rejected: React.FC<RejectedProps> = function (props) {
2425
connecting to proceed.
2526
</div>
2627
<div className="rejectedImgContainer">
27-
<img
28-
src="/src/frontend/assets/hyperplay/rejected.svg"
29-
className="rejectedImg"
30-
></img>
28+
<RejectedIcon className="rejectedImg" />
3129
</div>
3230
<YesNoActionButtons
3331
yesText="CONNECT"

‎src/frontend/screens/Onboarding/scan/index.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HyperPlayLogo } from 'frontend/assets/hyperplay'
12
import React, { useEffect } from 'react'
23
import QrCodeGradientBorder from '../components/qrCodeGradientBorder'
34
import { OnboardingModalConfig } from '../types'
@@ -33,10 +34,7 @@ const Scan: React.FC<ScanProps> = function (props) {
3334
src={props.providerImg}
3435
className="providerImg connectingFrom"
3536
></img>
36-
<img
37-
src="/src/frontend/assets/hyperplay/hyperplay_logo.svg"
38-
className="providerImg connectingTo"
39-
></img>
37+
<HyperPlayLogo className="providerImg connectingTo" />
4038
</div>
4139
<QrCodeGradientBorder qrUrl={url} imageMargin="-14px" />
4240
<button

‎src/frontend/screens/Onboarding/success/index.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
22
import { OnboardingModalConfig } from '../types'
33
import { wait } from '../../../../common/types/proxy-types'
44
import './index.css'
5+
import { SuccessIcon } from 'frontend/assets/hyperplay'
56

67
interface SuccessParams {
78
setOnboardingModalParams: React.Dispatch<Partial<OnboardingModalConfig>>
@@ -25,10 +26,7 @@ const Success: React.FC<SuccessParams> = function (props) {
2526
Your wallet is now connected! You&apos;re ready to game.{' '}
2627
</div>
2728
<div className="successImgContainer">
28-
<img
29-
src="/src/frontend/assets/hyperplay/success.svg"
30-
className="successImg"
31-
></img>
29+
<SuccessIcon className="successImg" />
3230
</div>
3331
</div>
3432
)

‎src/frontend/screens/Onboarding/welcome/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import WalletOption from '../components/walletOption'
33
import { PROVIDERS } from 'common/types/proxy-types'
44
import './index.css'
55
import { OnboardingModalConfig } from '../types'
6+
import { MMTransparent, PlusIcon, WCBlue } from 'frontend/assets/hyperplay'
67

78
interface WelcomeProps {
89
handleProviderClicked: (provider: PROVIDERS) => void
@@ -31,19 +32,19 @@ const Welcome: React.FC<WelcomeProps> = function (props) {
3132
<WalletOption
3233
title="MetaMask Mobile"
3334
subtext="Connect with MetaMask Mobile"
34-
icon="/src/frontend/assets/hyperplay/mm_icon_md_transparent.svg"
35+
icon={<MMTransparent height={34} width={34} />}
3536
onClick={() => providerClicked(PROVIDERS.METAMASK_MOBILE)}
3637
/>
3738
<WalletOption
3839
title="WalletConnect"
3940
subtext="Connect with WalletConnect"
40-
icon="/src/frontend/assets/hyperplay/walletconnect_icon_blue.svg"
41+
icon={<WCBlue height={34} width={34} />}
4142
onClick={() => providerClicked(PROVIDERS.WALLET_CONNECT)}
4243
/>
4344
<WalletOption
4445
title="Create new wallet"
4546
subtext="Download MetaMask Mobile"
46-
icon="/src/frontend/assets/hyperplay/plus.svg"
47+
icon={<PlusIcon height={34} width={34} />}
4748
onClick={() => props.downloadMetaMaskClicked()}
4849
/>
4950
<button

0 commit comments

Comments
 (0)