Misc UI nits (#153)

src/components/DelegateCard.tsx

@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
 import { LinkIcon } from 'lucide-react'
 import Markdown from 'react-markdown'
-import { Title, TitleH2, TitleH3 } from './ui/title'
+import { H, H2, H3, Hr, P } from './ui/md'
 import { AnchorLink } from './ui/anchorLink'
 
 interface Props {
@@ -40,13 +40,25 @@ export const DelegateCard = ({
     })
   }
 
+  const DelegateAvatar: React.FC = () => {
+    const divStyle: React.CSSProperties = {
+      backgroundImage: 'url(' + image + ')',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+    }
+    return (
+      <div
+        className="vertical center h-20 w-20 min-w-20 rounded-full border"
+        style={divStyle}
+      />
+    )
+  }
+
   return (
     <Card className={cn('flex flex-col p-4', className)}>
-      <div className="flex flex-col md:flex-row">
-        <div className="vertical center p-2">
-          <img className="rounded-full border" width="100" src={image} />
-        </div>
-        <div className="p-2 md:w-[85%]">
+      <div className="flex flex-col gap-4 md:flex-row">
+        <DelegateAvatar />
+        <div className="w-full">
           <div className="flex items-center gap-1 py-2 text-xl font-semibold">
             {name}
             {hasShareButton && (
@@ -60,10 +72,12 @@ export const DelegateCard = ({
             <ContentReveal hidden={shouldHideLongDescription}>
               <Markdown
                 components={{
-                  h1: Title,
-                  h2: TitleH2,
-                  h3: TitleH3,
+                  h1: H,
+                  h2: H2,
+                  h3: H3,
                   a: AnchorLink,
+                  hr: Hr,
+                  p: P,
                 }}
               >
                 {longDescription}

src/components/DelegationByAmountConviction.tsx

@@ -41,6 +41,7 @@ export const DelegationByAmountConviction = ({
           <ContentReveal
             title={<Badge>{trackIds.length} tracks</Badge>}
             buttonClassName="w-auto"
+            maxHeightClassName="max-h-tracks"
           >
             {trackIds.sort().map((trackId) => (
               <TrackDisplay key={trackId} trackId={trackId} />

src/components/ui/content-reveal.tsx

@@ -6,7 +6,7 @@ type Props = {
   children: React.ReactNode
   className?: string
   hidden?: boolean
-  noMaxHeight?: boolean
+  maxHeightClassName?: string
   title?: string | React.ReactNode
   buttonClassName?: string
 }
@@ -15,11 +15,10 @@ export const ContentReveal = ({
   children,
   className,
   hidden = false,
-  noMaxHeight = false,
+  maxHeightClassName = 'max-h-96',
   title = '',
   buttonClassName = '',
 }: Props) => {
-  const maxHeight = noMaxHeight ? '' : 'max-h-96'
   const [isOpen, setIsOpen] = useState(false)
 
   useEffect(() => {
@@ -54,7 +53,7 @@ export const ContentReveal = ({
       </button>
       <div
         className={`overflow-auto transition-all duration-300 ${
-          isOpen ? maxHeight : 'max-h-0'
+          isOpen ? maxHeightClassName : 'max-h-0'
         }`}
       >
         {children}

src/components/ui/md.tsx

@@ -0,0 +1,24 @@
+// Markdown elements for react-markdown
+
+import { cn } from '@/lib/utils'
+
+interface Props {
+  children?: React.ReactNode
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+export const H = ({ children, variant = 'h1' }: Props) => {
+  const baseClass = 'font-semibold text-accent-foreground mt-3 mb-1'
+  if (variant === 'h1')
+    return <h1 className={cn(baseClass, 'text-xl')}>{children}</h1>
+  if (variant === 'h2')
+    return <h2 className={cn(baseClass, 'text-lg')}>{children}</h2>
+  if (variant === 'h3')
+    return <h3 className={cn(baseClass, 'text-xs uppercase')}>{children}</h3>
+}
+
+export const H2 = ({ children }: Props) => <H variant="h2">{children}</H>
+export const H3 = ({ children }: Props) => <H variant="h3">{children}</H>
+
+export const P = ({ children }: Props) => <p className="mb-1">{children}</p>
+
+export const Hr = () => <hr className="my-4" />

src/components/ui/sheet.tsx

@@ -29,7 +29,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-200',
   {
     variants: {
       side: {

src/components/ui/title.tsx

@@ -33,15 +33,3 @@ export const Title = ({ children, variant = 'h1', className }: Props) => {
 
   return <h5 className={cn(baseClass, 'text-sm', className)}>{children}</h5>
 }
-
-// these are used in Markdown for react-markdown
-export const TitleH2 = ({ children, className }: Props) => (
-  <Title variant="h2" className={className}>
-    {children}
-  </Title>
-)
-export const TitleH3 = ({ children, className }: Props) => (
-  <Title variant="h3" className={className}>
-    {children}
-  </Title>
-)

src/pages/Delegate/MultiTransactionDialog.tsx

@@ -135,18 +135,19 @@ export const MultiTransactionDialog = ({
         <DialogHeader>
           <DialogTitle>Step {step}</DialogTitle>
           <DialogDescription>
-            <div className="m-4">
+            <div className="my-4">
               {step === 1 &&
-                'The delegation process is in 2 parts, first please sign a transaction to remove current votes and delegations'}
-              {step === 2 && 'Second please sign a transaction to delegate'}
+                'The delegation process is in 2 parts. First, please sign a transaction to remove current votes and delegations.'}
+              {step === 2 &&
+                'Votes and delegation are removed. You are now ready to sign a transaction to delegate.'}
             </div>
             <div className="text-end">
               <Button
                 onClick={onSign}
                 disabled={isTxInitiated}
                 loading={isTxInitiated}
               >
-                {!waitingForFinalization && `Sign tx ${step}/2`}
+                {!waitingForFinalization && `Sign transaction ${step} / 2`}
                 {waitingForFinalization && 'Waiting for finalization'}
               </Button>
             </div>

tailwind.config.js

@@ -20,6 +20,9 @@ module.exports = {
       },
     },
     extend: {
+      maxHeight: {
+        'tracks': '400px',
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',