diff --git a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx b/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx index f756b9ab35..2c7fa34c04 100644 --- a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx +++ b/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx @@ -167,9 +167,7 @@ export function HomeScreenImpl(): JSX.Element | null { <AppContainer bg="gray"> <Spacer h={24} /> <AppHeader isEdgeCity={isEdgeCity} /> - <Spacer h={24} /> <Placeholder minH={540}> - <LoadingIssuedPCDs /> {/* {isRoot && ( <div className="font-bold text-3xl mb-4 text-center">My Events</div> )} */} @@ -226,7 +224,7 @@ export function HomeScreenImpl(): JSX.Element | null { <EdgeCityHome /> ) : ( <> - {!(foldersInFolder.length === 0 && isRoot) && <Separator />} + {/* {!(foldersInFolder.length === 0 && isRoot) && <Separator />} */} {pcdsInFolder.length > 0 ? ( <PCDCardList allExpanded @@ -251,9 +249,11 @@ export function HomeScreenImpl(): JSX.Element | null { </RemoveAllContainer> </> )} */} + <LoadingIssuedPCDs /> </> )} </Placeholder> + <Spacer h={24} /> </AppContainer> </> diff --git a/apps/passport-client/components/shared/AppHeader.tsx b/apps/passport-client/components/shared/AppHeader.tsx index 084fbef23b..ac6db85c28 100644 --- a/apps/passport-client/components/shared/AppHeader.tsx +++ b/apps/passport-client/components/shared/AppHeader.tsx @@ -1,10 +1,8 @@ -import { CircleButton } from "@pcd/passport-ui"; import React, { useCallback } from "react"; -import { IoMdSettings } from "react-icons/io"; -import { MdInfo } from "react-icons/md"; import styled from "styled-components"; import { useDispatch, useSelf, useSubscriptions } from "../../src/appHooks"; import { AppState } from "../../src/state"; +import { cn } from "../../src/util"; export const AppHeader = React.memo(AppHeaderImpl); @@ -51,9 +49,6 @@ function AppHeaderImpl({ return ( <AppHeaderWrap> - <CircleButton diameter={34} padding={8} onClick={openInfo}> - <MdInfo size={34} color={isEdgeCity ? "white" : "var(--accent-lite)"} /> - </CircleButton> {children} {!isProveOrAddScreen && ( <> @@ -76,13 +71,30 @@ function AppHeaderImpl({ </CircleButton> */} </> )} - - <CircleButton diameter={34} padding={8} onClick={openSettings}> - <IoMdSettings - size={34} - color={isEdgeCity ? "white" : "var(--accent-lite)"} - /> - </CircleButton> + <div className="flex flex-row gap-2 w-full"> + <div + className={cn( + "flex flex-row justify-center items-center flex-grow text-center", + "bg-blue-700 py-2 px-4 cursor-pointer hover:bg-blue-600 transition-all duration-100", + "rounded font-bold shadow-lg select-none active:ring-2 active:ring-offset-4 active:ring-white ring-opacity-60 ring-offset-[#19473f]", + "border-none text-lg" + )} + onClick={openInfo} + > + More Info + </div> + <div + className={cn( + "flex flex-row justify-center items-center flex-grow text-center", + "bg-blue-700 py-2 px-4 cursor-pointer hover:bg-blue-600 transition-all duration-100", + "rounded font-bold shadow-lg select-none active:ring-2 active:ring-offset-4 active:ring-white ring-opacity-60 ring-offset-[#19473f]", + "border-none text-lg" + )} + onClick={openSettings} + > + Settings + </div> + </div> </AppHeaderWrap> ); } @@ -94,6 +106,7 @@ const AppHeaderWrap = styled.div` justify-content: space-between; align-items: center; gap: 16px; + margin-bottom: 0.75rem; `; const ErrorDot = styled.div` diff --git a/apps/passport-client/components/shared/LoadingIssuedPCDs.tsx b/apps/passport-client/components/shared/LoadingIssuedPCDs.tsx index 511c75d59b..1d4974ee7a 100644 --- a/apps/passport-client/components/shared/LoadingIssuedPCDs.tsx +++ b/apps/passport-client/components/shared/LoadingIssuedPCDs.tsx @@ -1,36 +1,46 @@ +import { useEffect, useState } from "react"; import styled from "styled-components"; import { useLoadedIssuedPCDs } from "../../src/appHooks"; -import { RippleLoader } from "../core/RippleLoader"; export function LoadingIssuedPCDs(): JSX.Element | null { const loadedIssuedPCDs = useLoadedIssuedPCDs(); + const [showing, setShowing] = useState(!loadedIssuedPCDs); - if (loadedIssuedPCDs) { + useEffect(() => { + if (loadedIssuedPCDs && showing) { + setTimeout(() => { + // setShowing(false); + }, 1000); + } + }, [loadedIssuedPCDs, showing]); + + if (!showing) { return null; } return ( - <Container> - <LoaderContainer> - <RippleLoader /> - </LoaderContainer> - Loading Tickets + <Container className="w-full rounded bg-gray-500 py-2 px-4 text-white text-lg font-bold mt-[0.75rem]"> + <div>Loading Tickets</div> </Container> ); } const Container = styled.div` user-select: none; - margin: 12px 9px; box-sizing: border-box; display: flex; - justify-content: flex-start; + flex-direction: row; + justify-content: center; align-items: center; - background-color: rgba(255, 255, 255, 0.1); - border-radius: 16px; -`; + animation: fade 500ms ease-in-out infinite; -const LoaderContainer = styled.div` - display: inline-block; - transform: scale(50%); + @keyframes fade { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.8; + } + } `;