prettify

Author: JefteCaro

src/components/Input.tsx

@@ -37,7 +37,7 @@ const Input: React.FC = () => {
     const getClassName = useCallback(() => {
         const border = BORDER_COLOR.focus[primaryColor as keyof typeof BORDER_COLOR.focus];
         const ring =
-            RING_COLOR["second-focus"][primaryColor as keyof typeof RING_COLOR["second-focus"]];
+            RING_COLOR["second-focus"][primaryColor as keyof (typeof RING_COLOR)["second-focus"]];
         const classNameOverload = typeof inputClassName === "string" ? inputClassName : "";
         return `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring} ${classNameOverload}`;
     }, [primaryColor, inputClassName]);

src/components/Shortcuts.tsx

@@ -27,7 +27,7 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
 
     // Functions
     const getClassName: () => string = useCallback(() => {
-        const textColor = TEXT_COLOR["600"][primaryColor as keyof typeof TEXT_COLOR["600"]];
+        const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
         const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
         return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
     }, [primaryColor]);

src/components/utils.tsx

@@ -147,8 +147,8 @@ export const SecondaryButton: React.FC<Button> = ({ children, onClick, disabled
 export const PrimaryButton: React.FC<Button> = ({ children, onClick, disabled = false }) => {
     // Contexts
     const { primaryColor } = useContext(DatepickerContext);
-    const bgColor = BG_COLOR["500"][primaryColor as keyof typeof BG_COLOR["500"]];
-    const borderColor = BORDER_COLOR["500"][primaryColor as keyof typeof BORDER_COLOR["500"]];
+    const bgColor = BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]];
+    const borderColor = BORDER_COLOR["500"][primaryColor as keyof (typeof BORDER_COLOR)["500"]];
     const bgColorHover = BG_COLOR.hover[primaryColor as keyof typeof BG_COLOR.hover];
     const ringColor = RING_COLOR.focus[primaryColor as keyof typeof RING_COLOR.focus];
 
@@ -231,7 +231,7 @@ export const RoundedButton: React.FC<Button> = ({
 export const VerticalDash = () => {
     // Contexts
     const { primaryColor } = useContext(DatepickerContext);
-    const bgColor = BG_COLOR["500"][primaryColor as keyof typeof BG_COLOR["500"]];
+    const bgColor = BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]];
 
     return <div className={`bg-blue-500 h-7 w-1 rounded-full hidden md:block ${bgColor}`} />;
 };