From bc76ffb278bb925733cb22f6c8c64d7ea9cd2cbb Mon Sep 17 00:00:00 2001
From: Ivan Chub <ivansergchub@gmail.com>
Date: Wed, 24 Jul 2024 16:02:44 -0700
Subject: [PATCH] more experimentation

---
 .../screens/HomeScreen/HomeScreen.tsx         |  6 +--
 .../components/shared/AppHeader.tsx           | 39 ++++++++++++------
 .../components/shared/LoadingIssuedPCDs.tsx   | 40 ++++++++++++-------
 3 files changed, 54 insertions(+), 31 deletions(-)

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;
+    }
+  }
 `;