text shadow added

danikova · Dec 1, 2023 · be1d6a8 · be1d6a8
1 parent 701efe6
commit be1d6a8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
@@ -22,7 +22,7 @@ function CounterDisplaySingleDigit({ num }: { num: number }) {
   return (
     <div className="w-[45px] h-[5rem] flex flex-col overflow-hidden">
       <div
-        className="transition-[duration] duration-500"
+        className="transition-[margin] duration-500"
         style={{ marginTop: `calc(${-offset} * 5rem)` }}
       >
         {numbers.map((n) => getNumber(n))}
@@ -50,12 +50,16 @@ function CounterDisplayNumber({
 
   return (
     <Tooltip>
-      <TooltipTrigger disabled={!tooltip} className={cn("flex", className)}>
-        {nums.map((num, i) => (
-          <CounterDisplaySingleDigit key={`${i}`} num={num} />
-        ))}
+      <TooltipTrigger disabled={!tooltip} asChild>
+        <div className={cn("flex", className)}>
+          {nums.map((num, i) => (
+            <CounterDisplaySingleDigit key={`${i}`} num={num} />
+          ))}
+        </div>
       </TooltipTrigger>
-      <TooltipContent side="bottom">{tooltip}</TooltipContent>
+      <TooltipContent side="bottom" className="[text-shadow:none]">
+        {tooltip}
+      </TooltipContent>
     </Tooltip>
   );
 }

diff --git a/src/components/main-content.tsx b/src/components/main-content.tsx
@@ -1,22 +1,37 @@
 import { Title } from "./title";
-import { useMemo } from "react";
 import { cn } from "../lib/utils";
 import { Counter } from "./counter";
 import { useAtomValue } from "jotai";
 import { useTheme } from "@/lib/theme";
+import { CSSProperties, useMemo } from "react";
 import { dominantColorsAtom } from "../lib/globals";
+import { Hsl } from "@/lib/hue";
+
+function hsla(hsl: Hsl, a = 1.0) {
+  return `${~~(hsl.h * 360)} ${hsl.s * 100}%, ${hsl.l * 100}%, ${a * 100}%`;
+}
 
 export function MainContent({ className }: { className?: string }) {
   const { themeClass } = useTheme();
   const dominantColors = useAtomValue(dominantColorsAtom);
-  const style = useMemo(() => {
-    if (!dominantColors.length) return {};
+  const style = useMemo<CSSProperties>(() => {
     for (const c of dominantColors) {
-      const l = themeClass === "light" ? Math.max(c.l - 0.4, 0) : c.l;
+      const tL =
+        themeClass === "light"
+          ? Math.max(c.l - 0.4, 0)
+          : Math.min(c.l + 0.15, 1);
+
+      const tsL =
+        themeClass !== "light"
+          ? Math.max(c.l - 0.4, 0)
+          : Math.min(c.l + 0.15, 1);
+
       return {
-        color: `hsl(${~~(c.h * 360)} ${c.s * 100}%, ${l * 100}%)`,
+        color: `hsla(${hsla({ ...c, l: tL })})`,
+        textShadow: `4px 4px hsla(${hsla({ ...c, l: tsL })})`,
       };
     }
+    return {};
   }, [themeClass, dominantColors]);
 
   return (