para dashboard complete

src/components/Layout/Header/index.tsx

@@ -13,7 +13,7 @@ import styles from './index.module.scss';
 export const Header = () => {
   const theme = useTheme();
   const {
-    state: { accounts, activeAccount, status },
+    state: { accounts, activeAccount },
     setActiveAccount,
     disconnectWallet,
     connectWallet,

src/components/Paras/LeaseStateCard/index.tsx

@@ -1,4 +1,3 @@
-import { Stack, Typography } from '@mui/material';
 import { humanizer } from 'humanize-duration';
 
 import { leases } from '@/chaindata';
@@ -29,10 +28,8 @@ export const LeaseStateCard = ({ paraId, height }: LeaseStateProps) => {
   if (height > until) return <></>;
 
   return (
-    <Stack direction='column' gap='0.5rem' alignItems='start'>
-      <Typography>
-        {`Lease expires in ${formatDuration((until - height) * RELAY_CHAIN_BLOCK_TIME)}`}
-      </Typography>
-    </Stack>
+    <p style={{ fontSize: '14px', padding: '0 1rem' }}>
+      {`Lease expires in ${formatDuration((until - height) * RELAY_CHAIN_BLOCK_TIME)}`}
+    </p>
   );
 };

src/components/Paras/Modals/Register/index.tsx

@@ -2,7 +2,6 @@ import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
 import CodeOutlinedIcon from '@mui/icons-material/CodeOutlined';
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -11,13 +10,14 @@ import {
   useTheme,
 } from '@mui/material';
 import { compactAddLength } from '@polkadot/util';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useParasInfo } from '@/hooks';
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 import { getBalanceString } from '@/utils/functions';
 
-import { FileInput, ProgressButton } from '@/components/Elements';
+import { FileInput } from '@/components/Elements';
 
 import { useAccounts } from '@/contexts/account';
 import { useRelayApi } from '@/contexts/apis';
@@ -152,11 +152,13 @@ export const RegisterModal = ({
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
 
-        <ProgressButton onClick={onRegister} label='Register' loading={working} />
+        <Button onClick={onRegister} loading={working}>
+          Register
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/components/Paras/Modals/Reserve/index.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -9,7 +8,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { Button as RxButton } from '@region-x/components';
+import { Button } from '@region-x/components';
 import { useState } from 'react';
 
 import { useParasInfo } from '@/hooks';
@@ -110,14 +109,13 @@ export const ReserveModal = ({ open, onClose, paraId, reservationCost }: Reserve
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
 
-        {/* TODO: something off with alignment */}
-        <RxButton onClick={onReserve} loading={working}>
+        <Button onClick={onReserve} loading={working}>
           Reserve
-        </RxButton>
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/components/Paras/ParaStateCard/index.tsx

@@ -1,7 +1,7 @@
-import { Tooltip, Typography } from '@mui/material';
+import { Tooltip } from '@mui/material';
+import { LabelCard } from '@region-x/components';
 
 import { ParaState } from '@/models';
-import { LabelCard } from '@region-x/components';
 
 export const ParaStateCard = ({ state }: { state: ParaState }) => {
   const properties = {

src/components/Paras/index.ts

@@ -1,4 +1,3 @@
-export * from './CoreExpiryCard';
 export * from './LeaseStateCard';
 export * from './Modals';
 export * from './ParaDisplay';

src/components/Renew/action.tsx

@@ -1,15 +1,13 @@
 import { Stack } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useState } from 'react';
 
 import { RenewableParachain } from '@/hooks';
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { ProgressButton } from '@/components';
-
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useToast } from '@/contexts/toast';
-import { Button } from '@region-x/components';
 
 interface RenewActionProps {
   parachain: RenewableParachain;

src/components/Renew/select.tsx

@@ -1,15 +1,14 @@
 import { Stack } from '@mui/material';
-import { useRouter } from 'next/router';
-
-import { RenewableParachain } from '@/hooks';
-
-import { useNetwork } from '@/contexts/network';
 import { Select } from '@region-x/components';
 import { SelectOption } from '@region-x/components/dist/types/types';
-import { chainData } from '@/chaindata';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import { RenewableParachain } from '@/hooks';
 
 import Unknown from '@/assets/unknown.svg';
+import { chainData } from '@/chaindata';
+import { useNetwork } from '@/contexts/network';
 
 interface SelectParachainProps {
   parachains: RenewableParachain[];