Refactor all modals to better align with material you design

src/InnerApp.tsx

@@ -368,17 +368,13 @@ const InnerApp: FC = () => {
       </NavigationContainer>
       <EnableAppUpdatesModal
         visible={showEnableAppUpdatesModal}
-        /* eslint-disable-next-line @typescript-eslint/no-empty-function */
         onDismiss={() => {}}
-        dismissable={false}
-        dismissableBackButton={false}
       />
       <EnableFetchOpenDtuUpdatesModal
-        visible={showEnableFetchOpenDTUReleasesModal}
-        /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+        visible={
+          showEnableFetchOpenDTUReleasesModal && !showEnableAppUpdatesModal
+        }
         onDismiss={() => {}}
-        dismissable={false}
-        dismissableBackButton={false}
       />
     </PaperProvider>
   );

src/components/BaseModal.tsx

@@ -1,60 +1,237 @@
 import type { FC } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Flex } from 'react-native-flex-layout';
 import type { ModalProps } from 'react-native-paper';
-import { Modal, useTheme } from 'react-native-paper';
+import {
+  Button,
+  Icon,
+  IconButton,
+  Modal,
+  Text,
+  useTheme,
+} from 'react-native-paper';
 
 import { Platform } from 'react-native';
 
 import { spacing } from '@/constants';
 
