mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-23 19:37:52 +00:00
re-arrange profile
This commit is contained in:
parent
8513907566
commit
bbad09b5f5
191
src/App.tsx
191
src/App.tsx
@ -144,6 +144,7 @@ import { isRunningGateway } from "./qortalRequests";
|
|||||||
import { QMailStatus } from "./components/QMailStatus";
|
import { QMailStatus } from "./components/QMailStatus";
|
||||||
import { GlobalActions } from "./components/GlobalActions/GlobalActions";
|
import { GlobalActions } from "./components/GlobalActions/GlobalActions";
|
||||||
import { useBlockedAddresses } from "./components/Group/useBlockUsers";
|
import { useBlockedAddresses } from "./components/Group/useBlockUsers";
|
||||||
|
import { WalletIcon } from "./assets/Icons/WalletIcon";
|
||||||
|
|
||||||
type extStates =
|
type extStates =
|
||||||
| "not-authenticated"
|
| "not-authenticated"
|
||||||
@ -1334,45 +1335,89 @@ function App() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderProfile = () => {
|
const renderProfileLeft = ()=> {
|
||||||
return (
|
|
||||||
<AuthenticatedContainer
|
return <AuthenticatedContainerInnerLeft
|
||||||
sx={{
|
|
||||||
width: isMobile ? "100vw" : "auto",
|
|
||||||
display: "flex",
|
|
||||||
backgroundColor: "var(--bg-2)",
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isMobile && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
padding: "10px",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseIcon
|
|
||||||
onClick={() => {
|
|
||||||
setIsOpenDrawerProfile(false);
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
cursor: "pointer",
|
|
||||||
color: "white",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{desktopViewMode !== "apps" &&
|
|
||||||
desktopViewMode !== "dev" &&
|
|
||||||
desktopViewMode !== "chat" && (
|
|
||||||
<AuthenticatedContainerInnerLeft
|
|
||||||
sx={{
|
sx={{
|
||||||
overflowY: isMobile && "auto",
|
overflowY: isMobile && "auto",
|
||||||
padding: "0px 20px",
|
padding: "0px 20px",
|
||||||
minWidth: "225px",
|
minWidth: "225px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Spacer height="20px" />
|
||||||
|
<Box sx={{
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-start'
|
||||||
|
}}>
|
||||||
|
{authenticatedMode === "qort" && (
|
||||||
|
<Tooltip
|
||||||
|
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
|
||||||
|
placement="left"
|
||||||
|
arrow
|
||||||
|
sx={{ fontSize: "24" }}
|
||||||
|
slotProps={{
|
||||||
|
tooltip: {
|
||||||
|
sx: {
|
||||||
|
color: "#ffffff",
|
||||||
|
backgroundColor: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
sx: {
|
||||||
|
color: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
onClick={() => {
|
||||||
|
|
||||||
|
setAuthenticatedMode("ltc");
|
||||||
|
}}
|
||||||
|
src={ltcLogo}
|
||||||
|
style={{
|
||||||
|
cursor: "pointer",
|
||||||
|
width: "20px",
|
||||||
|
height: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{authenticatedMode === "ltc" && (
|
||||||
|
<Tooltip
|
||||||
|
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>QORTAL WALLET</span>}
|
||||||
|
placement="left"
|
||||||
|
arrow
|
||||||
|
sx={{ fontSize: "24" }}
|
||||||
|
slotProps={{
|
||||||
|
tooltip: {
|
||||||
|
sx: {
|
||||||
|
color: "#ffffff",
|
||||||
|
backgroundColor: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
sx: {
|
||||||
|
color: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
onClick={() => {
|
||||||
|
setAuthenticatedMode("qort");
|
||||||
|
}}
|
||||||
|
src={qortLogo}
|
||||||
|
style={{
|
||||||
|
cursor: "pointer",
|
||||||
|
width: "20px",
|
||||||
|
height: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
<Spacer height="48px" />
|
<Spacer height="48px" />
|
||||||
|
|
||||||
{authenticatedMode === "ltc" ? (
|
{authenticatedMode === "ltc" ? (
|
||||||
@ -1526,6 +1571,43 @@ function App() {
|
|||||||
Get QORT at Q-Trade
|
Get QORT at Q-Trade
|
||||||
</TextP>
|
</TextP>
|
||||||
</AuthenticatedContainerInnerLeft>
|
</AuthenticatedContainerInnerLeft>
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderProfile = () => {
|
||||||
|
return (
|
||||||
|
<AuthenticatedContainer
|
||||||
|
sx={{
|
||||||
|
width: isMobile ? "100vw" : "auto",
|
||||||
|
display: "flex",
|
||||||
|
backgroundColor: "var(--bg-2)",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isMobile && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
padding: "10px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon
|
||||||
|
onClick={() => {
|
||||||
|
setIsOpenDrawerProfile(false);
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
cursor: "pointer",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{desktopViewMode !== "apps" &&
|
||||||
|
desktopViewMode !== "dev" &&
|
||||||
|
desktopViewMode !== "chat" && (
|
||||||
|
<>
|
||||||
|
{renderProfileLeft()}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<AuthenticatedContainerInnerRight
|
<AuthenticatedContainerInnerRight
|
||||||
@ -1614,8 +1696,42 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</ButtonBase>
|
</ButtonBase>
|
||||||
|
|
||||||
|
{desktopViewMode !== 'home' && (
|
||||||
|
<>
|
||||||
<Spacer height="20px" />
|
<Spacer height="20px" />
|
||||||
{authenticatedMode === "qort" && (
|
|
||||||
|
<Tooltip
|
||||||
|
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>WALLET</span>}
|
||||||
|
placement="left"
|
||||||
|
arrow
|
||||||
|
sx={{ fontSize: "24" }}
|
||||||
|
slotProps={{
|
||||||
|
tooltip: {
|
||||||
|
sx: {
|
||||||
|
color: "#ffffff",
|
||||||
|
backgroundColor: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
sx: {
|
||||||
|
color: "#444444",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ButtonBase onClick={() => {
|
||||||
|
setIsOpenDrawerProfile(true);
|
||||||
|
}}>
|
||||||
|
|
||||||
|
<WalletIcon width={25} color="rgba(250, 250, 250, 0.5)" />
|
||||||
|
|
||||||
|
</ButtonBase>
|
||||||
|
</Tooltip>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* {authenticatedMode === "qort" && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
|
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
|
||||||
placement="left"
|
placement="left"
|
||||||
@ -1637,6 +1753,9 @@ function App() {
|
|||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if(desktopViewMode !== 'home'){
|
||||||
|
setIsOpenDrawerProfile((prev)=> !prev)
|
||||||
|
}
|
||||||
setAuthenticatedMode("ltc");
|
setAuthenticatedMode("ltc");
|
||||||
}}
|
}}
|
||||||
src={ltcLogo}
|
src={ltcLogo}
|
||||||
@ -1680,7 +1799,7 @@ function App() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)} */}
|
||||||
<Spacer height="20px" />
|
<Spacer height="20px" />
|
||||||
<CoreSyncStatus />
|
<CoreSyncStatus />
|
||||||
<Spacer height="20px" />
|
<Spacer height="20px" />
|
||||||
@ -3514,7 +3633,7 @@ function App() {
|
|||||||
open={isOpenDrawerProfile}
|
open={isOpenDrawerProfile}
|
||||||
setOpen={setIsOpenDrawerProfile}
|
setOpen={setIsOpenDrawerProfile}
|
||||||
>
|
>
|
||||||
{renderProfile()}
|
{renderProfileLeft()}
|
||||||
</DrawerComponent>
|
</DrawerComponent>
|
||||||
|
|
||||||
</GlobalContext.Provider>
|
</GlobalContext.Provider>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
|
|
||||||
export const WalletIcon= ({ color, height, width }) => {
|
export const WalletIcon= ({ color, height, width }) => {
|
||||||
return (
|
return (
|
||||||
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width={width || 30} height={width || 30} viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M19.0118 22.0891C18.0124 22.8671 16.6997 23.3391 15.2618 23.3391C13.8241 23.3391 12.5113 22.8671 11.5118 22.0891" stroke={color} stroke-width="2" stroke-linecap="round"/>
|
<path d="M19.0118 22.0891C18.0124 22.8671 16.6997 23.3391 15.2618 23.3391C13.8241 23.3391 12.5113 22.8671 11.5118 22.0891" stroke={color} stroke-width="2" stroke-linecap="round"/>
|
||||||
<path d="M3.20108 17.356C2.7598 14.4844 2.53917 13.0486 3.08205 11.7758C3.62493 10.503 4.82938 9.63215 7.23827 7.89044L9.03808 6.58911C12.0347 4.42245 13.5331 3.33911 15.2618 3.33911C16.9907 3.33911 18.4889 4.42245 21.4856 6.58911L23.2854 7.89044C25.6943 9.63215 26.8988 10.503 27.4417 11.7758C27.9846 13.0486 27.7639 14.4844 27.3226 17.356L26.9463 19.8046C26.3208 23.8752 26.0079 25.9106 24.5481 27.1249C23.0882 28.3391 20.9539 28.3391 16.6853 28.3391H13.8383C9.56977 28.3391 7.43548 28.3391 5.97559 27.1249C4.5157 25.9106 4.20293 23.8752 3.57738 19.8046L3.20108 17.356Z" stroke={color} stroke-width="2" stroke-linejoin="round"/>
|
<path d="M3.20108 17.356C2.7598 14.4844 2.53917 13.0486 3.08205 11.7758C3.62493 10.503 4.82938 9.63215 7.23827 7.89044L9.03808 6.58911C12.0347 4.42245 13.5331 3.33911 15.2618 3.33911C16.9907 3.33911 18.4889 4.42245 21.4856 6.58911L23.2854 7.89044C25.6943 9.63215 26.8988 10.503 27.4417 11.7758C27.9846 13.0486 27.7639 14.4844 27.3226 17.356L26.9463 19.8046C26.3208 23.8752 26.0079 25.9106 24.5481 27.1249C23.0882 28.3391 20.9539 28.3391 16.6853 28.3391H13.8383C9.56977 28.3391 7.43548 28.3391 5.97559 27.1249C4.5157 25.9106 4.20293 23.8752 3.57738 19.8046L3.20108 17.356Z" stroke={color} stroke-width="2" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user