fix(finisher-page): form height

kadena-community · Aug 21, 2023 · c5bb182 · c5bb182
1 parent b191a58
commit c5bb182
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 57 deletions.
diff --git a/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx b/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
@@ -1,7 +1,6 @@
 import { Card, Grid, Heading, SystemIcon, Text } from '@kadena/react-ui';
 
 import {
-  cardContainerStyle,
   helperStyle,
   helperTextIconStyle,
 } from '@/components/Global/FormItemCard/styles.css';
@@ -33,7 +32,7 @@ export const FormItemCard: FC<IFormItemCardProps> = ({
   ...rest
 }) => {
   return (
-    <div className={cardContainerStyle}>
+    <div>
       <Card fullWidth disabled={disabled}>
         <Grid.Root columns={2} spacing="$3xl">
           <Grid.Item>

diff --git a/packages/apps/tools/src/components/Global/FormItemCard/styles.css.ts b/packages/apps/tools/src/components/Global/FormItemCard/styles.css.ts
@@ -2,19 +2,10 @@ import { sprinkles } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
-export const cardContainerStyle = style([
-  sprinkles({
-    // width: '$xl',
-    // fontSize: '$xs',
-  }),
-]);
-
 export const helperStyle = style([
   sprinkles({
     display: 'flex',
     flexDirection: 'row-reverse',
-    // alignItems: 'flex-end',
-    // textAlign: 'right',
     gap: '$1',
     cursor: 'pointer',
     color: '$neutral5',
@@ -30,9 +21,3 @@ export const helperTextIconStyle = style([
     color: '$neutral5',
   }),
 ]);
-
-// export const linkColorStyle = style([
-//   sprinkles({
-//
-//   }),
-// ]);
diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-finisher/index.tsx b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-finisher/index.tsx
@@ -5,7 +5,6 @@ import {
   Grid,
   Heading,
   IconButton,
-  Notification,
   ProductIcon,
   Stack,
   SystemIcon,
@@ -23,6 +22,7 @@ import {
 } from './styles.css';
 
 import DrawerToolbar from '@/components/Common/DrawerToolbar';
+import { FormStatusNotification } from '@/components/Global';
 import {
   AccountNameField,
   NAME_VALIDATION,
@@ -271,7 +271,7 @@ const CrossChainTransferFinisher: FC = () => {
     pollResults.error === undefined ? undefined : 'negative';
   const showInputHelper =
     pollResults.error !== undefined ? pollResults.error : '';
-  const showNotification = Object.keys(finalResults).length > 0;
+  const showNotification = Object.keys(finalResults).length === 0;
 
   const formattedSigData = `{
     "pred": "${pollResults.tx?.receiverGuard.pred}",
@@ -280,26 +280,16 @@ const CrossChainTransferFinisher: FC = () => {
 
   const renderNotification =
     txError.toString() === '' ? (
-      <Notification.Root
-        expanded
-        hasCloseButton
-        icon={SystemIcon.CheckDecagram}
-        onClose={() => {}}
+      <FormStatusNotification
+        status="successful"
         title={t('Notification title')}
-        color="positive"
       >
         {t('XChain transfer has been successfully finalized!')}
-      </Notification.Root>
+      </FormStatusNotification>
     ) : (
-      <Notification.Root
-        hasCloseButton
-        icon={SystemIcon.AlertBox}
-        onClose={() => {}}
-        title={t('Transaction error')}
-        color="negative"
-      >
+      <FormStatusNotification status="erroneous" title={t('Transaction error')}>
         {txError.toString()}
-      </Notification.Root>
+      </FormStatusNotification>
     );
 
   useEffect(() => {
@@ -393,14 +383,12 @@ const CrossChainTransferFinisher: FC = () => {
         {t('Finish transaction')}
       </Heading>
 
-      <section className={formContentStyle}>
-        <form onSubmit={handleSubmit(handleValidateSubmit)}>
-          {showNotification ? (
-            <div className={notificationContainerStyle}>
-              {renderNotification}
-            </div>
-          ) : null}
+      {showNotification ? (
+        <div className={notificationContainerStyle}>{renderNotification}</div>
+      ) : null}
 
+      <form onSubmit={handleSubmit(handleValidateSubmit)}>
+        <section className={formContentStyle}>
           <Stack direction="column">
             <FormItemCard
               heading={t('Search Request')}
@@ -507,14 +495,13 @@ const CrossChainTransferFinisher: FC = () => {
               </FormItemCard>
             ) : null}
           </Stack>
-
-          <section className={formButtonStyle}>
-            <Button type="submit" disabled={!isGasStation} icon="TrailingIcon">
-              {t('Finish Transaction')}
-            </Button>
-          </section>
-        </form>
-      </section>
+        </section>
+        <section className={formButtonStyle}>
+          <Button type="submit" disabled={!isGasStation} icon="TrailingIcon">
+            {t('Finish Transaction')}
+          </Button>
+        </section>
+      </form>
     </div>
   );
 };

diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-finisher/styles.css.ts b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-finisher/styles.css.ts
@@ -6,19 +6,17 @@ export const formContentStyle = style([
   sprinkles({
     position: 'relative',
     height: '100%',
-    zIndex: 0,
   }),
   {
     width: '680px',
-    overflow: 'overflow',
+    height: '65vh',
+    overflow: 'scroll',
   },
 ]);
 
 export const notificationContainerStyle = style([
   sprinkles({
-    // position: 'absolute',
-    top: 0,
-    zIndex: 1,
+    marginY: '$sm',
   }),
   {
     width: '680px',
@@ -27,12 +25,14 @@ export const notificationContainerStyle = style([
 
 export const formButtonStyle = style([
   sprinkles({
-    // alignItems: '',
     display: 'flex',
     flexDirection: 'row-reverse',
     marginTop: '$4',
     gap: '$8',
   }),
+  {
+    width: '680px',
+  },
 ]);
 
 export const sideContentStyle = style([
@@ -68,8 +68,6 @@ export const sidebarLinksStyle = style([
 
 export const textAreaStyle = style([
   sprinkles({
-    // width: '100%',
-    // marginBottom: '$md',
     outline: 'none',
   }),
   {