update main region modals

RegionX-Labs · Oct 4, 2024 · 77157b4 · 77157b4
1 parent 7d846d7
commit 77157b4
Show file tree

Hide file tree

Showing 16 changed files with 80 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@polkadot/ui-keyring": "3.6.6",
     "@polkadot/util": "12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
-    "@region-x/components": "^0.1.10",
+    "@region-x/components": "^0.1.12",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "apexcharts": "^3.49.1",

diff --git a/src/components/Elements/Selectors/ChainSelector/index.tsx b/src/components/Elements/Selectors/ChainSelector/index.tsx
@@ -79,23 +79,23 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
     },
     ...(enableRegionX(network)
       ? [
-        {
-          icon: (
-            <Image
-              src={RegionX}
-              alt=''
-              style={{
-                width: '28px',
-                height: '28px',
-                marginRight: '0.5rem',
-                borderRadius: '100%',
-              }}
-            />
-          ),
-          label: regionXChain,
-          value: ChainType.REGIONX,
-        },
-      ]
+          {
+            icon: (
+              <Image
+                src={RegionX}
+                alt=''
+                style={{
+                  width: '28px',
+                  height: '28px',
+                  marginRight: '0.5rem',
+                  borderRadius: '100%',
+                }}
+              />
+            ),
+            label: regionXChain,
+            value: ChainType.REGIONX,
+          },
+        ]
       : []),
   ];
   return (

diff --git a/src/components/Regions/Modals/AddTask/index.tsx b/src/components/Regions/Modals/AddTask/index.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -10,10 +9,9 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useState } from 'react';
 
-import { ActionButton } from '@/components/Elements';
-
 import { useRelayApi } from '@/contexts/apis';
 import { useTasks } from '@/contexts/tasks';
 import { useToast } from '@/contexts/toast';
@@ -90,10 +88,10 @@ export const AddTaskModal = ({ onClose, ...props }: AddTaskModalProps) => {
         </Stack>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ActionButton label='Add Task' onClick={onAdd} />
+        <Button onClick={onAdd}>Add Task</Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/src/components/Regions/Modals/Interlace/index.module.scss b/src/components/Regions/Modals/Interlace/index.module.scss
@@ -19,16 +19,18 @@
   margin-left: auto;
   margin-right: auto;
   width: 95%;
+  color: var(--greenPrimary);
 }
 
 .circular {
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
+  color: var(--greenPrimary);
 }
 
 .mask {
   width: 100%;
   overflow-x: clip;
   font-size: 12px;
-}
+}
diff --git a/src/components/Regions/Modals/Interlace/index.tsx b/src/components/Regions/Modals/Interlace/index.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   CircularProgress,
   Dialog,
   DialogActions,
