Fix ui glitch on the login screen (#556)

* Remove css transition code

* Add hover and active state

* fix: use :disabled css pseudo class instead of props on buttons

---------

Co-authored-by: Tim Man <tim@secretkeylabs.com>

src/app/components/button/index.tsx

@@ -18,33 +18,31 @@ const Button = styled.button<ButtonProps>((props) => ({
   width: '100%',
   height: 44,
   transition: 'all 0.1s ease',
-  ...(props.disabled
-    ? {
-        cursor: 'not-allowed',
-        opacity: 0.4,
-      }
-    : {
-        ':hover': { opacity: 0.8 },
-        ':active': { opacity: 0.6 },
-      }),
+  ':disabled': {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+  },
+  ':hover:enabled': {
+    opacity: 0.8,
+  },
+  ':active:enabled': {
+    opacity: 0.6,
+  },
 }));
 
 const TransparentButton = styled(Button)((props) => ({
   border: `1px solid ${props.theme.colors.background.elevation6}`,
   backgroundColor: 'transparent',
-  ...(props.disabled
-    ? {
-        cursor: 'not-allowed',
-        opacity: 0.4,
-      }
-    : {
-        ':hover': {
-          backgroundColor: props.theme.colors.background.elevation6_800,
-        },
-        ':active': {
-          backgroundColor: props.theme.colors.background.elevation6_600,
-        },
-      }),
+  ':disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.4,
+  },
+  ':hover:enabled': {
+    backgroundColor: props.theme.colors.background.elevation6_800,
+  },
+  ':active:enabled': {
+    backgroundColor: props.theme.colors.background.elevation6_600,
+  },
 }));
 
 interface TextProps {