Skip to content

Commit

Permalink
Minor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thunnini
Thunnini committed Jul 6, 2023
1 parent f8f903a commit 79821e0
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 125 deletions.
238 changes: 120 additions & 118 deletions packages/extension/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,142 +245,144 @@ const RoutesAfterReady: FunctionComponent = observer(() => {
return true;
})();

const shouldUnlockPage = keyRingStore.status === "locked" && !isURLUnlockPage;

return (
<HashRouter>
{isReady ? (
keyRingStore.status === "locked" && !isURLUnlockPage ? (
shouldUnlockPage ? (
<UnlockPage />
) : (
<React.Fragment>
<Routes>
<Route path="/unlock" element={<UnlockPage />} />
<Route path="/" element={<MainPage />} />
<Route path="/send" element={<SendAmountPage />} />
<Route
path="/send/select-asset"
element={<SendSelectAssetPage />}
/>
<Route path="/setting" element={<SettingPage />} />
<Route path="/setting/general" element={<SettingGeneralPage />} />
<Route
path="/setting/general/language"
element={<SettingGeneralLanguagePage />}
/>
<Route
path="/setting/general/fiat"
element={<SettingGeneralFiatPage />}
/>
<Route
path="/setting/general/theme"
element={<SettingGeneralThemePage />}
/>
<Route
path="/setting/general/authz"
element={<SettingGeneralAuthZPage />}
/>
<Route
path="/setting/general/authz/revoke"
element={<SettingGeneralAuthZRevokePage />}
/>
<Route
path="/setting/general/link-keplr-mobile"
element={<SettingGeneralLinkKeplrMobilePage />}
/>
<Route
path="setting/general/delete-suggest-chain"
element={<SettingGeneralDeleteSuggestChainPage />}
/>
<Route
path="/setting/advanced"
element={<SettingAdvancedPage />}
/>
<Route
path="/setting/advanced/endpoint"
element={<SettingAdvancedEndpointPage />}
/>
<Route
path="/setting/security"
element={<SettingSecurityPage />}
/>
<Route
path="/setting/security/permission"
element={<SettingSecurityPermissionPage />}
/>
<Route
path="/setting/security/auto-lock"
element={<SettingSecurityAutoLockPage />}
/>
<Route
path="/setting/security/change-password"
element={<SettingSecurityChangePasswordPage />}
/>
<Route
path="/setting/token/list"
element={<SettingTokenListPage />}
/>
<Route
path="/setting/token/add"
element={<SettingTokenAddPage />}
/>
<Route
path="/setting/contacts/list"
element={<SettingContactsList />}
/>
<Route
path="/setting/contacts/add"
element={<SettingContactsAdd />}
/>
<Route path="/permission" element={<PermissionPage />} />
<Route path="/sign-cosmos" element={<SignCosmosTxPage />} />
<Route
path="/sign-cosmos-adr36"
element={<SignCosmosADR36Page />}
/>
<Route
path="/sign-cosmos-icns"
element={<SignCosmosICNSPage />}
/>
<Route path="/sign-ethereum" element={<SignEthereumTxPage />} />
<Route path="/wallet/select" element={<WalletSelectPage />} />
<Route path="/wallet/delete" element={<WalletDeletePage />} />
<Route
path="/wallet/change-name"
element={<WalletChangeNamePage />}
/>
<Route
path="/wallet/show-sensitive"
element={<WalletShowSensitivePage />}
/>
<Route path="/suggest-chain" element={<SuggestChainPage />} />
<Route path="/ibc-transfer" element={<IBCTransferPage />} />
</Routes>

<LightModeBackground />
</React.Fragment>
<Routes>
<Route path="/unlock" element={<UnlockPage />} />
<Route path="/" element={<MainPage />} />
<Route path="/send" element={<SendAmountPage />} />
<Route
path="/send/select-asset"
element={<SendSelectAssetPage />}
/>
<Route path="/setting" element={<SettingPage />} />
<Route path="/setting/general" element={<SettingGeneralPage />} />
<Route
path="/setting/general/language"
element={<SettingGeneralLanguagePage />}
/>
<Route
path="/setting/general/fiat"
element={<SettingGeneralFiatPage />}
/>
<Route
path="/setting/general/theme"
element={<SettingGeneralThemePage />}
/>
<Route
path="/setting/general/authz"
element={<SettingGeneralAuthZPage />}
/>
<Route
path="/setting/general/authz/revoke"
element={<SettingGeneralAuthZRevokePage />}
/>
<Route
path="/setting/general/link-keplr-mobile"
element={<SettingGeneralLinkKeplrMobilePage />}
/>
<Route
path="setting/general/delete-suggest-chain"
element={<SettingGeneralDeleteSuggestChainPage />}
/>
<Route path="/setting/advanced" element={<SettingAdvancedPage />} />
<Route
path="/setting/advanced/endpoint"
element={<SettingAdvancedEndpointPage />}
/>
<Route path="/setting/security" element={<SettingSecurityPage />} />
<Route
path="/setting/security/permission"
element={<SettingSecurityPermissionPage />}
/>
<Route
path="/setting/security/auto-lock"
element={<SettingSecurityAutoLockPage />}
/>
<Route
path="/setting/security/change-password"
element={<SettingSecurityChangePasswordPage />}
/>
<Route
path="/setting/token/list"
element={<SettingTokenListPage />}
/>
<Route
path="/setting/token/add"
element={<SettingTokenAddPage />}
/>
<Route
path="/setting/contacts/list"
element={<SettingContactsList />}
/>
<Route
path="/setting/contacts/add"
element={<SettingContactsAdd />}
/>
<Route path="/permission" element={<PermissionPage />} />
<Route path="/sign-cosmos" element={<SignCosmosTxPage />} />
<Route
path="/sign-cosmos-adr36"
element={<SignCosmosADR36Page />}
/>
<Route path="/sign-cosmos-icns" element={<SignCosmosICNSPage />} />
<Route path="/sign-ethereum" element={<SignEthereumTxPage />} />
<Route path="/wallet/select" element={<WalletSelectPage />} />
<Route path="/wallet/delete" element={<WalletDeletePage />} />
<Route
path="/wallet/change-name"
element={<WalletChangeNamePage />}
/>
<Route
path="/wallet/show-sensitive"
element={<WalletShowSensitivePage />}
/>
<Route path="/suggest-chain" element={<SuggestChainPage />} />
<Route path="/ibc-transfer" element={<IBCTransferPage />} />
</Routes>
)
) : (
<Splash />
)}
<LightModeBackground
isReady={isReady}
shouldUnlockPage={shouldUnlockPage}
/>
</HashRouter>
);
});

