fix: UI repo configuration step fix styles (#243)

* feat: create row data component

* chore: remove margin from left icons

* styles: add styles for icon on row data

ui/src/components/index.ts

@@ -9,3 +9,4 @@ export * from './nfa-card';
 export * from './nfa-preview';
 export * from './card-tag';
 export * from './resolved-address';
+export * from './row-data';

ui/src/components/row-data/index.ts

@@ -0,0 +1 @@
+export * from './row-data';

ui/src/components/row-data/row-data.styles.ts

@@ -0,0 +1,26 @@
+import { Flex, Text } from '@/components';
+import { styled } from '@/theme';
+
+import { IconStyles } from '../core/icon/icon.styles';
+
+export const RowDataStyles = {
+  Container: styled(Flex, {
+    justifyContent: 'space-between',
+  }),
+  Text: {
+    Container: styled(Flex, {
+      alignItems: 'center',
+      maxWidth: '60%',
+      gap: '$2',
+
+      [`${IconStyles.Container}`]: {
+        fontSize: '$2xl',
+      },
+    }),
+    Label: styled(Text, {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    }),
+  },
+};

ui/src/components/row-data/row-data.tsx

@@ -0,0 +1,25 @@
+import { forwardStyledRef } from '@/theme';
+
+import { RowDataStyles as S } from './row-data.styles';
+
+type RowDataProps = {
+  leftIcon: React.ReactNode;
+  label: string;
+  rightComponent: React.ReactNode;
+};
+
+export const RowData = forwardStyledRef<HTMLDivElement, RowDataProps>(
+  ({ leftIcon, label, rightComponent, ...props }, ref) => {
+    return (
+      <S.Container ref={ref} {...props}>
+        <S.Text.Container>
+          {leftIcon}
+          <S.Text.Label>{label}</S.Text.Label>
+        </S.Text.Container>
+        {rightComponent}
+      </S.Container>
+    );
+  }
+);
+
+RowData.displayName = 'RowData';

ui/src/views/access-point/ap-form-step/create-ap-form-body.tsx

@@ -9,6 +9,7 @@ import {
   CardTag,
   Flex,
   Form,
+  RowData,
   Spinner,
   Stepper,
   Text,
@@ -26,25 +27,11 @@ export const SelectedNFA: React.FC = () => {
   const { nfa } = CreateAccessPoint.useContext();
 
   return (
-    <Flex
+    <RowData
-      css={{
+      leftIcon={<NFAIconFragment image={nfa.logo} color={nfa.color} />}
-        justifyContent: 'space-between',
+      label={nfa.name}
-      }}
+      rightComponent={<CardTag css={{ minWidth: '$28' }}>Selected NFA</CardTag>}
-    >
+    />
-      <Flex css={{ alignItems: 'center', maxWidth: '65%' }}>
-        <NFAIconFragment image={nfa.logo} color={nfa.color} />
-        <Text
-          css={{
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-          }}
-        >
-          {nfa.name}
-        </Text>
-      </Flex>
-      <CardTag css={{ minWidth: '$28' }}>Selected NFA</CardTag>
-    </Flex>
   );
 };
 

ui/src/views/access-point/nfa-icon/nfa-icon.styles.ts

@@ -6,7 +6,6 @@ export const NFAIconStyles = {
     borderRadius: '$full',
     width: '$7',
     height: '$7',
-    mr: '$2',
   }),
   Image: styled('img', {
     width: '100%',

ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-body/repo-configuration-body.tsx

@@ -1,8 +1,15 @@
-import { Button, Card, CardTag, Flex, Stepper } from '@/components';
+import {
+  Button,
+  Card,
+  CardTag,
+  Flex,
+  Icon,
+  RowData,
+  Stepper,
+} from '@/components';
 import { Mint } from '@/views/mint/mint.context';
 import { useMintFormContext } from '@/views/mint/nfa-step/form-step';
 
-import { RepoRow } from '../../repository-row';
 import { RepoBranchCommitFields } from './repo-branch-commit-fields';
 
 export const RepoConfigurationBody: React.FC = () => {
@@ -21,12 +28,13 @@ export const RepoConfigurationBody: React.FC = () => {
   };
 
   return (
-    <Card.Body css={{ pt: '$2' }}>
+    <Card.Body css={{ pt: '$4' }}>
       <Flex css={{ rowGap: '$6', flexDirection: 'column' }}>
-        <RepoRow
+        <RowData
-          repo={repositoryName.name}
+          leftIcon={<Icon name="github" />}
-          css={{ mb: '0', cursor: 'default' }}
+          label={repositoryName?.name || ''}
-          button={<CardTag>Use for NFA</CardTag>}
+          css={{ cursor: 'default' }}
+          rightComponent={<CardTag>Use for NFA</CardTag>}
         />
         <RepoBranchCommitFields />
         <Button

ui/src/views/mint/github-step/steps/github-repository-selection/repository.tsx

@@ -1,11 +1,9 @@
 import { useCallback } from 'react';
 
-import { Button, Separator } from '@/components';
+import { Button, Icon, RowData, Separator } from '@/components';
 import { githubActions, GithubState, useAppDispatch } from '@/store';
 import { Mint } from '@/views/mint/mint.context';
 
-import { RepoRow } from '../repository-row';
-
 type RepositoryProps = {
   repository: GithubState.Repository;
   index: number;
@@ -28,14 +26,15 @@ export const Repository: React.FC<RepositoryProps> = ({
 
   return (
     <>
-      <RepoRow
+      <RowData
-        onClick={handleSelectRepo}
+        leftIcon={<Icon name="github" />}
-        repo={repository.name}
+        label={repository.name}
-        css={{ cursor: 'pointer' }}
+        css={{ cursor: 'pointer', my: '$4' }}
-        button={
+        rightComponent={
           <Button
             colorScheme="blue"
             variant="outline"
+            onClick={handleSelectRepo}
             css={{ py: '$1', height: '$5', borderRadius: '$md' }}
           >
             Use for NFA

ui/src/views/mint/github-step/steps/repository-row.tsx

@@ -1,30 +0,0 @@
-import { forwardRef } from 'react';
-
-import { Flex, Icon } from '@/components';
-
-type RepoRowProps = {
-  repo: string;
-  button: React.ReactNode;
-} & React.ComponentProps<typeof Flex>;
-
-export const RepoRow = forwardRef<HTMLDivElement, RepoRowProps>(
-  ({ repo, button, ...props }, ref) => (
-    <Flex
-      {...props}
-      ref={ref}
-      css={{
-        justifyContent: 'space-between',
-        my: '$4',
-        ...props.css,
-      }}
-    >
-      <Flex css={{ alignItems: 'center' }}>
-        <Icon name="github" css={{ fontSize: '$2xl', mr: '$2' }} />
-        <span>{repo}</span>
-      </Flex>
-      {button}
-    </Flex>
-  )
-);
-
-RepoRow.displayName = 'RepoRow';