fix: general fixes

apps/web/components/core/color-picker-fab.tsx

@@ -6,12 +6,12 @@ function ColorPickerFab() {
   return (
     <div
       className={cn(
-        "fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-50 flex w-full justify-center sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+        "pointer-events-none fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-50 flex w-full justify-center sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
       )}
     >
       <div
         className={cn(
-          "flex max-w-xs items-center justify-center gap-4 rounded-full border border-white/10 p-2 shadow-lg backdrop-blur-xl backdrop-brightness-105 backdrop-saturate-150 dark:border-white/5 dark:backdrop-brightness-95",
+          "pointer-events-auto flex max-w-xs items-center justify-center gap-4 rounded-full border border-white/10 p-2 shadow-lg backdrop-blur-xl backdrop-brightness-105 backdrop-saturate-150 dark:border-white/5 dark:backdrop-brightness-95",
           // "bg-background-accent/75",
         )}
         style={{

apps/web/components/core/site-footer.tsx

@@ -58,7 +58,7 @@ function SiteFooter() {
               rel="noopener noreferrer"
               title="Visit Oliver's portfolio"
             >
-              Oliver Pan
+              Oliver
             </a>
             {". "}
             The source code is on{" "}

apps/web/components/palette/base-color-palettes.tsx

@@ -5,7 +5,7 @@ import { cn } from "@ui/lib/utils";
 import React from "react";
 
 import PaletteButton from "./base-palette-button";
-import { colorHelper } from "@/lib/colorHelper";
+import ColorString from "./color-string";
 
 function BaseColorPalettes() {
   const { colorPalettes, colorMode } = useColorStore.getState();
@@ -81,7 +81,13 @@ function BaseColorPalettes() {
                           "@md/section-secondary:hover:absolute @md/section-secondary:hover:left-0 @md/section-secondary:hover:top-0 @md/section-secondary:hover:z-10 @md/section-secondary:hover:shadow-sm",
                         )}
                       >
-                        {colorHelper.toColorMode(color.raw, colorMode)}
+                        <ColorString
+                          {...{
+                            step,
+                            type,
+                            animation: animation(step, type),
+                          }}
+                        />
                       </div>
                     </div>
                   </div>

apps/web/next.config.js

@@ -13,6 +13,10 @@ module.exports = {
       {
         hostname: 'fluid-colors.vercel.app',
       },
+      {
+        protocol: 'https',
+        hostname: 'user-images.githubusercontent.com',
+      },
     ]
   },
   transpilePackages: ["ui"],

apps/web/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/culori": "^2.0.1",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.25",

apps/web/tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
     plugins: [
         ...tailwindConfig.plugins,
         require('@tailwindcss/container-queries'),
-        require("tailwindcss-animate")
+        require("tailwindcss-animate"),
+        require('@tailwindcss/typography')
     ]
 }