chore: update all login images, use srcset
@ -41,7 +41,6 @@
|
||||
"react-intersection-observer": "^9.5.1",
|
||||
"react-intl": "^6.4.4",
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-progressive-graceful-image": "^0.7.0",
|
||||
"react-router-dom": "^6.13.0",
|
||||
"react-tag-input-component": "^2.0.2",
|
||||
"semantic-sdp": "^3.26.3",
|
||||
|
@ -1,10 +1,14 @@
|
||||
import "./login-signup.css";
|
||||
import LoginHeader from "../login-start.jpg";
|
||||
import LoginHeaderSmall from "../login-start-sm.jpg";
|
||||
import LoginVault from "../login-vault.png";
|
||||
import LoginProfile from "../login-profile.png";
|
||||
import LoginKey from "../login-key.png";
|
||||
import LoginWallet from "../login-wallet.png";
|
||||
import LoginHeader2x from "../login-start@2x.jpg";
|
||||
import LoginVault from "../login-vault.jpg";
|
||||
import LoginVault2x from "../login-vault@2x.jpg";
|
||||
import LoginProfile from "../login-profile.jpg";
|
||||
import LoginProfile2x from "../login-profile@2x.jpg";
|
||||
import LoginKey from "../login-key.jpg";
|
||||
import LoginKey2x from "../login-key@2x.jpg";
|
||||
import LoginWallet from "../login-wallet.jpg";
|
||||
import LoginWallet2x from "../login-wallet@2x.jpg";
|
||||
|
||||
import { CSSProperties, useState } from "react";
|
||||
import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
|
||||
@ -22,7 +26,6 @@ import { hexToBech32, openFile } from "utils";
|
||||
import { LoginType } from "login";
|
||||
import { DefaultProvider, StreamProviderInfo } from "providers";
|
||||
import { Nip103StreamProvider } from "providers/zsz";
|
||||
import ProgressiveImage from "react-progressive-graceful-image";
|
||||
|
||||
enum Stage {
|
||||
Login = 0,
|
||||
@ -149,9 +152,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.Login: {
|
||||
return (
|
||||
<>
|
||||
<ProgressiveImage src={LoginHeader as string} placeholder={LoginHeaderSmall}>
|
||||
{(src) => <img src={src} className="header-image" />}
|
||||
</ProgressiveImage>
|
||||
<img src={LoginHeader as string} srcSet={`${LoginHeader2x} 2x`} className="header-image" />
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Create an Account" />
|
||||
@ -186,7 +187,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.LoginInput: {
|
||||
return (
|
||||
<>
|
||||
<img src={LoginVault} className="header-image" />
|
||||
<img src={LoginVault as string} srcSet={`${LoginVault2x} 2x`} className="header-image" />
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Login with private key" />
|
||||
@ -236,7 +237,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.Details: {
|
||||
return (
|
||||
<>
|
||||
<img src={LoginProfile} className="header-image" />
|
||||
<img src={LoginProfile as string} srcSet={`${LoginProfile2x} 2x`} className="header-image" />
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Setup Profile" />
|
||||
@ -276,7 +277,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.LnAddress: {
|
||||
return (
|
||||
<>
|
||||
<img src={LoginWallet} className="header-image" />
|
||||
<img src={LoginWallet as string} srcSet={`${LoginWallet2x} 2x`} className="header-image" />
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Get paid by viewers" />
|
||||
@ -318,7 +319,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.SaveKey: {
|
||||
return (
|
||||
<>
|
||||
<img src={LoginKey} className="header-image" />
|
||||
<img src={LoginKey as string} srcSet={`${LoginKey2x} 2x`} className="header-image" />
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Save Key" />
|
||||
|
BIN
src/login-invite.jpg
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
src/login-invite@2x.jpg
Normal file
After Width: | Height: | Size: 112 KiB |
BIN
src/login-key.jpg
Normal file
After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 934 KiB |
BIN
src/login-key@2x.jpg
Normal file
After Width: | Height: | Size: 143 KiB |
BIN
src/login-profile.jpg
Normal file
After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 3.4 MiB |
BIN
src/login-profile@2x.jpg
Normal file
After Width: | Height: | Size: 132 KiB |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 31 KiB |
BIN
src/login-start@2x.jpg
Normal file
After Width: | Height: | Size: 89 KiB |
BIN
src/login-vault.jpg
Normal file
After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 520 KiB |
BIN
src/login-vault@2x.jpg
Normal file
After Width: | Height: | Size: 247 KiB |
BIN
src/login-wallet.jpg
Normal file
After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 699 KiB |
BIN
src/login-wallet@2x.jpg
Normal file
After Width: | Height: | Size: 109 KiB |
23
yarn.lock
@ -2379,16 +2379,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@researchgate/react-intersection-observer@npm:^1.3.5":
|
||||
version: 1.3.5
|
||||
resolution: "@researchgate/react-intersection-observer@npm:1.3.5"
|
||||
peerDependencies:
|
||||
react: ^16.3.2
|
||||
react-dom: ^16.3.2
|
||||
checksum: b773ad4de12c58ffcb25ae2e5487dd0e2f5e0d944148695b9f90726cf9f847b757a1c7624586470ddb8eca2a9580fe9fd63edc2a9ee2cf0e4d6dad0c04eb81cd
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rollup/plugin-babel@npm:^5.2.0":
|
||||
version: 5.3.1
|
||||
resolution: "@rollup/plugin-babel@npm:5.3.1"
|
||||
@ -9005,18 +8995,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-progressive-graceful-image@npm:^0.7.0":
|
||||
version: 0.7.0
|
||||
resolution: "react-progressive-graceful-image@npm:0.7.0"
|
||||
dependencies:
|
||||
"@researchgate/react-intersection-observer": ^1.3.5
|
||||
peerDependencies:
|
||||
react: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
|
||||
react-dom: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
|
||||
checksum: fdec390b19c0d2d07129a89bb954936b7200a02bc7f6a2031db75d6a1805a1022d5425db13135d77f8d6ce53f7d64390a7b8cfa5be443bc9e027066572fe47af
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-remove-scroll-bar@npm:^2.3.3":
|
||||
version: 2.3.4
|
||||
resolution: "react-remove-scroll-bar@npm:2.3.4"
|
||||
@ -10003,7 +9981,6 @@ __metadata:
|
||||
react-intersection-observer: ^9.5.1
|
||||
react-intl: ^6.4.4
|
||||
react-markdown: ^8.0.7
|
||||
react-progressive-graceful-image: ^0.7.0
|
||||
react-router-dom: ^6.13.0
|
||||
react-tag-input-component: ^2.0.2
|
||||
semantic-sdp: ^3.26.3
|
||||
|