Merge pull request #1804 from kadena-community/fix/pou_styles

fix(pou): Fix amount over 100 and text
kadena-community · Mar 8, 2024 · 1982ae0 · 1982ae0
2 parents b844d50 + 30ac0ff
commit 1982ae0
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 27 deletions.
diff --git a/packages/apps/proof-of-us/src/components/AvatarEditor/AvatarEditor.tsx b/packages/apps/proof-of-us/src/components/AvatarEditor/AvatarEditor.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from '@/components/IconButton/IconButton';
 import { TitleHeader } from '@/components/TitleHeader/TitleHeader';
 import { useAvatar } from '@/hooks/avatar';
 import { useProofOfUs } from '@/hooks/proofOfUs';
@@ -134,9 +133,7 @@ export const AvatarEditor: FC<IProps> = ({ next }) => {
           label="Say Cheese"
           Append={() => (
             <Link href="/user">
-              <IconButton>
-                <MonoClose />
-              </IconButton>
+              <MonoClose />
             </Link>
           )}
         />

diff --git a/packages/apps/proof-of-us/src/components/DetailView/DetailView.tsx b/packages/apps/proof-of-us/src/components/DetailView/DetailView.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components/Button/Button';
+import { MessageBlock } from '@/components/MessageBlock/MessageBlock';
 import { useAvatar } from '@/hooks/avatar';
 import { useProofOfUs } from '@/hooks/proofOfUs';
 import { isAlreadySigning } from '@/utils/isAlreadySigning';
@@ -16,7 +17,7 @@ import { ImagePositions } from '../ImagePositions/ImagePositions';
 import { ScreenHeight } from '../ScreenHeight/ScreenHeight';
 import { TextField } from '../TextField/TextField';
 import { TitleHeader } from '../TitleHeader/TitleHeader';
-import { imageWrapper, titleErrorClass } from './style.css';
+import { imageWrapper } from './style.css';
 
 interface IProps {
   next: () => void;
@@ -115,10 +116,10 @@ export const DetailView: FC<IProps> = ({ next, prev }) => {
       )}
 
       <Stack flex={1} />
+      {titleError && <MessageBlock variant="error">{titleError}</MessageBlock>}
       <Button variant="primary" onPress={handleShare}>
         Share <MonoQrCodeScanner />
       </Button>
-      {titleError && <div className={titleErrorClass}>{titleError}</div>}
     </ScreenHeight>
   );
 };
diff --git a/packages/apps/proof-of-us/src/components/ImagePositions/ImagePositions.tsx b/packages/apps/proof-of-us/src/components/ImagePositions/ImagePositions.tsx
@@ -1,7 +1,7 @@
 import { EditorForm } from '@/EditorForm/EditorForm';
 import { useAccount } from '@/hooks/account';
 import { useProofOfUs } from '@/hooks/proofOfUs';
-import { isAlreadySigning } from '@/utils/isAlreadySigning';
+import { isAlreadySigning, isSignedOnce } from '@/utils/isAlreadySigning';
 import type { FC, MouseEventHandler } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { Modal } from '../Modal/Modal';
