From 4fcdfc2a143e98a234c1207ee3712db71971776a Mon Sep 17 00:00:00 2001
From: mhsmith321 <emily.drake.smith@gmail.com>
Date: Tue, 15 Oct 2024 15:58:06 -0400
Subject: [PATCH] increase type specificity in `WarningBox.tsx` file

---
 .../WarningBox/WarningBox.tsx                 | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/RangeActionModal/WarningBox/WarningBox.tsx b/src/components/RangeActionModal/WarningBox/WarningBox.tsx
index d68780ca0b..d2bcc8dc7f 100644
--- a/src/components/RangeActionModal/WarningBox/WarningBox.tsx
+++ b/src/components/RangeActionModal/WarningBox/WarningBox.tsx
@@ -2,22 +2,25 @@ import React from 'react';
 import styles from './WarningBox.module.css'; // Import your styles here
 import { IoWarningOutline } from 'react-icons/io5';
 
+type dashedString = `--${string}`;
+type cssVariable = `var(${dashedString})`;
+
 // interface for obj with custom CSS properties and their values
 interface ColorSetIF {
-    color: string;
-    background: string;
-    border: string;
+    color: cssVariable;
+    background: cssVariable;
+    border: `${number}px solid ${cssVariable}`;
 }
 
 // class constructor to make color set creation more readable
 class ColorSet implements ColorSetIF {
-    public readonly color: string;
-    public readonly background: string;
-    public readonly border: string;
+    public readonly color: cssVariable;
+    public readonly background: cssVariable;
+    public readonly border: `1px solid ${cssVariable}`;
     constructor(
-        col: string,
-        bck: string,
-        bor: string,
+        col: dashedString,
+        bck: dashedString,
+        bor: dashedString,
     ) {
         this.color = `var(${col})`;
         this.background = `var(${bck})`;