Label uses new colors, removes unused cases and new env icons

Author: samejr

apps/webapp/app/components/environments/EnvironmentLabel.tsx

@@ -1,12 +1,10 @@
-import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
-import { cn } from "~/utils/cn";
-import { sortEnvironments } from "~/utils/environmentSort";
-import { SimpleTooltip } from "../primitives/Tooltip";
 import {
-  DeployedEnvironmentIcon,
-  DevEnvironmentIcon,
-  ProdEnvironmentIcon,
+  DeployedEnvironmentIconSmall,
+  DevEnvironmentIconSmall,
+  ProdEnvironmentIconSmall,
 } from "~/assets/icons/EnvironmentIcons";
+import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
+import { cn } from "~/utils/cn";
 
 type Environment = Pick<RuntimeEnvironment, "type">;
 
@@ -20,16 +18,20 @@ export function EnvironmentIcon({
   switch (environment.type) {
     case "DEVELOPMENT":
       return (
-        <DevEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <DevEnvironmentIconSmall className={cn(environmentTextClassName(environment), className)} />
       );
     case "PRODUCTION":
       return (
-        <ProdEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <ProdEnvironmentIconSmall
+          className={cn(environmentTextClassName(environment), className)}
+        />
       );
     case "STAGING":
     case "PREVIEW":
       return (
-        <DeployedEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <DeployedEnvironmentIconSmall
+          className={cn(environmentTextClassName(environment), className)}
+        />
       );
   }
 }
@@ -43,7 +45,7 @@ export function EnvironmentCombo({
 }) {
   return (
     <span className={cn("flex items-center gap-1.5 text-sm text-text-bright", className)}>
-      <EnvironmentIcon environment={environment} className="size-4" />
+      <EnvironmentIcon environment={environment} className="size-[1.125rem]" />
       <EnvironmentLabel environment={environment} />
     </span>
   );
@@ -89,54 +91,15 @@ export function environmentFullTitle(environment: Environment) {
   }
 }
 
-export function environmentTypeTitle(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "Prod";
-    case "STAGING":
-      return "Staging";
-    case "DEVELOPMENT":
-      return "Dev";
-    case "PREVIEW":
-      return "Preview";
-  }
-}
-
-export function environmentColorClassName(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "bg-green-500";
-    case "STAGING":
-      return "bg-amber-500";
-    case "DEVELOPMENT":
-      return "bg-pink-500";
-    case "PREVIEW":
-      return "bg-yellow-500";
-  }
-}
-
-export function environmentBorderClassName(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "border-green-500/50";
-    case "STAGING":
-      return "border-amber-500/50";
-    case "DEVELOPMENT":
-      return "border-pink-500/50";
-    case "PREVIEW":
-      return "border-yellow-500/50";
-  }
-}
-
 export function environmentTextClassName(environment: Environment) {
   switch (environment.type) {
     case "PRODUCTION":
-      return "text-green-500";
+      return "text-prod";
     case "STAGING":
-      return "text-amber-500";
+      return "text-staging";
     case "DEVELOPMENT":
-      return "text-pink-500";
+      return "text-dev";
     case "PREVIEW":
-      return "text-yellow-500";
+      return "text-preview";
   }
 }