namehash · lightwalker-eth · May 17, 2024 · notrab · May 22, 2024
@@ -1,43 +1,16 @@
 import React, { ReactNode } from "react";
 import cc from "classcat";
 import { Rating } from "@namehash/nameguard";
-
-function borderColor(rating: Rating) {
-  switch (rating) {
-    case Rating.alert: {
-      return "border-red-200";
-    }
-    case Rating.pass: {
-      return "border-green-200";
-    }
-    case Rating.warn: {
-      return "border-yellow-200";
-    }
-  }
-}
-
-function shadowColor(rating: Rating) {
-  switch (rating) {
-    case Rating.alert: {
-      return "shadow-red-50";
-    }
-    case Rating.pass: {
-      return "shadow-green-50";
-    }
-    case Rating.warn: {
-      return "shadow-yellow-50";
-    }
-  }
-}
+import { ratingBorderColor, ratingShadowColor } from "../../utils/colors";
 
 type RatedBoxProps = {
   rating?: Rating;
   children: ReactNode;
 };
 
 export const RatedBox = ({ rating, children }: RatedBoxProps) => {
-  const border = borderColor(rating);
-  const shadow = shadowColor(rating);
+  const border = ratingBorderColor(rating);
+  const shadow = ratingShadowColor(rating);
 
   const wrapperClass = cc(["rounded-xl border shadow-xl", border, shadow]);
 

@@ -7,7 +7,7 @@ import { RatingIcon, RatingIconSize } from "./RatingIcon";
 import { RatedBox } from "../RatedBox/RatedBox";
 import { ReportChangesApplied } from "./ReportChangesApplied";
 import { ReportFormattedDisplayName } from "./ReportFormattedName";
-import { ratingTextColor } from "../../utils/text";
+import { ratingTextColor } from "../../utils/colors";
 
 type Props = {
   report?: NameGuardReport;

@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 import { GraphemeList } from "./GraphemeList";
 import { NoGraphemesWarning } from "./NoGraphemesWarning";
 import { CheckResultCode, NameGuardReport, Rating } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { RatingIcon } from "./RatingIcon";
 
 type LabelListItemProps = {

@@ -2,7 +2,7 @@ import React from "react";
 import cc from "classcat";
 import { CheckResultCodeIcon } from "./CheckResultCodeIcon";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { ShieldExclamationIcon } from "@heroicons/react/20/solid";
 
 type Props = {

@@ -24,7 +24,7 @@ import { useGraphemeModalStore } from "../../stores/grapheme";
 import { ReportError } from "./ReportError";
 import { ExternalLinks } from "../ExternalLinks/ExternalLinks";
 import { Share } from "../Share/Share";
-import { ratingTextColor } from "../../utils/text";
+import { ratingTextColor } from "../../utils/colors";
 
 type ReportProps = {
   data?: NameGuardReport;

@@ -5,7 +5,7 @@ import { RatedBox } from "../RatedBox/RatedBox";
 
 import cc from "classcat";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 
 export const ReportError = () => {
   const [isOnline, setIsOnline] = useState(navigator.onLine);

@@ -10,7 +10,7 @@ import cc from "classcat";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { RatingLoadingIcon } from "../icons/RatingLoadingIcon";
 import { RatingIcon, RatingIconSize } from "../Report/RatingIcon";
-import { checkResultCodeTextColor, ratingTextColor } from "../../utils/text";
+import { checkResultCodeTextColor, ratingTextColor } from "../../utils/colors";
 import { ENSName } from "@namehash/ens-utils";
 import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon";
 

@@ -11,7 +11,7 @@ import { toast } from "sonner";
 import cc from "classcat";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { CheckResultCode } from "@namehash/nameguard";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 
 type ShareProps = {
   name?: string;

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeAlertIcon = ({

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeInfoIcon = ({

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodePassIcon = ({

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeSkipIcon = ({

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cc from "classcat";
-import { checkResultCodeTextColor } from "../../utils/text";
+import { checkResultCodeTextColor } from "../../utils/colors";
 import { CheckResultCode } from "@namehash/nameguard";
 
 export const CheckResultCodeWarnIcon = ({

@@ -1,4 +1,4 @@
-export { ratingTextColor, checkResultCodeTextColor } from "./utils/text";
+export { ratingTextColor, checkResultCodeTextColor } from "./utils/colors";
 export { Tooltip } from "./components/Tooltip/Tooltip";
 export { Search } from "./components/Search/Search";
 export { Report } from "./components/Report/Report";

@@ -4,62 +4,75 @@ export function checkResultCodeTextColor(
   check: CheckResultCode,
   isInteractive = false,
 ): string {
-  let color: string | null = null;
-
   switch (check) {
     case CheckResultCode.alert: {
-      color = isInteractive
+      return isInteractive
         ? "text-red-600 hover:text-red-700"
         : "text-red-600";
-      break;
     }
     case CheckResultCode.pass: {
-      color = isInteractive
+      return isInteractive
         ? "text-emerald-600 hover:text-emerald-800"
         : "text-emerald-600";
-      break;
     }
     case CheckResultCode.warn: {
-      color = isInteractive
+      return isInteractive
         ? "text-yellow-600 hover:text-yellow-700"
         : "text-yellow-600";
-      break;
     }
     case CheckResultCode.info:
     case CheckResultCode.skip: {
-      color = isInteractive
+      return isInteractive
         ? "text-gray-400 hover:text-gray-500"
         : "text-gray-400";
-      break;
     }
   }
-
-  return color;
 }
 
 export function ratingTextColor(rating: Rating, isInteractive = false): string {
-  let color: string | null = null;
-
   switch (rating) {
     case Rating.alert: {
-      color = isInteractive
+      return isInteractive
         ? "text-red-600 hover:text-red-700"
         : "text-red-600";
-      break;
     }
     case Rating.pass: {
-      color = isInteractive
+      return isInteractive
         ? "text-emerald-600 hover:text-emerald-800"
         : "text-emerald-600";
-      break;
     }
     case Rating.warn: {
-      color = isInteractive
+      return isInteractive
         ? "text-yellow-600 hover:text-yellow-700"
         : "text-yellow-600";
-      break;
     }
   }
+}
+
+export function ratingBorderColor(rating: Rating): string {
+  switch (rating) {
+    case Rating.alert: {
+      return "border-red-200";
+    }
+    case Rating.pass: {
+      return "border-green-200";
+    }
+    case Rating.warn: {
+      return "border-yellow-200";
+    }
+  }
+}
 
-  return color;
+export function ratingShadowColor(rating: Rating): string {
+  switch (rating) {
+    case Rating.alert: {
+      return "shadow-red-50";
+    }
+    case Rating.pass: {
+      return "shadow-green-50";
+    }
+    case Rating.warn: {
+      return "shadow-yellow-50";
+    }
+  }
 }