save work

subsquid · Jul 1, 2024 · dae6c9d · dae6c9d
1 parent c11d3e1
commit dae6c9d
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 84 deletions.
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -4,8 +4,7 @@ export const Dialog = styled(DialogMui, {
   name: 'Dialog',
 })(({ theme }) => ({
   '& .MuiBackdrop-root': {
-    backdropFilter: 'blur(5px)',
-    backgroundColor:
-      theme.palette.mode === 'light' ? 'rgba(166, 166, 166, 0.6)' : 'rgba(0, 0, 0, 0.2);',
+    // backdropFilter: 'blur(1px)',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
 }));
diff --git a/src/components/Form/FormikSelect.tsx b/src/components/Form/FormikSelect.tsx
@@ -13,6 +13,10 @@ import {
 const FormSelect = styled(Select, {
   name: 'FormSelect',
 })(({ theme }) => ({
+  'label + &': {
+    marginTop: theme.spacing(3),
+  },
+
   '& .MuiSelect-select.MuiSelect-filled': {
     paddingTop: 22,
   },
@@ -54,9 +58,14 @@ export function FormikSelect({
       : null;
 
   return (
-    <FormControl hiddenLabel={!label} variant="filled" fullWidth error={Boolean(actualError)}>
+    <FormControl hiddenLabel={!label} variant="standard" fullWidth error={Boolean(actualError)}>
       {label && <InputLabel>{label}</InputLabel>}
-      <FormSelect disabled={disabled} onChange={onChange} value={formik.values[id]}>
+      <FormSelect
+        disabled={disabled}
+        onChange={onChange}
+        value={formik.values[id]}
+        variant="filled"
+      >
         {options.map(o => {
           return (
             <MenuItem disabled={o.disabled} key={o.value} value={o.value}>

diff --git a/src/components/Form/FormikTextInput.tsx b/src/components/Form/FormikTextInput.tsx
@@ -1,22 +1,22 @@
 import React, { useState } from 'react';
 
 import {
-  IconButton,
-  InputAdornment,
   styled,
   SxProps,
   TextField as MaterialTextField,
+  FormControl,
+  InputLabel,
+  IconButton,
+  InputAdornment,
 } from '@mui/material';
 import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
 
 import { VisibleIcon } from '@icons/VisibleIcon';
 import { VisibleOffIcon } from '@icons/VisibleOffIcon';
 
 export const TextField = styled(MaterialTextField)(({ theme }) => ({
-  '&.paper': {
-    '& .MuiFilledInput-root': {
-      background: theme.palette.background.paper,
-    },
+  'label + &': {
+    marginTop: theme.spacing(3),
   },
   [theme.breakpoints.down('xxs')]: {
     '& .MuiInputLabel-root': {
@@ -78,41 +78,43 @@ export function FormikTextInput({
       : null;
 
   return (
-    <TextField
-      id={id}
-      fullWidth
-      className={variant}
-      type={visible ? 'text' : type}
-      label={label}
-      variant="filled"
-      multiline={multiline}
-      minRows={minRows}
-      maxRows={maxRows}
-      rows={rows}
-      placeholder={placeholder}
-      value={formik.values[id] ? formik.values[id] : ''}
-      onChange={formik.handleChange}
-      onBlur={e => {
-        formik.handleBlur(e);
-        onBlur?.();
-      }}
-      onFocus={onFocus}
-      error={Boolean(actualError)}
-      sx={sx}
-      helperText={actualError || helperText}
-      autoComplete={autoComplete}
-      InputProps={
-        InputProps || {
-          endAdornment:
-            type === 'password' ? (
-              <InputAdornment position="end">
-                <IconButton onClick={() => setVisible(!visible)} edge="end" sx={{ mr: '-5px' }}>
-                  {visible ? <VisibleOffIcon /> : <VisibleIcon />}
-                </IconButton>
-              </InputAdornment>
-            ) : undefined,
+    <FormControl variant="standard">
+      <InputLabel shrink>{label}</InputLabel>
+      <TextField
+        id={id}
+        fullWidth
+        className={variant}
+        type={visible ? 'text' : type}
+        variant="filled"
+        multiline={multiline}
+        minRows={minRows}
+        maxRows={maxRows}
+        rows={rows}
+        placeholder={placeholder}
+        value={formik.values[id] ? formik.values[id] : ''}
+        onChange={formik.handleChange}
+        onBlur={e => {
+          formik.handleBlur(e);
+          onBlur?.();
+        }}
+        onFocus={onFocus}
+        error={Boolean(actualError)}
+        sx={sx}
+        helperText={actualError || helperText}
+        autoComplete={autoComplete}
+        InputProps={
+          InputProps || {
+            endAdornment:
+              type === 'password' ? (
+                <InputAdornment position="end">
+                  <IconButton onClick={() => setVisible(!visible)} edge="end" sx={{ mr: '-5px' }}>
+                    {visible ? <VisibleOffIcon /> : <VisibleIcon />}
+                  </IconButton>
+                </InputAdornment>
+              ) : undefined,
+          }
         }
-      }
-    />
+      />
+    </FormControl>
   );
 }
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -9,6 +9,8 @@ export const Field = styled(TextField)(({ theme }) => ({
   // background: theme.palette.background.default,
   [`& .MuiInputBase-root`]: {
     padding: theme.spacing(0, 1),
+    borderRadius: 360,
+    border: 'none',
   },
   // '& svg': {
   //   position: 'absolute',
@@ -48,6 +50,7 @@ export const Search = ({
       <Field
         placeholder={placeholder}
         variant="filled"
+        inputMode="search"
         className="paper"
         value={realTimeValue}
         size="small"

diff --git a/src/components/Table/DashboardTable.tsx b/src/components/Table/DashboardTable.tsx
@@ -5,9 +5,6 @@ import { Box, styled, SxProps, Table } from '@mui/material';
 import { Loader } from '@components/Loader';
 
 export const DashboardTableBase = styled(Table)(({ theme }) => ({
-  overflowX: 'auto',
-  scrollbarWidth: 'thin',
-
   '& td, & th': {
     ...theme.typography.body1,
     borderBottom: `1px solid ${theme.palette.divider}`,
@@ -55,19 +52,15 @@ export function DashboardTable({
   loading,
 }: PropsWithChildren<{ title?: React.ReactNode; sx?: SxProps; loading?: boolean }>) {
   return (
-    <Box>
+    <Box sx={{ ...sx }}>
       {title ? (
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          marginBottom={1}
-          minHeight={36}
-        >
+        <Box display="flex" justifyContent="space-between" marginBottom={1} minHeight={36}>
           {title}
         </Box>
       ) : null}
-      {loading ? <Loader /> : <DashboardTableBase sx={{ ...sx }}>{children}</DashboardTableBase>}
+      <Box sx={{ overflowX: 'auto', scrollbarWidth: 'thin', overflowY: 'clip' }}>
+        {loading ? <Loader /> : <DashboardTableBase>{children}</DashboardTableBase>}
+      </Box>
     </Box>
   );
 }
diff --git a/src/icons/ContactsIcon.tsx b/src/icons/ContactsIcon.tsx
@@ -2,16 +2,10 @@ import React from 'react';
 
 export function ContactsIcon({ size = 24 }: { size?: number }) {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M17.7891 3.00001H5.88662C3.74898 3.00001 2 4.74899 2 6.88672V14.1741C2 16.3118 3.74894 18.0608 5.88662 18.0608H9.40875L11.2306 20.6601C11.3763 20.8785 11.5949 21 11.8378 21C12.0808 21 12.3236 20.8785 12.4451 20.6842L14.2669 18.0608H17.789C19.9267 18.0608 21.6757 16.3118 21.6757 14.1741V6.88671C21.6757 4.74902 19.9267 3 17.789 3L17.7891 3.00001ZM6.90684 12.3765C5.88662 12.3765 5.06078 11.5506 5.06078 10.5304C5.06078 9.51014 5.88662 8.68428 6.90684 8.68428C7.92705 8.68428 8.7529 9.51014 8.7529 10.5304C8.7529 11.5506 7.92705 12.3765 6.90684 12.3765ZM11.765 12.3765C10.7448 12.3765 9.91894 11.5506 9.91894 10.5304C9.91894 9.51014 10.7448 8.68428 11.765 8.68428C12.7852 8.68428 13.6111 9.51014 13.6111 10.5304C13.6111 11.5506 12.7852 12.3765 11.765 12.3765ZM16.6232 12.3523C15.603 12.3523 14.7771 11.5264 14.7771 10.5062C14.7771 9.48591 15.603 8.66005 16.6232 8.66005C17.6191 8.66005 18.445 9.48591 18.4692 10.5062C18.4692 11.5264 17.6434 12.3523 16.6232 12.3523Z"
-        fill="#A0A1A6"
+        d="M5.58666 8.22624C5.83958 8.22624 6.05173 8.14068 6.22312 7.96957C6.39437 7.79846 6.47999 7.58645 6.47999 7.33353C6.47999 7.08047 6.39444 6.86832 6.22333 6.69707C6.05222 6.52568 5.8402 6.43999 5.58728 6.43999C5.33437 6.43999 5.12222 6.52554 4.95083 6.69665C4.77944 6.86777 4.69374 7.07978 4.69374 7.3327C4.69374 7.58575 4.7793 7.7979 4.95041 7.96915C5.12152 8.14054 5.3336 8.22624 5.58666 8.22624ZM8.99958 8.22624C9.25263 8.22624 9.46478 8.14068 9.63603 7.96957C9.80742 7.79846 9.89312 7.58645 9.89312 7.33353C9.89312 7.08047 9.80756 6.86832 9.63645 6.69707C9.46534 6.52568 9.25333 6.43999 9.00041 6.43999C8.74735 6.43999 8.5352 6.52554 8.36395 6.69665C8.19256 6.86777 8.10687 7.07978 8.10687 7.3327C8.10687 7.58575 8.19242 7.7979 8.36353 7.96915C8.53465 8.14054 8.74666 8.22624 8.99958 8.22624ZM12.4127 8.22624C12.6656 8.22624 12.8778 8.14068 13.0492 7.96957C13.2205 7.79846 13.3062 7.58645 13.3062 7.33353C13.3062 7.08047 13.2207 6.86832 13.0496 6.69707C12.8785 6.52568 12.6664 6.43999 12.4133 6.43999C12.1604 6.43999 11.9483 6.52554 11.7769 6.69665C11.6056 6.86777 11.52 7.07978 11.52 7.3327C11.52 7.58575 11.6055 7.7979 11.7767 7.96915C11.9478 8.14054 12.1598 8.22624 12.4127 8.22624ZM0.497284 17.5025V2.3929C0.497284 1.86818 0.682076 1.42103 1.05166 1.05145C1.42124 0.681862 1.86839 0.49707 2.39312 0.49707H15.6069C16.1316 0.49707 16.5787 0.681862 16.9483 1.05145C17.3179 1.42103 17.5027 1.86818 17.5027 2.3929V12.2733C17.5027 12.798 17.3179 13.2452 16.9483 13.6148C16.5787 13.9844 16.1316 14.1692 15.6069 14.1692H3.83062L0.497284 17.5025ZM3.12228 12.2733H15.6069V2.3929H2.39312V12.9867L3.12228 12.2733Z"
+        fill="#3E4A5C"
       />
     </svg>
   );

diff --git a/src/layouts/NetworkLayout/NetworkMenu.tsx b/src/layouts/NetworkLayout/NetworkMenu.tsx
@@ -140,7 +140,7 @@ export const NetworkMenu = ({ onItemClick }: NetworkMenuProps) => {
       <Item LeftIcon={SavingsIcon} label="Assets" onClick={onItemClick} path="/assets" />
       <Item LeftIcon={NetworkNodeIcon} label="Workers" onClick={onItemClick} path="/workers" />
       <Item LeftIcon={HandIcon} label="Delegations" onClick={onItemClick} path="/delegations" />
-      <Item LeftIcon={DoorIcon} label="Gateways" onClick={onItemClick} path="/gateways" />
+      {/* <Item LeftIcon={DoorIcon} label="Gateways" onClick={onItemClick} path="/gateways" /> */}
 
       <div style={{ flex: 1 }} />
 

diff --git a/src/layouts/NetworkLayout/UserMenu.tsx b/src/layouts/NetworkLayout/UserMenu.tsx
@@ -61,7 +61,6 @@ export function UserMenu() {
             transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
             color: 'primary.contrastText',
             // opacity: 0.2,
-            ml: 2,
             width: 20,
             height: 20,
           }}
@@ -73,10 +72,12 @@ export function UserMenu() {
         onClose={handleClose}
         disableEscapeKeyDown
         disableAutoFocus
-        PaperProps={{
-          sx: {
-            overflow: 'visible',
-            width: 261,
+        slotProps={{
+          paper: {
+            sx: {
+              overflow: 'visible',
+              width: 261,
+            },
           },
         }}
         transformOrigin={{
@@ -88,7 +89,7 @@ export function UserMenu() {
           vertical: 'bottom',
         }}
       >
-        <Box sx={{ ml: 2, mr: 2, mb: 2 }}>
+        <Box sx={{ m: 1 }}>
           <LogoutMenuItem />
         </Box>
       </UserMenuStyled>

diff --git a/src/pages/DashboardPage/Workers.tsx b/src/pages/DashboardPage/Workers.tsx
@@ -8,6 +8,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -39,7 +40,13 @@ function TableNavigation({
   const hasNextPage = page < totalPages;
 
   return (
-    <Box sx={{ textAlign: 'right', mt: 1 }}>
+    <Box
+      sx={{ textAlign: 'right', mt: 1 }}
+      display="flex"
+      alignItems="center"
+      flex={1}
+      justifyContent="flex-end"
+    >
       <IconButton
         onClick={() => {
           setPage?.(page - 1);
@@ -48,6 +55,9 @@ function TableNavigation({
       >
         <ArrowBackIosNew />
       </IconButton>
+      <Typography sx={{ fontVariant: 'tabular-nums' }}>
+        {page} / {totalPages}
+      </Typography>
       <IconButton
         onClick={() => {
           setPage?.(page + 1);

diff --git a/src/pages/WorkersPage/WorkerDelegate.tsx b/src/pages/WorkersPage/WorkerDelegate.tsx
@@ -144,6 +144,7 @@ export function WorkerDelegate({
             <FormRow>
               <FormikSelect
                 id="source"
+                label="Wallet"
                 disabled={!options.length}
                 showErrorOnlyOfTouched
                 options={options}

diff --git a/src/pages/WorkersPage/WorkersPage.tsx b/src/pages/WorkersPage/WorkersPage.tsx
@@ -6,7 +6,8 @@ import { Link, Outlet } from 'react-router-dom';
 
 import { SortDir, useMyWorkers, WorkerSortBy } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
-import { Loader } from '@components/Loader';
+import { NoItems } from '@components/NoItems';
+import Placeholder from '@components/Placeholer';
 import { SortableHeaderCell } from '@components/Table/BorderedTable';
 import { DashboardTable } from '@components/Table/DashboardTable';
 import { Location, useLocationState } from '@hooks/useLocationState';
@@ -34,6 +35,7 @@ export function MyWorkers() {
   return (
     <Box>
       <DashboardTable
+        loading={isLoading}
         title={
           <>
             <SquaredChip label="My Workers" color="primary" />
@@ -50,9 +52,7 @@ export function MyWorkers() {
           </>
         }
       >
-        {isLoading ? (
-          <Loader />
-        ) : data.length ? (
+        {data.length ? (
           <>
             <TableHead>
               <TableRow>
@@ -107,7 +107,9 @@ export function MyWorkers() {
             </TableBody>
           </>
         ) : (
-          'No items to show'
+          <Placeholder>
+            <NoItems />
+          </Placeholder>
         )}
       </DashboardTable>
     </Box>