fix: handle disabled button styles

They weren't well adjusted. We have to rationalize quickly
these themes issues.
This commit is more a quick fix.
Some buttons in the app don't use the disabled style some do.
Also we need 1 disabled style per variant per theme (that we use in the
app though).

src/app/view/Secure/SetPinView.tsx

@@ -97,7 +97,10 @@ const SetPinViewSimple = ({
               disabled={firstInput.length !== 4}
               testID="pin-next"
             >
-              <Typography color="primary" variant="button">
+              <Typography
+                color={firstInput.length !== 4 ? 'disabled' : 'primary'}
+                variant="button"
+              >
                 {t('screens.SecureScreen.pinsave_step1_cta')}
               </Typography>
             </Button>
@@ -144,8 +147,14 @@ const SetPinViewSimple = ({
               </Tooltip>
             </Grid>
 
-            <Button onPress={handleSecondInputSubmit}>
-              <Typography color="primary" variant="button">
+            <Button
+              onPress={handleSecondInputSubmit}
+              disabled={secondInput.length !== 4}
+            >
+              <Typography
+                color={secondInput.length !== 4 ? 'disabled' : 'primary'}
+                variant="button"
+              >
                 {t('screens.SecureScreen.pinsave_step2_cta')}
               </Typography>
             </Button>

src/constants/dev-config.ts

@@ -4,13 +4,13 @@
  * Please do not use this object directly in other files, use the exported functions instead.
  */
 export const devConfig = {
-  disableGetIndex: false, // Bypass HTTPServer HTML generation which will fallback to local stack, useful for webpack-dev-server
+  disableGetIndex: true, // Bypass HTTPServer HTML generation which will fallback to local stack, useful for webpack-dev-server
   enableLocalSentry: false, // Be warned that it will send actual logs to Sentry on the "test" environment, use sparingly
   enableReduxLogger: false, // Outputs to console every Redux action with payload, prev and next state
   enableKonnectorExtensiveLog: true, // Outputs every post-me exchanges between launcher, pilot and worker, but also every console.* coming from the webview
   forceHideSplashScreen: false, // Hide react-native splash screen renders, useful for debugging in case of a webview crash
   forceOffline: false, // Force offline mode by overwriting the NetInfo module and returning a fake offline state,
-  ignoreLogBox: false, // Hide react-native LogBox renders but still display logs to the console,
+  ignoreLogBox: true, // Hide react-native LogBox renders but still display logs to the console,
   cliskKonnectorDevMode: false, // Do not show HomeView but just a special screen to run clisk konnectors
   forceInstallReferrer: false, // Enforce InstallReferrer with the 'enforcedInstallReferrer' string (strings.ONBOARDING_PARTNER_STORAGE_KEY must be clear to apply this value)
   enforcedInstallReferrer:

src/ui/Button/index.tsx

@@ -18,7 +18,7 @@ export const Button = ({
     style={[
       styles.button,
       styles[variant],
-      disabled ? styles.disabled : {},
+      disabled && styles[`${variant}Disabled`],
       style
     ]}
     disabled={disabled}

src/ui/Button/styles.ts

@@ -19,7 +19,15 @@ export const styles = StyleSheet.create({
     borderColor: 'rgba(255, 255, 255, 0.24)',
     borderWidth: 1
   },
-  disabled: {
+  // TODO: this is actually the inverted theme with Primary style
+  primaryDisabled: {
+    boxShadow: 'none',
+    color: 'rgba(255,255,255,0.32)',
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    borderWidth: 0
+  },
+  // TODO: this is actually the normal theme with Primary style
+  secondaryDisabled: {
     boxShadow: 'none',
     color: 'rgba(29,33,42,0.24)',
     backgroundColor: 'rgba(29,33,42,0.12)'

src/ui/Typography/index.tsx

@@ -26,6 +26,7 @@ type TypographyColor =
   | 'textPrimary'
   | 'textSecondary'
   | 'error'
+  | 'disabled'
 
 interface TypographyProps extends TextProps {
   color?: TypographyColor

src/ui/Typography/styles.ts

@@ -11,6 +11,7 @@ export const styles = StyleSheet.create({
   textPrimary: { color: palette.Grey['900'] },
   textSecondary: { color: palette.Common.white },
   error: { color: palette.Primary.ContrastText },
+  disabled: { color: 'rgba(255,255,255,0.32)' }, // TODO: clarify palette object
   h4: {
     fontFamily: 'Lato-Bold',
     fontSize: 20,