@@ -11,12 +10,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { maskFromBin, maskFromChunk, maskToBin } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { ProgressButton } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -164,15 +163,12 @@ export const InterlaceModal = ({ open, onClose, regionMetadata }: InterlaceModal
         </Paper>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ProgressButton
-          onClick={onInterlace}
-          loading={working}
-          disabled={activeBits === 1}
-          label='Interlace'
-        />
+        <Button onClick={onInterlace} loading={working} disabled={activeBits === 1}>
+          Interlace
+        </Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/src/components/Regions/Modals/Partition/index.module.scss b/src/components/Regions/Modals/Partition/index.module.scss
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 2rem 0 1rem 0;
+  margin: 1rem 0 1rem 0;
 }
 
 .timeContainer {
@@ -35,7 +35,8 @@
 
 .activeUnitItem {
   border-radius: 1rem;
-  border: 1px solid #e84d68;
+  background-color: var(--greenPrimary);
+  color: white;
 }
 
 .unitItem {
@@ -54,4 +55,4 @@
   margin-left: auto;
   margin-right: auto;
   width: 80%;
-}
+}
diff --git a/src/components/Regions/Modals/Partition/index.tsx b/src/components/Regions/Modals/Partition/index.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -10,18 +9,18 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { ProgressButton } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
-import { DAY, HOUR, MINUTE, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models';
+import { DAY, HOUR, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models';
 
 import styles from './index.module.scss';
 
@@ -32,11 +31,6 @@ interface PartitionModalProps extends DialogProps {
 
 export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModalProps) => {
   const timeUnits = [
-    {
-      label: 'Minutes',
-      unit: MINUTE,
-      strUnit: 'minute',
-    },
     {
       label: 'Hours',
       unit: HOUR,
@@ -166,16 +160,19 @@ export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModal
               valueLabelDisplay='on'
               valueLabelFormat={(v) => `${v} ${timeUnits[unitIdx].strUnit}${v > 1 ? 's' : ''}`}
               size='medium'
+              style={{ color: 'var(--greenPrimary)' }}
               className={styles.timeSlider}
             />
           </Paper>
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ProgressButton onClick={onPartition} loading={working} label='Partition' />
+        <Button onClick={onPartition} loading={working}>
+          Partition
+        </Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/src/components/Regions/Modals/Pooling/index.tsx b/src/components/Regions/Modals/Pooling/index.tsx
@@ -1,23 +1,20 @@
 import {
   Alert,
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogProps,
-  Input,
-  InputAdornment,
   Paper,
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
-import { isValidAddress } from '@/utils/functions';
 
-import { FinalitySelector, ProgressButton } from '@/components/Elements';
+import { AddressInput, FinalitySelector } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -124,35 +121,18 @@ export const PoolingModal = ({ open, onClose, regionMetadata }: PoolingModalProp
           </Alert>
           <Box className={styles.optionItem}>
             <Typography className={styles.optionKey}>Payee:</Typography>
-            <Input
-              value={payee}
-              onChange={(e) => setPayee(e.target.value)}
-              fullWidth
-              type='text'
-              placeholder='Address of the payee'
-              endAdornment={
-                <InputAdornment position='end'>
-                  <Button
-                    variant='text'
-                    color='info'
-                    onClick={() => activeAccount && setPayee(activeAccount.address)}
-                  >
-                    Me
-                  </Button>
-                </InputAdornment>
-              }
-              sx={{ height: '3rem' }}
-              error={payee.length > 0 && !isValidAddress(payee)}
-            />
+            <AddressInput address={payee} label='' onChange={setPayee} />
           </Box>
         </Paper>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
 
-        <ProgressButton onClick={onPool} label='Pool' loading={working} />
+        <Button onClick={onPool} loading={working}>
+          Pool
+        </Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/src/components/Regions/Modals/TaskAssign/index.module.scss b/src/components/Regions/Modals/TaskAssign/index.module.scss
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 2rem 0 1rem 0;
+  margin: 1rem 0 1rem 0;
 }
 
 .taskWrapper,
@@ -24,4 +24,5 @@
   max-width: 32rem;
   align-items: center;
   margin: 0 auto;
-}
+  background-color: white;
+}
diff --git a/src/components/Regions/Modals/TaskAssign/index.tsx b/src/components/Regions/Modals/TaskAssign/index.tsx
@@ -3,7 +3,6 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import {
   Alert,
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -17,11 +16,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { FinalitySelector, ProgressButton } from '@/components/Elements';
+import { FinalitySelector } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -183,15 +183,7 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod
                 <Typography sx={{ fontWeight: 700, color: theme.palette.common.black }}>
                   Tasks
                 </Typography>
-                <Button
-                  sx={{
-                    color: theme.palette.common.black,
-                    background: '#dcdcdc',
-                    padding: '0.5rem 1rem',
-                    borderRadius: '2rem',
-                  }}
-                  onClick={() => openTaskModal(true)}
-                >
+                <Button color='blueDark' onClick={() => openTaskModal(true)}>
                   Add Task
                 </Button>
               </Stack>
@@ -227,11 +219,13 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod
         </DialogContent>
 
         <DialogActions>
-          <Button onClick={onClose} variant='outlined'>
+          <Button onClick={onClose} color='dark'>
             Cancel
           </Button>
 
-          <ProgressButton onClick={onAssign} label='Assign' loading={working} />
+          <Button onClick={onAssign} loading={working}>
+            Assign
+          </Button>
         </DialogActions>
       </Dialog>
       {taskModalOpen && <AddTaskModal open onClose={() => openTaskModal(false)} />}