-export interface BaseModalProps extends ModalProps {
-  backgroundColor?: string;
-  disableSidePadding?: boolean;
-  disableSideMargin?: boolean;
-  isScreen?: boolean;
+export interface ExtendableModalProps {
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+export interface BaseModalProps extends ExtendableModalProps {
+  title: string;
+  dismissButton:
+    | false
+    | 'dismiss'
+    | 'cancel'
+    | {
+        label: string;
+        onPress: () => void;
+        variant?: 'text' | 'outlined' | 'contained';
+        disabled?: boolean;
+        textColor?: string;
+      };
+  dismissButtonDisabled?: boolean;
+  actions?: {
+    label: string;
+    onPress: () => void;
+    variant?: 'text' | 'outlined' | 'contained';
+    disabled?: boolean;
+    buttonColor?: string;
+    textColor?: string;
+    loading?: boolean;
+  }[];
+  description?: string;
+  icon?: string;
+  modalProps?: Omit<ModalProps, 'visible' | 'onDismiss' | 'children'>;
+  fullscreen?: boolean;
+  hideBottomPadding?: boolean;
+  legacy?: boolean;
+  children?: React.ReactNode;
 }
 
 const BaseModal: FC<BaseModalProps> = ({
+  visible,
+  onDismiss,
+  title,
+  description,
+  fullscreen,
   children,
-  backgroundColor,
-  disableSidePadding,
-  disableSideMargin,
-  isScreen,
+  dismissButton = 'dismiss',
+  dismissButtonDisabled,
+  actions,
+  icon,
+  hideBottomPadding,
+  legacy,
   ...rest
 }) => {
   const theme = useTheme();
-
-  if (isScreen) {
-    disableSideMargin = true;
-    disableSidePadding = true;
-  }
-
-  const { visible } = rest;
+  const { t } = useTranslation();
 
   return (
     <Modal
-      {...rest}
+      visible={visible}
+      onDismiss={onDismiss}
+      dismissableBackButton
+      dismissable
+      {...rest.modalProps}
       style={{
         ...(Platform.OS !== 'android'
           ? { height: '100%', paddingBottom: spacing * 10 }
           : {}),
-        backgroundColor: visible ? 'rgba(0, 0, 0, 0.5)' : undefined,
         alignItems: 'center',
         justifyContent: 'center',
         flexDirection: 'row',
       }}
       contentContainerStyle={{
-        backgroundColor: backgroundColor ?? theme.colors.elevation.level4,
-        ...(disableSidePadding
-          ? { paddingTop: 8, paddingBottom: 8 }
-          : { padding: 8 }),
-        borderRadius: isScreen ? 0 : 28,
-        marginVertical: isScreen ? 0 : 8,
-        marginHorizontal: disableSideMargin ? 0 : 20,
-        maxWidth: 450,
+        backgroundColor: theme.colors.surfaceVariant,
+        padding: fullscreen ? 8 : 24,
+        paddingBottom: 0,
+        borderRadius: fullscreen ? 0 : 28,
+        marginVertical: fullscreen ? 0 : 8,
+        marginHorizontal: fullscreen ? 0 : 32,
+        maxWidth: fullscreen ? undefined : 450,
+        height: fullscreen ? '100%' : undefined,
         flex: 1,
+        justifyContent: 'space-between',
       }}
     >
-      {children}
+      <Box style={{ flex: fullscreen ? 1 : undefined }}>
+        {!legacy ? (
+          <>
+            <Flex direction="column" style={{ gap: 16 }}>
+              {icon && !fullscreen ? (
+                <Flex direction="row" center>
+                  <Icon
+                    source={icon}
+                    color={theme.colors.secondary}
+                    size={24}
+                  />
+                </Flex>
+              ) : null}
+              <Flex direction="row" justify="between" items="center">
+                <Flex
+                  direction="row"
+                  justify="start"
+                  items="center"
+                  style={{ gap: 8, flex: 1 }}
+                >
+                  {fullscreen && dismissButton ? (
+                    <IconButton icon="close" onPress={onDismiss} />
+                  ) : null}
+                  <Text
+                    variant="headlineSmall"
+                    style={{
+                      textAlign: icon ? 'center' : undefined,
+                      color: theme.colors.onSurface,
+                    }}
+                  >
+                    {title}
+                  </Text>
+                </Flex>
+              </Flex>
+              {actions?.length && actions.length > 1 && fullscreen ? (
+                <Button
+                  onPress={actions[0].onPress}
+                  disabled={actions[0].disabled}
+                  mode={actions[0].variant ? actions[0].variant : 'text'}
+                  buttonColor={actions[0].buttonColor}
+                  textColor={actions[0].textColor}
+                  style={{
+                    paddingVertical: actions[0].variant !== 'text' ? 0 : 8,
+                    minWidth: 100,
+                    alignSelf: 'flex-start',
+                  }}
+                  loading={actions[0].loading}
+                >
+                  {actions[0].label}
+                </Button>
+              ) : null}
+              {description && !fullscreen ? (
+                <Text
+                  variant="bodyMedium"
+                  style={{ color: theme.colors.onSurface }}
+                >
+                  {description}
+                </Text>
+              ) : null}
+            </Flex>
+          </>
+        ) : null}
+        {children ? (
+          <Box
+            pt={fullscreen || legacy ? 0 : 20}
+            style={{ flex: fullscreen ? 1 : 0 }}
+          >
+            {children}
+          </Box>
+        ) : null}
+      </Box>
+      {fullscreen ? null : (
+        <Box pv={hideBottomPadding ? 12 : 20}>
+          <Flex
+            direction="row"
+            justify="end"
+            items="center"
+            style={{ gap: 8 }}
+            wrap="wrap"
+          >
+            {dismissButton ? (
+              <Button
+                onPress={
+                  typeof dismissButton === 'object'
+                    ? dismissButton.onPress
+                    : onDismiss
+                }
+                disabled={
+                  dismissButtonDisabled
+                    ? dismissButtonDisabled
+                    : typeof dismissButton === 'object' &&
+                        dismissButton.disabled
+                      ? dismissButton.disabled
+                      : false
+                }
+                mode={
+                  typeof dismissButton === 'object' && dismissButton.variant
+                    ? dismissButton.variant
+                    : 'text'
+                }
+                textColor={
+                  typeof dismissButton === 'object' && dismissButton.textColor
+                    ? dismissButton.textColor
+                    : undefined
+                }
+              >
+                {typeof dismissButton === 'object'
+                  ? dismissButton.label
+                  : dismissButton === 'cancel'
+                    ? t('cancel')
+                    : t('dismiss')}
+              </Button>
+            ) : null}
+            {actions?.map((action, index) => (
+              <Button
+                key={`action-${index}`}
+                onPress={action.onPress}
+                disabled={action.disabled}
+                mode={action.variant ? action.variant : 'text'}
+                buttonColor={action.buttonColor}
+                textColor={action.textColor}
+                style={{
+                  paddingVertical: action.variant !== 'text' ? 0 : 8,
+                  minWidth: 100,
+                }}
+                loading={action.loading}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+      )}
     </Modal>
   );
 };

src/components/ReleaseChangelog.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { RenderRules } from 'react-native-markdown-display';
 import Markdown from 'react-native-markdown-display';
-import { useTheme } from 'react-native-paper';
+import { Text, useTheme } from 'react-native-paper';
 
 import { Text as RNText } from 'react-native';
 
@@ -11,6 +11,36 @@ export interface ReleaseChangelogProps {
 
 const rules: RenderRules = {
   link: (node, children) => <RNText key={node.key}>{children}</RNText>,
+  heading1: (node, children) => (
+    <Text key={node.key} variant="headlineLarge">
+      {children}
+    </Text>
+  ),
+  heading2: (node, children) => (
+    <Text key={node.key} variant="headlineMedium">
+      {children}
+    </Text>
+  ),
+  heading3: (node, children) => (
+    <Text key={node.key} variant="headlineSmall">
+      {children}
+    </Text>
+  ),
+  heading4: (node, children) => (
+    <Text key={node.key} variant="titleLarge">
+      {children}
+    </Text>
+  ),
+  heading5: (node, children) => (
+    <Text key={node.key} variant="titleMedium">
+      {children}
+    </Text>
+  ),
+  heading6: (node, children) => (
+    <Text key={node.key} variant="titleSmall">
+      {children}
+    </Text>
+  ),
 };
 
 const ReleaseChangelog: FC<ReleaseChangelogProps> = ({ releaseBody }) => {

src/components/Charts/AcPowerChart.tsx → src/components/charts/AcPowerChart.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import UnifiedLineChart from '@/components/Charts/UnifiedLineChart';
+import UnifiedLineChart from '@/components/charts/UnifiedLineChart';
 
 import { useAppSelector } from '@/store';
 

src/components/Charts/AcVoltageChart.tsx → src/components/charts/AcVoltageChart.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import UnifiedLineChart from '@/components/Charts/UnifiedLineChart';
+import UnifiedLineChart from '@/components/charts/UnifiedLineChart';
 
 import { useAppSelector } from '@/store';
 

src/components/Charts/DcPowerChart.tsx → src/components/charts/DcPowerChart.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import UnifiedLineChart from '@/components/Charts/UnifiedLineChart';
+import UnifiedLineChart from '@/components/charts/UnifiedLineChart';
 
 import { useAppSelector } from '@/store';
 

src/components/Charts/DcVoltageChart.tsx → src/components/charts/DcVoltageChart.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import UnifiedLineChart from '@/components/Charts/UnifiedLineChart';
+import UnifiedLineChart from '@/components/charts/UnifiedLineChart';
 
 import { useAppSelector } from '@/store';
 

src/components/Charts/ImportantCharts.tsx → src/components/charts/ImportantCharts.tsx

@@ -12,9 +12,9 @@ import {
 
 import { View } from 'react-native';
 
-import AcPowerChart from '@/components/Charts/AcPowerChart';
-import DcPowerChart from '@/components/Charts/DcPowerChart';
-import DcVoltageChart from '@/components/Charts/DcVoltageChart';
+import AcPowerChart from '@/components/charts/AcPowerChart';
+import DcPowerChart from '@/components/charts/DcPowerChart';
+import DcVoltageChart from '@/components/charts/DcVoltageChart';
 import ErrorSurface from '@/components/styled/ErrorSurface';
 import StyledSurface from '@/components/styled/StyledSurface';