@@ -127,7 +127,7 @@ export const ImagePositions: FC<IProps> = () => {
           onClick={handleClick}
           onLoad={() => setIsMounted(true)}
         />
-        {isTagInfoOpen && (
+        {isTagInfoOpen && proofOfUs && !isSignedOnce(proofOfUs.signees) && (
           <TagInfo handleClose={() => setIsTagInfoOpen(false)} />
         )}
         {proofOfUs?.signees.map((s, idx) => (

diff --git a/packages/apps/proof-of-us/src/components/MessageBlock/MessageBlock.tsx b/packages/apps/proof-of-us/src/components/MessageBlock/MessageBlock.tsx
@@ -3,8 +3,8 @@ import { Heading } from '../Typography/Heading';
 import { errorWrapperClass } from './style.css';
 
 interface IProps extends PropsWithChildren {
-  variant?: 'success' | 'error';
-  title: string;
+  variant?: 'success' | 'error' | 'info';
+  title?: string;
 }
 
 export const MessageBlock: FC<IProps> = ({
@@ -14,7 +14,7 @@ export const MessageBlock: FC<IProps> = ({
 }) => {
   return (
     <div data-type={variant} className={errorWrapperClass}>
-      <Heading as="h6">{title}</Heading>
+      {title && <Heading as="h6">{title}</Heading>}
       {children}
     </div>
   );

diff --git a/packages/apps/proof-of-us/src/components/MessageBlock/style.css.ts b/packages/apps/proof-of-us/src/components/MessageBlock/style.css.ts
@@ -17,6 +17,9 @@ export const errorWrapperClass = style([
       '&[data-type="success"]': {
         border: `1px solid  ${deviceColors.green}`,
       },
+      '&[data-type="info"]': {
+        border: `1px solid  ${deviceColors.yellow}`,
+      },
     },
   },
 ]);
diff --git a/packages/apps/proof-of-us/src/components/ShareView/ShareView.tsx b/packages/apps/proof-of-us/src/components/ShareView/ShareView.tsx
@@ -7,7 +7,7 @@ import { isAlreadySigning, isSignedOnce } from '@/utils/isAlreadySigning';
 import {
   MonoArrowBack,
   MonoArrowDownward,
-  MonoCheck,
+  MonoCheckCircle,
 } from '@kadena/react-icons';
 import { Stack } from '@kadena/react-ui';
 import Link from 'next/link';
@@ -21,7 +21,7 @@ import { TitleHeader } from '../TitleHeader/TitleHeader';
 
 import { useAccount } from '@/hooks/account';
 import { ScreenHeight } from '../ScreenHeight/ScreenHeight';
-import { qrClass } from './style.css';
+import { copyClass, qrClass } from './style.css';
 
 interface IProps {
   next: () => void;
@@ -70,6 +70,16 @@ export const ShareView: FC<IProps> = ({ prev, status }) => {
     //updateStatus({ proofOfUsId: proofOfUs.proofOfUsId, status: 4 });
   }, []);
 
+  useEffect(() => {
+    if (!isCopied) return;
+
+    const timer = setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [isCopied]);
+
   if (!proofOfUs || !account || !isMounted) return;
 
   const handleCopy = () => {
@@ -94,6 +104,15 @@ export const ShareView: FC<IProps> = ({ prev, status }) => {
               </>
             )}
             label="Share"
+            Append={() => (
+              <>
+                {isCopied ? (
+                  <Stack>
+                    Copied <MonoCheckCircle className={copyClass} />
+                  </Stack>
+                ) : null}
+              </>
+            )}
           />
 
           {!isAlreadySigning(proofOfUs.signees) ? (
@@ -105,7 +124,7 @@ export const ShareView: FC<IProps> = ({ prev, status }) => {
               >
                 <QRCode
                   ecLevel="H"
-                  size={qrContainerRef.current?.offsetWidth || 300}
+                  size={300}
                   ref={qrRef}
                   value={`${getReturnHostUrl()}/scan/${proofOfUs.proofOfUsId}`}
                   removeQrCodeBehindLogo={true}
@@ -116,11 +135,6 @@ export const ShareView: FC<IProps> = ({ prev, status }) => {
                 />
               </div>
               <Button onPress={handleCopy}>Click to copy link</Button>
-              {isCopied ? (
-                <Stack>
-                  Copied! <MonoCheck />
-                </Stack>
-              ) : null}
               <ListSignees />
             </>
           ) : (

diff --git a/packages/apps/proof-of-us/src/components/ShareView/style.css.ts b/packages/apps/proof-of-us/src/components/ShareView/style.css.ts
@@ -1,7 +1,12 @@
+import { deviceColors } from '@/styles/tokens.css';
 import { style } from '@vanilla-extract/css';
 
 export const qrClass = style({
   maxWidth: '400px',
   maxHeight: '400px',
   margin: '0 auto',
 });
+export const copyClass = style({
+  marginLeft: '10px',
+  fill: deviceColors.green,
+});
diff --git a/packages/apps/proof-of-us/src/pages/leaderboard/index.tsx b/packages/apps/proof-of-us/src/pages/leaderboard/index.tsx
@@ -13,6 +13,7 @@ import {
   itemsContainerClass,
   listCounterClass,
   listItemClass,
+  overflowClass,
   secondPlaceClass,
   winnerClass,
   winnerListClass,
@@ -79,7 +80,7 @@ const Page: FC = () => {
                       justifyContent="space-between"
                       className={itemsContainerClass}
                     >
-                      <div>
+                      <div className={overflowClass}>
                         {winner.alias}
                         <div className={accountNameClass}>
                           {winner.accountName}

diff --git a/packages/apps/proof-of-us/src/styles/leaderboard.css.ts b/packages/apps/proof-of-us/src/styles/leaderboard.css.ts
@@ -23,8 +23,9 @@ export const listItemClass = style([
       alignItems: 'center',
       justifyContent: 'center',
       fontFamily: 'Kode Mono',
-      height: '32px',
-      width: '32px',
+      minHeight: '32px',
+      minWidth: '32px',
+      aspectRatio: '1',
       content: 'counter(leaderboard)',
       fontSize: '20px',
       fontWeight: '700',
@@ -86,6 +87,12 @@ export const itemsContainerClass = style({
   paddingLeft: '35px',
 });
 
+export const overflowClass = style({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+});
+
 export const sectionTitleClass = style({
   marginBottom: '16px',
 });

diff --git a/packages/apps/proof-of-us/src/styles/loader.css.ts b/packages/apps/proof-of-us/src/styles/loader.css.ts
@@ -1,3 +1,4 @@
+import { deviceColors } from '@/styles/tokens.css';
 import { keyframes, style } from '@vanilla-extract/css';
 
 const animation = keyframes({
@@ -36,7 +37,7 @@ export const kadenaSpinnerDivDot = style([
   {
     width: '1rem',
     height: '1rem',
-    backgroundColor: '#E41968',
+    backgroundColor: deviceColors.green,
     animation: `1s ${pulse} infinite alternate`,
   },
 ]);
@@ -51,12 +52,12 @@ export const kadenaSpinnerDivRing = style([
 
     selectors: {
       '&:nth-child(1)': {
-        borderLeftColor: '#E41968',
-        borderRightColor: '#E41968',
+        borderLeftColor: deviceColors.green,
+        borderRightColor: deviceColors.green,
       },
       '&:nth-child(2)': {
-        borderTopColor: '#E41968',
-        borderBottomColor: '#E41968',
+        borderTopColor: deviceColors.green,
+        borderBottomColor: deviceColors.green,
         animationDelay: '.8s',
         borderWidth: '0.2rem',
       },