Remove dots from class names, tune things

Author: Adam Plesnik

src/demos/SupportsDemo.tsx

@@ -21,7 +21,7 @@ const skeletonCollection = [
 
 const SupportsDemo = () => {
   return (
-    <DemoWrapper className="mt-4">
+    <DemoWrapper className="mt-4 h-48">
       <div className="no-animations:translate-y-0 sticky left-4 top-0 flex w-fit -translate-y-20 animate-translate-down flex-wrap gap-2 rounded-b-lg bg-sky-400/40 p-4 backdrop-blur timeline sm:left-8 dark:bg-fuchsia-600/40">
         <Code>animate...</Code>
         <Code>timeline</Code>

src/docs/Docs.tsx

@@ -105,7 +105,7 @@ const Docs = () => {
         Use the <Code>no-animations</Code> modifier to apply fallback styling in browsers which do
         not support scroll-driven animations yet.
       </Paragraph>
-      <DocsTable items={supportsClasses} noDots />
+      <DocsTable items={supportsClasses} />
       <SupportsDemo />
       <CodeBlock language="html">{supports}</CodeBlock>
     </div>

src/docs/DocsTable.tsx

@@ -1,7 +1,7 @@
 import Separator from '../components/Separator'
 import DocsTableRow from './DocsTableRow'
 
-const DocsTable = ({ items, noDots = false }: DocsTableProps) => {
+const DocsTable = ({ items }: DocsTableProps) => {
   return (
     <div className="flex flex-col gap-2 py-2">
       <div className="flex gap-1 text-xs font-bold sm:gap-4">
@@ -12,7 +12,7 @@ const DocsTable = ({ items, noDots = false }: DocsTableProps) => {
       <Separator />
       {items.map((item, index) => (
         <>
-          <DocsTableRow className={item.className} code={item.code} key={index} noDots={noDots} />
+          <DocsTableRow className={item.className} code={item.code} key={index} />
           <Separator key={'sep' + index} />
         </>
       ))}
@@ -22,7 +22,6 @@ const DocsTable = ({ items, noDots = false }: DocsTableProps) => {
 
 export interface DocsTableProps {
   items: Item[]
-  noDots?: boolean
 }
 
 export interface Item {

src/docs/DocsTableRow.tsx

@@ -1,19 +1,15 @@
-const DocsTableRow = ({ className, code, noDots = false }: DocsTableRowProps) => {
+const DocsTableRow = ({ className, code }: DocsTableRowProps) => {
   return (
     <div className="flex flex-col gap-1 font-mono text-sm sm:flex-row sm:gap-4">
-      <div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">
-        {noDots ? '' : '.'}
-        {className}
-      </div>
-      <div className="flex-1 pl-8 pr-2 text-sky-700 sm:pl-2 dark:text-sky-300">{code};</div>
+      <div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">{className}</div>
+      <div className="flex-1 pl-8 pr-2 text-sky-700 sm:pl-2 dark:text-cyan-600">{code};</div>
     </div>
   )
 }
 
 export interface DocsTableRowProps {
   className: string
   code: string
-  noDots?: boolean
 }
 
 export default DocsTableRow