Minor visual fixes for components (buttons, breadcrumbs, list group) (themesberg#971)

* fix(breadcrumb): size of chevron icons

* fix(buttons): align inner wrapper elements vertically (ie. buttons with icons)

* fix(list group): align icons with text vertically

* fix(spinner): make the spinner size smaller

* fix(toast): alignment for the buttons

Author: zoltanszogyenyi

app/docs/components/spinner/spinner.mdx

@@ -68,11 +68,11 @@ Add the loading spinner inside a button to indicate fetching status directly ins
 
 <CodePreview importFlowbiteReact="Button, Spinner" title="Buttons" className="flex flex-row gap-3">
   <Button>
-    <Spinner aria-label="Spinner button example" />
+    <Spinner aria-label="Spinner button example" size="sm" />
     <span className="pl-3">Loading...</span>
   </Button>
   <Button color="gray">
-    <Spinner aria-label="Alternate spinner button example" />
+    <Spinner aria-label="Alternate spinner button example" size="sm" />
     <span className="pl-3">Loading...</span>
   </Button>
 </CodePreview>

app/docs/components/toast/toast.mdx

@@ -121,10 +121,10 @@ This component can be used to show more complex messages with buttons and other
         <span className="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
         <div className="mb-2 text-sm font-normal">A new software version is available for download.</div>
         <div className="flex-start flex gap-2">
-          <div className="w-full">
+          <div className="w-auto">
             <Button size="xs">Update</Button>
           </div>
-          <div className="w-full">
+          <div className="w-auto">
             <Button color="light" size="xs">
               Not now
             </Button>

src/components/Breadcrumb/theme.ts

@@ -7,7 +7,7 @@ export const breadcrumbTheme: FlowbiteBreadcrumbTheme = {
   },
   item: {
     base: 'group flex items-center',
-    chevron: 'mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2',
+    chevron: 'mx-1 h-4 w-4 text-gray-400 group-first:hidden md:mx-2',
     href: {
       off: 'flex items-center text-sm font-medium text-gray-500 dark:text-gray-400',
       on: 'flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',

src/components/Button/theme.ts

@@ -72,7 +72,7 @@ export const buttonTheme: FlowbiteButtonTheme = {
       'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 enabled:hover:bg-gradient-to-l enabled:hover:from-teal-200 enabled:hover:to-lime-200 enabled:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700',
   },
   inner: {
-    base: 'flex items-stretch transition-all duration-200',
+    base: 'flex items-stretch items-center transition-all duration-200',
     position: {
       none: '',
       start: 'rounded-r-none',

src/components/ListGroup/theme.ts

@@ -7,7 +7,7 @@ export const listGroupTheme: FlowbiteListGroupTheme = {
   item: {
     base: '[&>*]:first:rounded-t-lg [&>*]:last:rounded-b-lg [&>*]:last:border-b-0',
     link: {
-      base: 'flex w-full border-b border-gray-200 py-2 px-4 dark:border-gray-600',
+      base: 'flex items-center w-full border-b border-gray-200 py-2 px-4 dark:border-gray-600',
       active: {
         off: 'hover:bg-gray-100 hover:text-cyan-700 focus:text-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500',
         on: 'bg-cyan-700 text-white dark:bg-gray-800',