Edit and actions updates

packages/ui/components/Button.tsx

@@ -19,6 +19,12 @@ const buttonColors = {
   destructive: colors.brightRed,
 };
 
+const buttonHighlightColors = {
+  primary: colors.darkBlue,
+  secondary: colors.highlightGray,
+  destructive: colors.mediumRed,
+};
+
 export const InternalButton: FC<InternalButtonProps> = ({
   text,
   color,
@@ -41,6 +47,9 @@ export const InternalButton: FC<InternalButtonProps> = ({
       margin: 0,
       whiteSpace: "nowrap",
       textTransform: "none",
+      "&:hover": {
+        backgroundColor: buttonHighlightColors[kind ?? "secondary"],
+      },
     }}
   >
     {text}

packages/ui/components/Dialog.tsx

@@ -21,33 +21,49 @@ const DialogDetails: FC<DialogDetailsProps> = ({
   children,
   buttons,
 }) => {
-  const { h3 } = typography;
-  const { mediumGray, darkMediumGray } = colors;
+  const { h4 } = typography;
+  const { lightGray, mediumGray, darkMediumGray, white, almostBlack } = colors;
 
   return (
     <>
       <DialogTitle
         sx={{
           backgroundColor: mediumGray,
-          p: 3,
+          borderBottom: `1px solid ${darkMediumGray}`,
+          px: 3,
+          py: 2,
         }}
       >
         <Box
           sx={{
-            ...h3,
-            borderBottom: `1px solid ${darkMediumGray}`,
-            pb: 1.5,
+            ...h4,
+            color: almostBlack,
           }}
         >
           {title}
         </Box>
       </DialogTitle>
-      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
-        {children}
+      <DialogContent
+        sx={{
+          backgroundColor: lightGray,
+          p: 3,
+          borderTop: `1px solid ${white}`,
+          borderBottom: `1px solid ${darkMediumGray}`,
+        }}
+      >
+        <Box sx={{ color: "white", py: 3 }}>{children}</Box>
       </DialogContent>
       {buttons && (
-        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
-          {buttons}
+        <DialogActions sx={{ backgroundColor: mediumGray, p: 0 }}>
+          <Box
+            sx={{
+              p: 2,
+              borderTop: `1px solid ${white}`,
+              width: "100%",
+            }}
+          >
+            {buttons}
+          </Box>
         </DialogActions>
       )}
     </>
@@ -57,7 +73,8 @@ const DialogDetails: FC<DialogDetailsProps> = ({
 type DialogProps = {
   title: string;
   open: boolean;
-  onClose: Function;
+  onClose?: Function;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   formAction?: any;
   buttons?: React.ReactNode;
   children?: any;
@@ -66,6 +83,7 @@ type DialogProps = {
 export const Dialog: FC<DialogProps> = ({
   title,
   open,
+  size = "md",
   onClose,
   formAction,
   buttons,
@@ -76,7 +94,7 @@ export const Dialog: FC<DialogProps> = ({
       open={open}
       onClose={onClose as any}
       fullWidth
-      maxWidth="md"
+      maxWidth={size}
     >
       {formAction ? (
         <form action={formAction}>

packages/ui/components/DisplayTextField.tsx

@@ -46,14 +46,14 @@ export const DisplayTextField: FC<DisplayTextFieldProps> = ({
           WebkitTextFillColor: almostBlack,
         },
         "& .MuiFormLabel-root": {
-          fontSize: 20,
+          fontSize: 18,
           color: darkGray,
           minWidth: 0,
         },
       }}
       InputProps={{
         endAdornment: copyable ? (
-          <InputAdornment position="start">
+          <InputAdornment position="end">
             <IconButton
               onClick={() => copyToClipboard(value)}
               size="small"
@@ -67,7 +67,7 @@ export const DisplayTextField: FC<DisplayTextFieldProps> = ({
         disableUnderline: true,
         sx: {
           minWidth: 0,
-          fontSize: 18,
+          fontSize: 16,
           backgroundColor: "transparent",
           pt: "1px",
         },

packages/ui/components/TextField.tsx

@@ -1,10 +1,18 @@
 import { FC } from "react";
-import { TextField as InternalTextField } from "@mui/material";
+import {
+  TextField as InternalTextField,
+  InputAdornment,
+  IconButton,
+} from "@mui/material";
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { colors } from "../styles/theme";
 
 type TextFieldProps = {
   name: string;
   label: string;
   formState: Record<string, any>;
+  refreshable?: boolean;
+  disabled?: boolean;
   required?: boolean;
   lines?: number;
   helperText?: string;
@@ -14,25 +22,45 @@ export const TextField: FC<TextFieldProps> = ({
   name,
   label,
   formState,
+  refreshable = false,
+  disabled = false,
   required = false,
   lines = 1,
   helperText,
-}) => (
-  <InternalTextField
-    fullWidth
-    name={name}
-    label={label}
-    size="small"
-    multiline={lines > 1}
-    rows={lines}
-    required={required}
-    defaultValue={formState.values[name]}
-    error={Boolean(formState.errors[name])}
-    helperText={formState.errors[name] ?? helperText}
-    InputProps={{
-      sx: {
-        backgroundColor: "#fff",
-      },
-    }}
-  />
-);
+}) => {
+  const { darkMediumGray } = colors;
+
+  return (
+    <InternalTextField
+      fullWidth
+      name={name}
+      label={label}
+      size="small"
+      disabled={disabled}
+      multiline={lines > 1}
+      rows={lines}
+      required={required}
+      defaultValue={formState.values[name]}
+      error={Boolean(formState.errors[name])}
+      helperText={formState.errors[name] ?? helperText}
+      InputProps={{
+        endAdornment: refreshable ? (
+          <InputAdornment position="end">
+            <IconButton
+              onClick={() => {}}
+              size="small"
+              color="primary"
+              sx={{ p: 0, color: darkMediumGray }}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </InputAdornment>
+        ) : null,
+
+        sx: {
+          backgroundColor: "#fff",
+        },
+      }}
+    />
+  );
+};

packages/ui/styles/theme.ts

@@ -29,8 +29,11 @@ export const colors: any = {
   lightGray: "#ededf0",
   mediumGray: "#e3e5e5",
   darkMediumGray: "#a3a5a5",
+  highlightGray: "#818383",
   darkGray: "#33302f",
+  veryDarkGray: "#25272A",
   mediumBlue: "#4285f4",
+  darkBlue: "#2063d2",
   green: "#349d7b",
   lavender: "#a5a6f6",
   darkLavender: "#5d5fef",
@@ -52,6 +55,7 @@ export const colors: any = {
   lightOrange: "#fff5f0",
   beige: "#f6f2f1",
   brightRed: "#ff0030",
+  mediumRed: "#bb0010",
   almostBlack: "#33302f",
   white: "#ffffff",
   black: "#000000",
@@ -82,7 +86,7 @@ export const typography: any = {
   h4: {
     fontFamily: poppins.style.fontFamily,
     fontWeight: 700,
-    fontSize: 18,
+    fontSize: 22,
   },
   h5: {
     fontFamily: roboto.style.fontFamily,