fix: correct LCO action strs

src/app/components/LandingCTA.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from 'react'
 
 export const LandingCTA: React.FC = () => {
   return (
-    <div className='w-full bg-gradient-to-r from-blue-500/40 to-emerald-500/80 rounded-box p-4 md:p-10'>
+    <div className='w-full bg-gradient-to-r from-neutral/80 to-neutral/90 rounded-box p-4 md:p-10'>
       <div className='flex flex-rows flex-wrap gap-6 justify-center'>
         <Card4All />
         <Card4Coders />
@@ -42,7 +42,7 @@ const Card4All: React.FC = () => {
       title='Climbers'
       body={
         <ul>
-          <li>☑️ Add missing climbs</li>
+          <li>☑️ Add missing climbs.</li>
           <li>☑️ Help us make your local climbing&#39;s area page even better!</li>
         </ul>
       }
@@ -81,7 +81,7 @@ interface CTACardProps {
 const Card: React.FC<CTACardProps> = ({ title, body, action, className }) => {
   return (
     <div className='px-4'>
-      <h2 className='font-medium text-base-content/60 uppercase'>{title}</h2>
+      <h2 className='px-4 font-medium text-base-200 uppercase'>{title}</h2>
       <div className={clx('px-4 card card-bordered max-w-sm bg-base-100 shadow-lg', className)}>
         <div className='card-body'>
           <div>{body}</div>

src/app/components/RecentEdits.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { ArrowRightIcon } from '@heroicons/react/24/outline'
 
 import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI'
-import { ChangesetRow } from '@/components/edit/RecentChangeHistory'
+import { ChangesetCard } from '@/components/edit/RecentChangeHistory'
 
 /**
  * Cache time in seconds
@@ -23,7 +23,7 @@ export const RecentEdits: React.FC = async () => {
       <hr className='mb-6 border-2 border-base-content' />
       <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
         {history.splice(0, 10).map(changetset =>
-          <ChangesetRow key={changetset.id} changeset={changetset} />
+          <ChangesetCard key={changetset.id} changeset={changetset} />
         )}
 
       </div>

src/app/components/RecentTags.tsx

@@ -24,12 +24,12 @@ export const RecentTags: React.FC = async () => {
   })
 
   return (
-    <section className='w-full'>
+    <section className='w-full '>
       <div className='px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
         <h2>Recent Tags</h2>
       </div>
 
-      <div className='overflow-hidden'>
+      <div className='overflow-hidden bg-base-200/20'>
         <hr className='border-2 border-base-content' />
         <div className='py-8 grid grid-flow-col auto-cols-max gap-x-4 overflow-x-auto'>
           {

src/app/layout.tsx

@@ -11,7 +11,8 @@ export const metadata: Metadata = {
   openGraph: {
     description: 'OpenBeta is a free climbing platform.  Join the community and share your knowledge today.',
     images: '/south-africa-og.jpeg'
-  }
+  },
+  metadataBase: new URL(`https://${process.env.VERCEL_URL ?? 'http://localhost:3000'}`)
 }
 
 export default function RootLayout ({

src/app/page.tsx

@@ -5,6 +5,9 @@ import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
 
+/**
+ * Root home page
+ */
 export default async function Home (): Promise<any> {
   return (
     <div className='mt-8 w-full flex flex-col gap-y-24'>

src/components/edit/RecentChangeHistory.tsx

@@ -9,10 +9,14 @@ import { ChangesetType, ChangeType, AreaType, ClimbType, OrganizationType, Docum
 export interface RecentChangeHistoryProps {
   history: ChangesetType[]
 }
+
+/**
+ * Show all changes
+ */
 export default function RecentChangeHistory ({ history }: RecentChangeHistoryProps): JSX.Element {
   return (
     <div className='mt-4 flex flex-col gap-y-10 w-full'>
-      {history.map(changetset => <ChangesetRow key={changetset.id} changeset={changetset} />)}
+      {history.map(changetset => <ChangesetCard key={changetset.id} changeset={changetset} />)}
     </div>
   )
 }
@@ -21,7 +25,10 @@ interface ChangsetRowProps {
   changeset: ChangesetType
 }
 
-export const ChangesetRow = ({ changeset }: ChangsetRowProps): JSX.Element => {
+/**
+ * A card showing individual changeset
+ */
+export const ChangesetCard: React.FC<ChangsetRowProps> = ({ changeset }) => {
   const { createdAt, editedByUser, operation, changes } = changeset
 
   // @ts-expect-error
@@ -186,13 +193,6 @@ const ActionIcon = ({ icon, clz }: ActionIconProps): JSX.Element => (
   <div className={`bg-opacity-60 rounded-full border border-base-300 p-2 ${clz ?? ''}`}>{icon}</div>
 )
 
-interface OpBadgeProps {
-  label: string
-  clz?: string
-}
-
-const OpBadge = ({ label, clz = 'badge-outline' }: OpBadgeProps): JSX.Element => <span className={`badge ${clz}`}>{label}</span>
-
 const operationLabelMap = {
   addArea: {
     borderCue: 'border-l-green-500',
@@ -235,15 +235,18 @@ const operationLabelMap = {
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
   addOrganization: {
-    badge: <OpBadge label='Add Organization' clz='badge-warning' />,
+    badge: 'added an organization',
+    borderCue: 'border-l-green-500',
     icon: <ActionIcon icon={<PlusIcon className='w-6 h-6 stroke-base-300 stroke-2' />} clz='bg-success' />
   },
   updateOrganization: {
-    badge: <OpBadge label='Update Organization' clz='badge-warning' />,
+    badge: 'updated an organization',
+    borderCue: 'border-l-black',
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
   deleteOrganization: {
-    badge: <OpBadge label='Delete Organization' clz='badge-warning' />,
+    badge: 'deleted an organization',
+    borderCue: 'border-l-pink-500',
     icon: <ActionIcon icon={<MinusIcon className='w-6 h-6 stroke-base-300' />} clz='bg-error' />
   }
 }

src/components/ui/Card/Card.tsx

@@ -17,7 +17,7 @@ export default function Card ({
   bordered = false
 }: CardProps): JSX.Element {
   return (
-    <div className={clx('card card-compact', bordered ? 'border shadow-lg' : '')}>
+    <div className={clx('card card-compact bg-base-100', bordered ? 'border shadow-lg' : '')}>
       <div className={clx('flex items-center justify-between', bordered ? 'mx-2' : '')}>{header}</div>
       <figure className='overflow-hidden rounded sm:rounded-none sm:rounded-box'>
         {image}