const LightModeBackground: FunctionComponent = () => {
const LightModeBackground: FunctionComponent<{
isReady: boolean;
shouldUnlockPage: boolean;
}> = ({ isReady, shouldUnlockPage }) => {
const theme = useTheme();
const location = useLocation();

useLayoutEffect(() => {
if (
location.pathname.startsWith("/setting") ||
location.pathname.startsWith("/send")
) {
document.body.setAttribute("data-white-background", "true");

return () => {
document.body.removeAttribute("data-white-background");
};
if (isReady && !shouldUnlockPage) {
if (
location.pathname === "/setting" ||
location.pathname.startsWith("/setting/") ||
location.pathname === "/send" ||
location.pathname.startsWith("/send/")
) {
document.documentElement.setAttribute("data-white-background", "true");
document.body.setAttribute("data-white-background", "true");

return () => {
document.documentElement.removeAttribute("data-white-background");
document.body.removeAttribute("data-white-background");
};
}
}
}, [location.pathname, theme]);
}, [location.pathname, theme, isReady, shouldUnlockPage]);

return null;
};
Expand Down
17 changes: 10 additions & 7 deletions packages/extension/src/layouts/header/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
SpecialButton,
getSpecialButtonHeightRem,
} from "../../components/special-button";
import { useLocation } from "react-router-dom";

const pxToRem = (px: number) => {
const base = parseFloat(
Expand All @@ -23,16 +22,21 @@ const bottomButtonPaddingRem = 0.75;
const Styles = {
Container: styled.div``,

HeaderContainer: styled.div<{ path?: string }>`
HeaderContainer: styled.div`
height: 3.75rem;
background: ${(props) =>
props.theme.mode === "light"
? props.path?.startsWith("/setting") || props.path?.startsWith("/send")
? ColorPalette.white
: ColorPalette["light-gradient"]
? ColorPalette["light-gradient"]
: ColorPalette["gray-700"]};
body[data-white-background="true"] & {
background: ${(props) =>
props.theme.mode === "light"
? ColorPalette["white"]
: ColorPalette["gray-700"]};
}
color: ${(props) =>
props.theme.mode === "light"
? ColorPalette["gray-400"]
Expand Down Expand Up @@ -134,7 +138,6 @@ export const HeaderLayout: FunctionComponent<HeaderProps> = ({
}) => {
const [height, setHeight] = React.useState(() => pxToRem(600));
const lastSetHeight = useRef(-1);
const location = useLocation();

useLayoutEffect(() => {
function handleResize() {
Expand Down Expand Up @@ -175,7 +178,7 @@ export const HeaderLayout: FunctionComponent<HeaderProps> = ({

return (
<Styles.Container as={onSubmit ? "form" : undefined} onSubmit={onSubmit}>
<Styles.HeaderContainer path={location.pathname}>
<Styles.HeaderContainer>
{left && !isNotReady ? (
<Styles.HeaderLeft>{left}</Styles.HeaderLeft>
) : null}
Expand Down

0 comments on commit 79821e0

Please sign in to comment.