UI appearance nits (#137)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Thibaut Sardan <github@thib.top>
delegit-xyz · Sep 16, 2024 · b95c622 · b95c622
1 parent 9065690
commit b95c622
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 68 deletions.
diff --git a/src/components/DelegateCard.tsx b/src/components/DelegateCard.tsx
@@ -3,15 +3,25 @@ import { Card } from '@/components/ui/card'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Delegate } from '@/contexts/DelegatesContext'
 import { ContentReveal } from './ui/content-reveal'
+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 { AnchorLink } from './ui/anchorLink'
 
 interface Props {
   delegate: Delegate
+  className?: string
+  hasShareButton?: boolean
+  hasDelegateButton?: boolean
 }
+
 export const DelegateCard = ({
   delegate: { address, longDescription, shortDescription, image, name },
+  className,
+  hasShareButton,
+  hasDelegateButton = true,
 }: Props) => {
   const navigate = useNavigate()
   const { search } = useLocation()
@@ -21,17 +31,32 @@ export const DelegateCard = ({
   const onDelegate = () => {
     navigate(`/delegate/${address}${search}`)
   }
+  const onCopy = () => {
+    navigator.clipboard.writeText(
+      window.location.origin + `/delegate/${address}${search}`,
+    )
+    toast.success('Copied to clipboard', {
+      duration: 1000,
+    })
+  }
 
   return (
-    <Card className="mb-5 flex flex-col border p-2">
-      <div className="flex flex-col md:flex-row">
+    <Card className={cn('flex flex-col p-4', className)}>
+      <div className="flex columns-3">
         <div className="vertical center p-2">
-          <img className="rounded-full" width="100" src={image} />
+          <img className="rounded-full border" width="100" src={image} />
         </div>
-        <div className="p-2 md:w-[85%]">
-          <div className="py-2 text-xl font-semibold">{name}</div>
-          <div className="text-slate-600">
-            <div className="break-words">{shortDescription}</div>
+        <div className="w-full p-2">
+          <div className="flex items-center gap-1 py-2 text-xl font-semibold">
+            {name}
+            {hasShareButton && (
+              <Button variant="ghost" onClick={onCopy} size="icon">
+                <LinkIcon className="h-4 w-4 text-accent-foreground" />
+              </Button>
+            )}
+          </div>
+          <div className="text-accent-foreground">
+            <div className="break-words text-lg">{shortDescription}</div>
             <ContentReveal hidden={shouldHideLongDescription}>
               <Markdown
                 components={{
@@ -46,9 +71,13 @@ export const DelegateCard = ({
             </ContentReveal>
           </div>
         </div>
-        <Button variant="default" onClick={onDelegate}>
-          Delegate
-        </Button>
+        <div className="flex gap-1">
+          {hasDelegateButton && (
+            <Button variant="default" onClick={onDelegate}>
+              Delegate
+            </Button>
+          )}
+        </div>
       </div>
     </Card>
   )

diff --git a/src/components/MyDelegations.tsx b/src/components/MyDelegations.tsx
@@ -81,8 +81,8 @@ export const MyDelegations = () => {
 
   return (
     <>
-      <Title className="mt-4">My Delegations</Title>
-      <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+      <Title>My Delegations</Title>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
         {delegationsByDelegateConvictionAmount === undefined ? (
           <Skeleton className="h-[116px] rounded-xl" />
         ) : noDelegations ? (

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={type}
           className={cn(
-            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-red-500',
             className,
           )}

diff --git a/src/components/ui/title.tsx b/src/components/ui/title.tsx
@@ -7,9 +7,13 @@ interface Props {
 }
 export const Title = ({ children, variant = 'h1', className }: Props) => {
   const baseClass =
-    'flex-1 shrink-0 whitespace-nowrap font-unbounded font-semibold tracking-tight text-slate-600 sm:grow-0'
+    'flex-1 shrink-0 whitespace-nowrap font-unbounded font-semibold tracking-tight text-accent-foreground sm:grow-0'
   if (variant === 'h1')
-    return <h1 className={cn(baseClass, 'text-2xl', className)}>{children}</h1>
+    return (
+      <h1 className={cn(baseClass, 'mb-5 mt-10 text-2xl', className)}>
+        {children}
+      </h1>
+    )
   if (variant === 'h2')
     return <h2 className={cn(baseClass, 'text-xl', className)}>{children}</h2>
   if (variant === 'h3')

diff --git a/src/index.css b/src/index.css
@@ -17,19 +17,19 @@
 @layer base {
   :root {
     --background: 0 5% 98%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 240 5% 20%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 240 5% 20%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --popover-foreground: 240 5% 20%;
     --primary: 328 100% 45%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent: 228 12% 94%;
+    --accent-foreground: 215 20% 35%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
@@ -57,7 +57,7 @@
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 213 27% 84%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;

diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx
@@ -17,6 +17,8 @@ import { AlertNote } from '@/components/Alert'
 import { useTestTx } from '@/hooks/useTestTx'
 import { MultiTransactionDialog } from './MultiTransactionDialog'
 import { useGetSigningCallback } from '@/hooks/useGetSigningCallback'
+import { Title } from '@/components/ui/title'
+import { DelegateCard } from '@/components/DelegateCard'
 
 export const Delegate = () => {
   const { api, assetInfo } = useNetwork()
@@ -176,7 +178,7 @@ export const Delegate = () => {
   }
 
   return (
-    <main className="mx-0 grid flex-1 items-start gap-8 p-4 sm:mx-[5%] sm:px-6 sm:py-0 xl:mx-[20%]">
+    <main className="m-auto grid w-full max-w-4xl gap-4 p-4 sm:px-6 sm:py-0">
       {!api && (
         <AlertNote
           title={msgs.api.title}
@@ -196,52 +198,60 @@ export const Delegate = () => {
         <ArrowLeft className="h-4 w-4" />
         To all delegates
       </Link>
-      <h1 className="flex-1 shrink-0 whitespace-nowrap font-unbounded text-xl font-semibold tracking-tight sm:grow-0">
-        Delegate to {delegate.name}
-      </h1>
-      <div>
-        <Label>Amount</Label>
-        <Input
-          onChange={(value) => onChangeAmount(value, assetInfo.precision)}
-          value={amountVisible}
-          error={amountErrorDisplay}
+      <Title>Delegate to {delegate.name}</Title>
+      <div className="flex columns-3">
+        <DelegateCard
+          delegate={delegate}
+          hasDelegateButton={false}
+          hasShareButton
+          className="p0 border-none bg-transparent shadow-none"
         />
       </div>
+      <div className="grid gap-8 rounded-xl bg-card p-6 shadow-xl">
+        <div>
+          <Label>Amount</Label>
+          <Input
+            onChange={(value) => onChangeAmount(value, assetInfo.precision)}
+            value={amountVisible}
+            error={amountErrorDisplay}
+          />
+        </div>
 
-      <Label className="flex">
-        Conviction: {convictionDisplay}
-        <div className="ml-2">{}</div>
-      </Label>
-      <Slider
-        disabled={!api || !selectedAccount}
-        value={[convictionNo]}
-        min={0}
-        max={6}
-        step={1}
-        marks
-        marksLabels={['0.1', '1', '2', '3', '4', '5', '6']}
-        marksPreFix={'x'}
-        labelPosition="bottom"
-        onValueChange={(v: SetStateAction<number>[]) => {
-          const value = v[0] === 0 ? '0.1' : `Locked${v[0]}x`
-          setConvictionNo(v[0])
-          setConviction(
-            VotingConviction[value as keyof typeof VotingConviction],
-          )
-        }}
-      />
-      <AlertNote
-        title={'Note'}
-        message={`The ${convictionTimeDisplay} will start when you undelegate`}
-        variant={'default'}
-      />
-      <Button
-        onClick={onSign}
-        disabled={amount === 0n || !api || !selectedAccount || isTxInitiated}
-        loading={isTxInitiated}
-      >
-        Delegate with {voteAmount} {assetInfo.symbol} votes
-      </Button>
+        <Label className="flex">
+          Conviction: {convictionDisplay}
+          <div className="ml-2">{}</div>
+        </Label>
+        <Slider
+          disabled={!api || !selectedAccount}
+          value={[convictionNo]}
+          min={0}
+          max={6}
+          step={1}
+          marks
+          marksLabels={['0.1', '1', '2', '3', '4', '5', '6']}
+          marksPreFix={'x'}
+          labelPosition="bottom"
+          onValueChange={(v: SetStateAction<number>[]) => {
+            const value = v[0] === 0 ? '0.1' : `Locked${v[0]}x`
+            setConvictionNo(v[0])
+            setConviction(
+              VotingConviction[value as keyof typeof VotingConviction],
+            )
+          }}
+        />
+        <AlertNote
+          title={'Note'}
+          message={`The ${convictionTimeDisplay} will start when you undelegate`}
+          variant={'default'}
+        />
+        <Button
+          onClick={onSign}
+          disabled={amount === 0n || !api || !selectedAccount || isTxInitiated}
+          loading={isTxInitiated}
+        >
+          Delegate with {voteAmount} {assetInfo.symbol} votes
+        </Button>
+      </div>
       <MultiTransactionDialog
         isOpen={isMultiTxDialogOpen}
         onOpenChange={onChangeSplitTransactionDialog}

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -8,12 +8,14 @@ export const Home = () => {
   const { delegates } = useDelegates()
 
   return (
-    <main className="mx-0 flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8">
+    <main className="m-auto w-full max-w-4xl p-4 sm:px-6 sm:py-0 md:gap-8">
       <LocksCard />
       <MyDelegations />
-      <Title className="mt-4">Delegates</Title>
+      <Title>Delegates</Title>
       <div className="sm:grid sm:grid-cols-1">
-        {delegates?.map((d) => <DelegateCard key={d.address} delegate={d} />)}
+        {delegates?.map((d) => (
+          <DelegateCard key={d.address} delegate={d} className="mb-5" />
+        ))}
       </div>
     </main>
   )