make styled-component props activeColour, inactiveColour and enabled props transient

Author: eatyourpeas

src/SubComponents/StyledErrorButton.tsx

@@ -1,19 +1,19 @@
 import styled from 'styled-components';
 
 export const StyledErrorButton = styled.button<{
-    activeColour: string;
-    inactiveColour: string;
+    $activeColour: string;
+    $inactiveColour: string;
     fontFamily: string;
     fontSize: number;
     fontWeight: string;
     fontStyle: string;
     color: string;
-    enabled: boolean;
+    $enabled: boolean;
     margin?: string;
 }>`
     align-self: flex-end;
-    background-color: ${({inactiveColour, activeColour, enabled }) => (enabled ? activeColour : inactiveColour)};
-    border: 2px solid ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+    background-color: ${({$inactiveColour, $activeColour, $enabled }) => ($enabled ? $activeColour : $inactiveColour)};
+    border: 2px solid ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
     font-family: Arial;
     font-size: 14px;
     min-height: 30px;
@@ -23,12 +23,12 @@ export const StyledErrorButton = styled.button<{
     font-style: ${({ fontStyle }) => fontStyle};
     color: ${({ color }) => color};
     &:hover {
-        background-color: ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+        background-color: ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
         color: ${({ color }) => color};
-        border: 2px solid ${({enabled, inactiveColour, activeColour}) => (enabled ? activeColour : inactiveColour)};
-        outline: ${({enabled, activeColour}) => (enabled ? activeColour : 'transparent')} solid 2px;
+        border: 2px solid ${({$enabled, $inactiveColour, $activeColour}) => ($enabled ? $activeColour : $inactiveColour)};
+        outline: ${({$enabled, $activeColour}) => ($enabled ? $activeColour : 'transparent')} solid 2px;
     }
     &:focus {
-        outline: ${(props) => (props.enabled ? props.activeColour : 'transparent')} solid 2px;
+        outline: ${(props) => (props.$enabled ? props.$activeColour : 'transparent')} solid 2px;
     }
 `;