[IOAPPX-329] Fix chromatic values of the AccordionItem component (#294

)
pagopa · Jun 26, 2024 · 522fc78 · 522fc78
1 parent 9c8955c
commit 522fc78
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 26 deletions.
diff --git a/src/components/accordion/AccordionItem.tsx b/src/components/accordion/AccordionItem.tsx
@@ -11,7 +11,12 @@ import Animated, {
   useAnimatedStyle,
   withSpring
 } from "react-native-reanimated";
-import { IOAccordionRadius, IOStyles, type IOSpacingScale } from "../../core";
+import {
+  IOAccordionRadius,
+  IOStyles,
+  useIOTheme,
+  type IOSpacingScale
+} from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { makeFontStyleObject } from "../../utils/fonts";
@@ -32,8 +37,6 @@ type AccordionBody = {
 const accordionBodySpacing: IOSpacingScale = 16;
 const accordionIconMargin: IOSpacingScale = 12;
 const accordionChevronMargin: IOSpacingScale = 8;
-const accordionBorder: IOColors = "grey-200";
-const accordionBackground: IOColors = "white";
 
 // Icon size
 const iconSize: IOIconSizeScale = 24;
@@ -73,8 +76,14 @@ export const AccordionBody = ({ children, expanded }: AccordionBody) => {
 };
 
 export const AccordionItem = ({ title, body, icon }: AccordionItem) => {
+  const theme = useIOTheme();
   const [expanded, setExpanded] = useState(false);
 
+  // Visual attributes
+  const accordionBackground: IOColors = theme["appBackground-primary"];
+  const accordionBorder: IOColors = theme["cardBorder-default"];
+  const accordionIconColor: IOColors = theme["icon-default"];
+
   const onItemPress = () => {
     setExpanded(!expanded);
   };
@@ -93,7 +102,15 @@ export const AccordionItem = ({ title, body, icon }: AccordionItem) => {
   );
 
   return (
-    <View style={styles.accordionWrapper}>
+    <View
+      style={[
+        styles.accordionWrapper,
+        {
+          backgroundColor: IOColors[accordionBackground],
+          borderColor: IOColors[accordionBorder]
+        }
+      ]}
+    >
       <TouchableWithoutFeedback
         accessible={true}
         accessibilityRole="button"
@@ -113,15 +130,18 @@ export const AccordionItem = ({ title, body, icon }: AccordionItem) => {
           >
             {icon && (
               <View style={{ marginRight: accordionIconMargin }}>
-                <Icon name={icon} size={iconSize} color="black" />
+                <Icon name={icon} size={iconSize} color={accordionIconColor} />
               </View>
             )}
             <View style={{ flexShrink: 1 }}>
-              <H6 color="black">{title}</H6>
+              <H6 color={theme["textBody-default"]}>{title}</H6>
             </View>
           </View>
           <Animated.View style={animatedChevron}>
-            <Icon name="chevronBottom" color="blueIO-500" />
+            <Icon
+              name="chevronBottom"
+              color={theme["interactiveElem-default"]}
+            />
           </Animated.View>
         </View>
       </TouchableWithoutFeedback>
@@ -156,11 +176,9 @@ export const AccordionItem = ({ title, body, icon }: AccordionItem) => {
 
 const styles = StyleSheet.create({
   accordionWrapper: {
-    borderColor: IOColors[accordionBorder],
     borderWidth: 1,
     borderRadius: IOAccordionRadius,
-    borderCurve: "continuous",
-    backgroundColor: IOColors[accordionBackground]
+    borderCurve: "continuous"
   },
   accordionCollapsableContainer: {
     overflow: "hidden"

diff --git a/src/components/modules/ModuleAttachment.tsx b/src/components/modules/ModuleAttachment.tsx
@@ -56,8 +56,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 16,
     borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
-    backgroundColor: IOColors.white,
     borderStyle: "solid",
     borderWidth: 1
   },
@@ -154,6 +152,7 @@ export const ModuleAttachment = ({
   testID,
   title
 }: ModuleAttachmentProps) => {
+  const theme = useIOTheme();
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
   // Scaling transformation applied when the button is pressed
@@ -225,7 +224,11 @@ export const ModuleAttachment = ({
         style={[
           styles.button,
           animatedStyle,
-          { opacity: disabled ? DISABLED_OPACITY : 1 }
+          {
+            opacity: disabled ? DISABLED_OPACITY : 1,
+            borderColor: IOColors[theme["cardBorder-default"]],
+            backgroundColor: IOColors[theme["appBackground-primary"]]
+          }
         ]}
         accessibilityElementsHidden={true}
         importantForAccessibility="no-hide-descendants"
@@ -242,17 +245,27 @@ export const ModuleAttachment = ({
 
 const SkeletonComponent = ({
   loadingAccessibilityLabel
-}: SkeletonComponentProps) => (
-  <View
-    style={styles.button}
-    accessible={true}
-    accessibilityState={{ busy: true }}
-    accessibilityLabel={loadingAccessibilityLabel}
-  >
-    <View style={styles.innerContent}>
-      <Placeholder.Box animate="fade" radius={8} width={107} height={22} />
-      <VSpacer size={4} />
-      <Placeholder.Box animate="fade" radius={8} width={44} height={22} />
+}: SkeletonComponentProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <View
+      style={[
+        styles.button,
+        {
+          borderColor: IOColors[theme["cardBorder-default"]],
+          backgroundColor: IOColors[theme["appBackground-primary"]]
+        }
+      ]}
+      accessible={true}
+      accessibilityState={{ busy: true }}
+      accessibilityLabel={loadingAccessibilityLabel}
+    >
+      <View style={styles.innerContent}>
+        <Placeholder.Box animate="fade" radius={8} width={107} height={22} />
+        <VSpacer size={4} />
+        <Placeholder.Box animate="fade" radius={8} width={44} height={22} />
+      </View>
     </View>
-  </View>
-);
+  );
+};