diff --git a/expo/nativewind-env.d.ts b/expo/nativewind-env.d.ts
new file mode 100644
index 000000000..a13e3136b
--- /dev/null
+++ b/expo/nativewind-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/expo/src/components/AnimatedTextStyled.js b/expo/src/components/AnimatedTextStyled.js
index 9094ed973..42ad7a64f 100644
--- a/expo/src/components/AnimatedTextStyled.js
+++ b/expo/src/components/AnimatedTextStyled.js
@@ -1,18 +1,44 @@
-import styled from "styled-components";
-import { Animated, Platform } from "react-native";
+import React from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
-const AnimatedTextStyled = styled(Animated.Text)`
- ${Platform.OS === "android" && "font-family: Raleway;"}
- color: ${({ color }) => color || "#191919"};
- ${(props) => props.semibold && "font-weight: 600;"}
- ${(props) => props.bold && "font-weight: bold;"}
- ${(props) => props.italic && "font-style: italic;"}
- ${(props) => props.center && "text-align: center;"}
- textDecoration: ${({ underline }) => underline && "underline"};
- ${({ size }) => size && `font-size: ${size}px;`}
- ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}px;`}
+const AnimatedText = ({
+ color = "#191919",
+ semibold,
+ bold,
+ italic,
+ center,
+ underline,
+ size,
+ lineHeight,
+ style,
+ ...props
+}) => {
+ const classNames = [
+ "font-raleway",
+ color !== "#191919" && `text-[${color}]`,
+ semibold && "font-semibold",
+ bold && "font-bold",
+ italic && "italic",
+ center && "text-center",
+ underline && "underline",
+ size && `text-[${size}px]`,
+ lineHeight && `leading-[${lineHeight}px]`,
+ ]
+ .filter(Boolean)
+ .join(" ");
- text-decoration-color: ${({ color }) => color || "#191919"};
-`;
+ const inlineStyle = {
+ ...(Platform.OS === "android" && styles.androidFont),
+ ...(underline && { textDecorationColor: color }),
+ };
-export default AnimatedTextStyled;
+ return ;
+};
+
+const styles = StyleSheet.create({
+ androidFont: {
+ fontFamily: "Raleway",
+ },
+});
+
+export default AnimatedText;
diff --git a/expo/src/components/ArrowDown.js b/expo/src/components/ArrowDown.js
index e2df32738..0cf013857 100644
--- a/expo/src/components/ArrowDown.js
+++ b/expo/src/components/ArrowDown.js
@@ -1,13 +1,10 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
const ArrowDown = ({ color = "#39cec0", size, ...style }) => (
-
+
+
);
-const StyledSvg = styled(Svg)``;
-
export default ArrowDown;
diff --git a/expo/src/components/ArrowLeft.js b/expo/src/components/ArrowLeft.js
index 02c9e19cb..e0bf99ddf 100644
--- a/expo/src/components/ArrowLeft.js
+++ b/expo/src/components/ArrowLeft.js
@@ -1,11 +1,8 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-
-const StyledSvg = styled(Svg)``;
const ArrowLeft = ({ size = 20, color = "#39cec0", ...props }) => (
-
+
+
);
export default ArrowLeft;
diff --git a/expo/src/components/ArrowRight.js b/expo/src/components/ArrowRight.js
index f3f726bcf..1e4144336 100644
--- a/expo/src/components/ArrowRight.js
+++ b/expo/src/components/ArrowRight.js
@@ -1,18 +1,15 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-
-const StyledSvg = styled(Svg)``;
const ArrowRight = ({ size = 20, color = "#39cec0", ...props }) => (
-
+
+
);
export default ArrowRight;
diff --git a/expo/src/components/ArrowUp.js b/expo/src/components/ArrowUp.js
index 33964839f..8d0fe9a18 100644
--- a/expo/src/components/ArrowUp.js
+++ b/expo/src/components/ArrowUp.js
@@ -1,18 +1,15 @@
import React from "react";
import Svg, { Polygon } from "react-native-svg";
-import styled from "styled-components";
const ArrowUp = ({ color = "#39cec0", size, ...style }) => (
-
+
+
);
-const StyledSvg = styled(Svg)``;
-
export default ArrowUp;
diff --git a/expo/src/components/BackButton.js b/expo/src/components/BackButton.js
index 33f03e294..93b58a55e 100644
--- a/expo/src/components/BackButton.js
+++ b/expo/src/components/BackButton.js
@@ -1,49 +1,41 @@
import React from "react";
-import { Platform } from "react-native";
-import styled, { css } from "styled-components";
-import { mediaHeight } from "../styles/mediaQueries";
-import { defaultPaddingFontScale } from "../styles/theme";
+import { TouchableOpacity, Platform, Dimensions } from "react-native";
import TextStyled from "./TextStyled";
+import { defaultPaddingFontScale } from "../styles/theme";
-const BackButton = ({ onPress, marginBottom, marginLeft, marginTop }) => (
-
- {"< Retour"}
-
-);
-
-const Container = styled.TouchableOpacity`
- margin-right: auto;
- ${({ marginLeft }) => marginLeft && `margin-left: ${defaultPaddingFontScale()}px`};
- ${({ marginBottom }) => marginBottom && "margin-bottom: 20px"};
- ${({ marginTop }) => !!marginTop && "margin-top: 20px"};
-`;
-
-const bigContent = css`
- font-size: ${({ small }) => (small ? 15 : 20)}px;
-`;
-
-const mediumContent = css`
- font-size: ${({ small }) => (small ? 13 : 18)}px;
-`;
-
-const smallContent = css`
- font-size: ${({ small }) => (small ? 13 : 15)}px;
-`;
-
-const ReturnButton = styled(TextStyled)`
- color: #191919;
- font-weight: ${({ bold }) => (bold ? (Platform.OS === "android" ? "bold" : "800") : "normal")};
- flex-shrink: 0;
- ${bigContent}
- ${mediaHeight.medium`${mediumContent}`}
- ${mediaHeight.small`${smallContent}`}
- justify-content: center;
- align-items: center;
- text-align-vertical: center;
-`;
+const { height } = Dimensions.get("window");
-export default BackButton;
+export default function BackButton({ onPress, marginBottom, marginLeft, marginTop, small = false }) {
+ return (
+
+ 800
+ ? small
+ ? "text-[15px]"
+ : "text-[20px]"
+ : height > 700
+ ? small
+ ? "text-[13px]"
+ : "text-[18px]"
+ : small
+ ? "text-[13px]"
+ : "text-[15px]",
+ ].join(" ")}
+ style={{ textAlignVertical: "center" }}
+ >
+ {"< Retour"}
+
+
+ );
+}
diff --git a/expo/src/components/BackGroundBopMotivation.js b/expo/src/components/BackGroundBopMotivation.js
index 6dd9106ad..88756ece9 100644
--- a/expo/src/components/BackGroundBopMotivation.js
+++ b/expo/src/components/BackGroundBopMotivation.js
@@ -1,13 +1,15 @@
import React from "react";
import Svg, { Path, G } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-right: 5px;
-`;
-
-const BackGroundBotMotivation = ({ size, ...props }) => (
-
+const BackGroundBotMotivation = ({ size, className = "", ...props }) => (
+
+
);
export default BackGroundBotMotivation;
diff --git a/expo/src/components/BackGroundTopMotivation.js b/expo/src/components/BackGroundTopMotivation.js
index ad5238435..6f6bf94b4 100644
--- a/expo/src/components/BackGroundTopMotivation.js
+++ b/expo/src/components/BackGroundTopMotivation.js
@@ -1,13 +1,15 @@
import React from "react";
import Svg, { Path, G } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-right: 5px;
-`;
-
-const BackGroundTopMotivation = ({ size, fill = "#39cec0", ...props }) => (
-
+const BackGroundTopMotivation = ({ size, fill = "#39cec0", className = "", ...props }) => (
+
+
);
export default BackGroundTopMotivation;
diff --git a/expo/src/components/H1.js b/expo/src/components/H1.js
deleted file mode 100644
index 8c11f1317..000000000
--- a/expo/src/components/H1.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Platform } from "react-native";
-import styled, { css } from "styled-components";
-import { mediaHeight } from "../styles/mediaQueries";
-import TextStyled from "./TextStyled";
-
-const bigH1 = css`
- font-size: 23px;
- line-height: 30px;
-`;
-
-const mediumH1 = css`
- font-size: 20px;
- line-height: 30px;
-`;
-
-const smallH1 = css`
- font-size: 17px;
- line-height: 25px;
-`;
-
-const H1 = styled(TextStyled)`
- color: ${({ color }) => (color ? color : "#4030a5")};
- font-weight: ${Platform.OS === "android" ? "bold" : "800"};
- ${bigH1}
- ${mediaHeight.medium`${mediumH1}`}
- ${mediaHeight.small`${smallH1}`}
-`;
-
-export default H1;
diff --git a/expo/src/components/H1.tsx b/expo/src/components/H1.tsx
new file mode 100644
index 000000000..fb3cb4b27
--- /dev/null
+++ b/expo/src/components/H1.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Text, Dimensions, Platform, TextStyle, TextProps } from "react-native";
+import { styled } from "nativewind";
+
+const { height } = Dimensions.get("window");
+
+function getResponsiveClasses(): string {
+ if (height > 800) return "text-[23px] leading-[30px]";
+ if (height > 700) return "text-[20px] leading-[30px]";
+ return "text-[17px] leading-[25px]";
+}
+
+const responsiveClasses = getResponsiveClasses();
+const fontWeight = Platform.OS === "android" ? "font-bold" : "font-extrabold";
+
+const StyledH1 = styled(Text, `${responsiveClasses} ${fontWeight} text-[#4030a5]`);
+
+interface H1Props extends TextProps {
+ style?: TextStyle;
+}
+
+export default function H1({ style, ...props }: H1Props): React.ReactElement {
+ return ;
+}
diff --git a/expo/src/components/H2.js b/expo/src/components/H2.js
deleted file mode 100644
index bbdbbf20a..000000000
--- a/expo/src/components/H2.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled, { css } from "styled-components";
-import { mediaHeight } from "../styles/mediaQueries";
-import TextStyled from "./TextStyled";
-
-const bigH2 = css`
- font-size: 20px;
- line-height: 30px;
-`;
-
-const mediumH2 = css`
- font-size: 17.5px;
- line-height: 23px;
-`;
-
-const smallH2 = css`
- font-size: 16px;
- line-height: 20px;
-`;
-
-const H2 = styled(TextStyled)`
- color: ${({ color }) => (color ? color : "#191919")};
- font-weight: bold;
- ${bigH2}
- ${mediaHeight.medium`${mediumH2}`}
- ${mediaHeight.small`${smallH2}`}
-`;
-
-export default H2;
diff --git a/expo/src/components/H2.tsx b/expo/src/components/H2.tsx
new file mode 100644
index 000000000..4aca37bcf
--- /dev/null
+++ b/expo/src/components/H2.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, Dimensions, TextProps, TextStyle } from "react-native";
+import { styled } from "nativewind";
+
+const { height } = Dimensions.get("window");
+
+function getResponsiveClasses(): string {
+ if (height > 800) return "text-[20px] leading-[30px]";
+ if (height > 700) return "text-[17.5px] leading-[23px]";
+ return "text-[16px] leading-[20px]";
+}
+
+const responsiveClasses = getResponsiveClasses();
+
+const StyledH2 = styled(Text, `${responsiveClasses} font-bold text-[#191919]`);
+
+interface H2Props extends TextProps {
+ style?: TextStyle;
+}
+
+export default function H2({ style, ...props }: H2Props): React.ReactElement {
+ return ;
+}
diff --git a/expo/src/components/H3.js b/expo/src/components/H3.js
deleted file mode 100644
index 2495fb087..000000000
--- a/expo/src/components/H3.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled, { css } from "styled-components";
-import { mediaHeight } from "../styles/mediaQueries";
-import TextStyled from "./TextStyled";
-
-const bigH3 = css`
- font-size: 16px;
- line-height: 18px;
-`;
-
-const mediumH3 = css`
- font-size: 16px;
- line-height: 20px;
-`;
-
-const smallH3 = css`
- font-size: 16px;
- line-height: 16px;
-`;
-
-const H3 = styled(TextStyled)`
- color: ${({ color }) => (color ? color : "#191919")};
- ${bigH3}
- ${mediaHeight.medium`${mediumH3}`}
- ${mediaHeight.small`${smallH3}`}
-`;
-
-export default H3;
diff --git a/expo/src/components/H3.tsx b/expo/src/components/H3.tsx
new file mode 100644
index 000000000..f7e01b475
--- /dev/null
+++ b/expo/src/components/H3.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, Dimensions, TextProps, TextStyle } from "react-native";
+import { styled } from "nativewind";
+
+const { height } = Dimensions.get("window");
+
+function getResponsiveClasses(): string {
+ if (height > 800) return "leading-4.5";
+ if (height > 700) return "leading-5";
+ return "leading-4";
+}
+
+const responsiveClasses = getResponsiveClasses();
+
+const StyledH3 = styled(Text, `text-base ${responsiveClasses} text-[#191919]`);
+
+interface H3Props extends TextProps {
+ style?: TextStyle;
+}
+
+export default function H3({ style, ...props }: H3Props): React.ReactElement {
+ return ;
+}
diff --git a/expo/src/components/TextStyled.js b/expo/src/components/TextStyled.js
index d73ce685c..718838981 100644
--- a/expo/src/components/TextStyled.js
+++ b/expo/src/components/TextStyled.js
@@ -1,18 +1,50 @@
-import styled from "styled-components";
-import { Platform } from "react-native";
+import React from "react";
+import { Text, StyleSheet, Platform } from "react-native";
-const TextStyled = styled.Text`
- ${Platform.OS === "android" && "font-family: Raleway;"}
- color: ${({ color }) => color || "#191919"};
- ${(props) => props.semibold && "font-weight: 600;"}
- ${(props) => !!props.bold && "font-weight: bold;"}
- ${(props) => props.italic && "font-style: italic;"}
- ${(props) => props.center && "text-align: center;"}
- textDecoration: ${({ underline }) => underline && "underline"};
- ${({ size }) => size && `font-size: ${size}px;`}
- ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}px;`}
+export default function TextStyled({
+ color = "#191919",
+ semibold,
+ bold,
+ italic,
+ center,
+ underline,
+ size,
+ lineHeight,
+ style,
+ textClassName = "",
+ ...props
+}) {
+ return (
+
+ );
+}
- text-decoration-color: ${({ color }) => color || "#191919"};
-`;
-
-export default TextStyled;
+const styles = StyleSheet.create({
+ text: Platform.select({
+ android: { fontFamily: "Raleway" },
+ ios: {},
+ }),
+});
diff --git a/expo/src/components/ValidateIcon.js b/expo/src/components/ValidateIcon.js
index d88c2a70f..ed35c8e16 100644
--- a/expo/src/components/ValidateIcon.js
+++ b/expo/src/components/ValidateIcon.js
@@ -1,13 +1,8 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-right: 5px;
-`;
-
-const ValidateIcon = ({ size, fill = "#39cec0", ...props }) => (
-
+const ValidateIcon = ({ size, fill = "#39cec0", className = "", ...props }) => (
+
+
);
export default ValidateIcon;
diff --git a/expo/src/components/illustrations/AdviceVideos.js b/expo/src/components/illustrations/AdviceVideos.js
index 9dcc9349f..b5bb1d52c 100644
--- a/expo/src/components/illustrations/AdviceVideos.js
+++ b/expo/src/components/illustrations/AdviceVideos.js
@@ -1,67 +1,64 @@
import React from "react";
import Svg, { Path, G, Defs, Rect, ClipPath } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
-const AdviceVideos = ({ size, ...props }) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export default AdviceVideos;
+export default function AdvicesIcon({ size, ...props }) {
+ return (
+
+ );
+}
diff --git a/expo/src/components/illustrations/AdvicesICon.js b/expo/src/components/illustrations/AdvicesICon.js
index c18b716a1..34738fcc9 100644
--- a/expo/src/components/illustrations/AdvicesICon.js
+++ b/expo/src/components/illustrations/AdvicesICon.js
@@ -1,45 +1,42 @@
import React from "react";
import Svg, { Path, Circle } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
-const AdvicesIcon = ({ size, ...props }) => (
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export default AdvicesIcon;
+export default function AdvicesIcon({ size, ...props }) {
+ return (
+
+ );
+}
diff --git a/expo/src/components/illustrations/Applause.js b/expo/src/components/illustrations/Applause.js
index 85fc820d6..d6694a280 100644
--- a/expo/src/components/illustrations/Applause.js
+++ b/expo/src/components/illustrations/Applause.js
@@ -1,16 +1,13 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-
-const StyledSvg = styled(Svg)``;
const Applause = ({ size, ...props }) => (
-
+
+
);
export default Applause;
diff --git a/expo/src/components/illustrations/AppointmentHeart.js b/expo/src/components/illustrations/AppointmentHeart.js
index 365ec9151..9a4fc99f0 100644
--- a/expo/src/components/illustrations/AppointmentHeart.js
+++ b/expo/src/components/illustrations/AppointmentHeart.js
@@ -1,11 +1,8 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-
-const StyledSvg = styled(Svg)``;
const AppointmentHeart = ({ size, ...props }) => (
-
+
+
);
export default AppointmentHeart;
diff --git a/expo/src/components/illustrations/ArrowAdvice.js b/expo/src/components/illustrations/ArrowAdvice.js
index 03e9077df..53e4f35d4 100644
--- a/expo/src/components/illustrations/ArrowAdvice.js
+++ b/expo/src/components/illustrations/ArrowAdvice.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ArrowAdvice = ({ size, ...props }) => (
-
+
+
);
export default ArrowAdvice;
diff --git a/expo/src/components/illustrations/BreathingIcon.js b/expo/src/components/illustrations/BreathingIcon.js
index 42bcf5c1f..1a378a84b 100644
--- a/expo/src/components/illustrations/BreathingIcon.js
+++ b/expo/src/components/illustrations/BreathingIcon.js
@@ -2,16 +2,14 @@ import React from "react";
import Svg, { Path, Circle } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const BreathingIcon = ({ size, ...props }) => (
-
+
+
);
export default BreathingIcon;
diff --git a/expo/src/components/illustrations/CalendarIcon.js b/expo/src/components/illustrations/CalendarIcon.js
index cb5778953..1e40c08a8 100644
--- a/expo/src/components/illustrations/CalendarIcon.js
+++ b/expo/src/components/illustrations/CalendarIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CalendarIcon = ({ color = "#5150A2", size, ...props }) => (
-
+
+
);
export default CalendarIcon;
diff --git a/expo/src/components/illustrations/CalendarIllus.js b/expo/src/components/illustrations/CalendarIllus.js
index 812e7299c..4222019f7 100644
--- a/expo/src/components/illustrations/CalendarIllus.js
+++ b/expo/src/components/illustrations/CalendarIllus.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CalendarIllus = ({ color = "#000000", size, ...props }) => (
-
+
+
);
export default CalendarIllus;
diff --git a/expo/src/components/illustrations/CallIcon.js b/expo/src/components/illustrations/CallIcon.js
index 056b1dc23..6e36c40df 100644
--- a/expo/src/components/illustrations/CallIcon.js
+++ b/expo/src/components/illustrations/CallIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CallIcon = ({ size, ...props }) => (
-
+
+
);
export default CallIcon;
diff --git a/expo/src/components/illustrations/Chatbubbles.js b/expo/src/components/illustrations/Chatbubbles.js
index 0fae89a10..6d3724950 100644
--- a/expo/src/components/illustrations/Chatbubbles.js
+++ b/expo/src/components/illustrations/Chatbubbles.js
@@ -2,17 +2,15 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ChatBubbles = ({ size, ...props }) => (
-
+
+
);
export default ChatBubbles;
diff --git a/expo/src/components/illustrations/ChillIcon.js b/expo/src/components/illustrations/ChillIcon.js
index c9a634259..5d5dfb77e 100644
--- a/expo/src/components/illustrations/ChillIcon.js
+++ b/expo/src/components/illustrations/ChillIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ChillIcon = ({ size, ...props }) => (
-
+
+
);
export default ChillIcon;
diff --git a/expo/src/components/illustrations/Clock.js b/expo/src/components/illustrations/Clock.js
index c91721474..5d0e8c3e4 100644
--- a/expo/src/components/illustrations/Clock.js
+++ b/expo/src/components/illustrations/Clock.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Clock = ({ size, color = "#000", ...props }) => (
-
+
+
);
export default Clock;
diff --git a/expo/src/components/illustrations/CravingIcon.js b/expo/src/components/illustrations/CravingIcon.js
index ce8ff80e3..47d1690b5 100644
--- a/expo/src/components/illustrations/CravingIcon.js
+++ b/expo/src/components/illustrations/CravingIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CravingIcon = ({ size, color = "#FF0000", ...props }) => (
-
+
+
);
export default CravingIcon;
diff --git a/expo/src/components/illustrations/CreativityIcon.js b/expo/src/components/illustrations/CreativityIcon.js
index 0c3143108..3d6200c09 100644
--- a/expo/src/components/illustrations/CreativityIcon.js
+++ b/expo/src/components/illustrations/CreativityIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CreativityIcon = ({ size, ...props }) => (
-
+
+
);
export default CreativityIcon;
diff --git a/expo/src/components/illustrations/DefiLanding.js b/expo/src/components/illustrations/DefiLanding.js
index 86531e252..b5e674e88 100644
--- a/expo/src/components/illustrations/DefiLanding.js
+++ b/expo/src/components/illustrations/DefiLanding.js
@@ -1,13 +1,8 @@
import React from "react";
import Svg, { Line, Circle, Path } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-top: -30px;
-`;
-
-const DefiLanding = ({ color, size, ...props }) => (
-
+const DefiLanding = ({ color, size, className = "", ...props }) => (
+
+
);
export default DefiLanding;
diff --git a/expo/src/components/illustrations/Done.js b/expo/src/components/illustrations/Done.js
index a56d57adc..68c7516ec 100644
--- a/expo/src/components/illustrations/Done.js
+++ b/expo/src/components/illustrations/Done.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Done = ({ size, ...props }) => (
-
+
+
);
export default Done;
diff --git a/expo/src/components/illustrations/Dose.js b/expo/src/components/illustrations/Dose.js
index 8b8ced4c9..5f537e0be 100644
--- a/expo/src/components/illustrations/Dose.js
+++ b/expo/src/components/illustrations/Dose.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { G, Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Dose = ({ size, ...props }) => (
-
+
+
);
export default Dose;
diff --git a/expo/src/components/illustrations/DraggableClick.js b/expo/src/components/illustrations/DraggableClick.js
index af64db2a1..52b90213d 100644
--- a/expo/src/components/illustrations/DraggableClick.js
+++ b/expo/src/components/illustrations/DraggableClick.js
@@ -2,14 +2,12 @@ import React from "react";
import Svg, { Rect } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const DraggableClick = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default DraggableClick;
diff --git a/expo/src/components/illustrations/DraggableHand.js b/expo/src/components/illustrations/DraggableHand.js
index 09d35ef0f..4a12bc353 100644
--- a/expo/src/components/illustrations/DraggableHand.js
+++ b/expo/src/components/illustrations/DraggableHand.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const DraggableHand = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default DraggableHand;
diff --git a/expo/src/components/illustrations/EntertainmentVideos.js b/expo/src/components/illustrations/EntertainmentVideos.js
index 71c069ee8..a9d045012 100644
--- a/expo/src/components/illustrations/EntertainmentVideos.js
+++ b/expo/src/components/illustrations/EntertainmentVideos.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const EntertainmentVideos = ({ size, ...props }) => (
-
+
+
);
export default EntertainmentVideos;
diff --git a/expo/src/components/illustrations/Equality.js b/expo/src/components/illustrations/Equality.js
index ceeaabd29..f9d0c5e42 100644
--- a/expo/src/components/illustrations/Equality.js
+++ b/expo/src/components/illustrations/Equality.js
@@ -2,16 +2,14 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Equality = ({ size, color = "#000", ...props }) => (
-
+
+
);
export default Equality;
diff --git a/expo/src/components/illustrations/ExercicesVideos.js b/expo/src/components/illustrations/ExercicesVideos.js
index 4846ce76e..dac081b7f 100644
--- a/expo/src/components/illustrations/ExercicesVideos.js
+++ b/expo/src/components/illustrations/ExercicesVideos.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ExercicesVideos = ({ size, ...props }) => (
-
+
+
);
export default ExercicesVideos;
diff --git a/expo/src/components/illustrations/FollowUpIcon.js b/expo/src/components/illustrations/FollowUpIcon.js
index a24178b64..87a5d3bac 100644
--- a/expo/src/components/illustrations/FollowUpIcon.js
+++ b/expo/src/components/illustrations/FollowUpIcon.js
@@ -2,16 +2,14 @@ import React from "react";
import Svg, { G, Rect } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const FollowUpIcon = ({ color, size, ...props }) => (
-
+
+
);
export default FollowUpIcon;
diff --git a/expo/src/components/illustrations/FunIcon.js b/expo/src/components/illustrations/FunIcon.js
index 44a26c257..3797df452 100644
--- a/expo/src/components/illustrations/FunIcon.js
+++ b/expo/src/components/illustrations/FunIcon.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const FunIcon = ({ size, ...props }) => (
-
+
+
);
export default FunIcon;
diff --git a/expo/src/components/illustrations/GameIcon.js b/expo/src/components/illustrations/GameIcon.js
index d764089e8..605bcac9f 100644
--- a/expo/src/components/illustrations/GameIcon.js
+++ b/expo/src/components/illustrations/GameIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const GameIcon = ({ size, ...props }) => (
-
+
+
+
);
export default GameIcon;
diff --git a/expo/src/components/illustrations/GuidanceIcon.js b/expo/src/components/illustrations/GuidanceIcon.js
index 9f70381c7..03448e389 100644
--- a/expo/src/components/illustrations/GuidanceIcon.js
+++ b/expo/src/components/illustrations/GuidanceIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const GuidanceIcon = ({ size, color, ...props }) => (
-
+
+
);
export default GuidanceIcon;
diff --git a/expo/src/components/illustrations/HealthPlan.js b/expo/src/components/illustrations/HealthPlan.js
index f36a295ab..f24d9c704 100644
--- a/expo/src/components/illustrations/HealthPlan.js
+++ b/expo/src/components/illustrations/HealthPlan.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HealthPlan = ({ size, ...props }) => (
-
+
+
);
export default HealthPlan;
diff --git a/expo/src/components/illustrations/HydrationIcon.js b/expo/src/components/illustrations/HydrationIcon.js
index 59d4c1ec6..814adabc6 100644
--- a/expo/src/components/illustrations/HydrationIcon.js
+++ b/expo/src/components/illustrations/HydrationIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HydrationIcon = ({ size, ...props }) => (
-
+
+
);
export default HydrationIcon;
diff --git a/expo/src/components/illustrations/InfoObjectif.js b/expo/src/components/illustrations/InfoObjectif.js
index 365c9970b..63c886a7e 100644
--- a/expo/src/components/illustrations/InfoObjectif.js
+++ b/expo/src/components/illustrations/InfoObjectif.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { G, Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const InfosIcon = ({ color = "#000000", size, ...props }) => (
-
+
+
);
export default InfosIcon;
diff --git a/expo/src/components/illustrations/Infos.js b/expo/src/components/illustrations/Infos.js
index 4e5840daa..6214f11bd 100644
--- a/expo/src/components/illustrations/Infos.js
+++ b/expo/src/components/illustrations/Infos.js
@@ -2,17 +2,15 @@ import React from "react";
import Svg, { G, Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const InfosIcon = ({ color, size, ...props }) => (
-
+
+
);
export default InfosIcon;
diff --git a/expo/src/components/illustrations/Lock.js b/expo/src/components/illustrations/Lock.js
index a1476d8e9..bcf30fe79 100644
--- a/expo/src/components/illustrations/Lock.js
+++ b/expo/src/components/illustrations/Lock.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Lock = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default Lock;
diff --git a/expo/src/components/illustrations/ManAndWoman.js b/expo/src/components/illustrations/ManAndWoman.js
index 21a9b3d3f..917f59449 100644
--- a/expo/src/components/illustrations/ManAndWoman.js
+++ b/expo/src/components/illustrations/ManAndWoman.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ManAndWoman = ({ color = "#211F28", size, ...props }) => (
-
+
+
);
export default ManAndWoman;
diff --git a/expo/src/components/illustrations/ManAndWomanBust.js b/expo/src/components/illustrations/ManAndWomanBust.js
index c8ce940e6..2336203a7 100644
--- a/expo/src/components/illustrations/ManAndWomanBust.js
+++ b/expo/src/components/illustrations/ManAndWomanBust.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ManAndWomanBust = ({ color = "#DE285E", size, ...props }) => (
-
+
+
);
export default ManAndWomanBust;
diff --git a/expo/src/components/illustrations/MeditationIcon.js b/expo/src/components/illustrations/MeditationIcon.js
index 9bd30ea0c..3b29ec096 100644
--- a/expo/src/components/illustrations/MeditationIcon.js
+++ b/expo/src/components/illustrations/MeditationIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const MeditationIcon = ({ size, ...props }) => (
-
+
+
);
export default MeditationIcon;
diff --git a/expo/src/components/illustrations/MotivationIcon.js b/expo/src/components/illustrations/MotivationIcon.js
index d882ddde0..55e5300eb 100644
--- a/expo/src/components/illustrations/MotivationIcon.js
+++ b/expo/src/components/illustrations/MotivationIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, Circle } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const MotivationIcon = ({ size, ...props }) => (
-
+
+
);
export default MotivationIcon;
diff --git a/expo/src/components/illustrations/MusicIcon.js b/expo/src/components/illustrations/MusicIcon.js
index ce99d2cf5..2c6a40b95 100644
--- a/expo/src/components/illustrations/MusicIcon.js
+++ b/expo/src/components/illustrations/MusicIcon.js
@@ -2,28 +2,20 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const MusicIcon = ({ size, ...props }) => (
-
+
+
);
export default MusicIcon;
diff --git a/expo/src/components/illustrations/NewsPaper.js b/expo/src/components/illustrations/NewsPaper.js
index 8a100a9f7..2cc2c4248 100644
--- a/expo/src/components/illustrations/NewsPaper.js
+++ b/expo/src/components/illustrations/NewsPaper.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const NewsPaper = ({ size, ...props }) => (
-
+
+
);
export default NewsPaper;
diff --git a/expo/src/components/illustrations/NoStrategyIcon.js b/expo/src/components/illustrations/NoStrategyIcon.js
index 2fe76cd6e..28a9a1618 100644
--- a/expo/src/components/illustrations/NoStrategyIcon.js
+++ b/expo/src/components/illustrations/NoStrategyIcon.js
@@ -2,15 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const NoStrategyIcon = ({ size }) => (
-
+
+
);
export default NoStrategyIcon;
diff --git a/expo/src/components/illustrations/QuizzIcon.js b/expo/src/components/illustrations/QuizzIcon.js
index 6bdb88301..108ad7b6b 100644
--- a/expo/src/components/illustrations/QuizzIcon.js
+++ b/expo/src/components/illustrations/QuizzIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const QuizzIcon = ({ selected, size, color, ...props }) => (
-
+
+
);
export default QuizzIcon;
diff --git a/expo/src/components/illustrations/ReadingIcon.js b/expo/src/components/illustrations/ReadingIcon.js
index 991583544..03508ace0 100644
--- a/expo/src/components/illustrations/ReadingIcon.js
+++ b/expo/src/components/illustrations/ReadingIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ReadingIcon = ({ size, ...props }) => (
-
+
+
);
export default ReadingIcon;
diff --git a/expo/src/components/illustrations/ReminderIcon.js b/expo/src/components/illustrations/ReminderIcon.js
index 9604194a5..df2c31194 100644
--- a/expo/src/components/illustrations/ReminderIcon.js
+++ b/expo/src/components/illustrations/ReminderIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ReminderIcon = ({ color, size, selected, ...props }) => (
-
+
+
);
export default ReminderIcon;
diff --git a/expo/src/components/illustrations/ReorderIcon.js b/expo/src/components/illustrations/ReorderIcon.js
index 45c64022a..6ca5c61da 100644
--- a/expo/src/components/illustrations/ReorderIcon.js
+++ b/expo/src/components/illustrations/ReorderIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ReorderIcon = ({ size, ...props }) => (
-
+
+
);
export default ReorderIcon;
diff --git a/expo/src/components/illustrations/Screen2.js b/expo/src/components/illustrations/Screen2.js
index 6c7d50afa..c84a355f8 100644
--- a/expo/src/components/illustrations/Screen2.js
+++ b/expo/src/components/illustrations/Screen2.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Screen2 = ({ color = "#5150A2", fillOpacity = 0.25, ...props }) => (
-
+
+
);
export default Screen2;
diff --git a/expo/src/components/illustrations/SensationIcon.js b/expo/src/components/illustrations/SensationIcon.js
index dd6855ae7..158659a9a 100644
--- a/expo/src/components/illustrations/SensationIcon.js
+++ b/expo/src/components/illustrations/SensationIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SensationIcon = ({ size, ...props }) => (
-
+
+
);
export default SensationIcon;
diff --git a/expo/src/components/illustrations/ShowerIcon.js b/expo/src/components/illustrations/ShowerIcon.js
index d57e5c6b4..06855d15e 100644
--- a/expo/src/components/illustrations/ShowerIcon.js
+++ b/expo/src/components/illustrations/ShowerIcon.js
@@ -2,64 +2,30 @@ import React from "react";
import Svg, { Path, G, Mask } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ShowerIcon = ({ size, ...props }) => (
-
+
+
);
export default ShowerIcon;
diff --git a/expo/src/components/illustrations/SophrologyIcon.js b/expo/src/components/illustrations/SophrologyIcon.js
index 820345e5d..a2a224af8 100644
--- a/expo/src/components/illustrations/SophrologyIcon.js
+++ b/expo/src/components/illustrations/SophrologyIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SophrologyIcon = ({ size, ...props }) => (
-
+
+
);
export default SophrologyIcon;
diff --git a/expo/src/components/illustrations/SportIcon.js b/expo/src/components/illustrations/SportIcon.js
index 1f51a6153..ea27946dd 100644
--- a/expo/src/components/illustrations/SportIcon.js
+++ b/expo/src/components/illustrations/SportIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SportIcon = ({ size, ...props }) => (
-
+
+
);
export default SportIcon;
diff --git a/expo/src/components/illustrations/StarButton.js b/expo/src/components/illustrations/StarButton.js
index 21fc34252..ebd8461fd 100644
--- a/expo/src/components/illustrations/StarButton.js
+++ b/expo/src/components/illustrations/StarButton.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const StarButton = ({ color, size, ...props }) => (
-
+
+
);
export default StarButton;
diff --git a/expo/src/components/illustrations/Stars.js b/expo/src/components/illustrations/Stars.js
index 07b8faece..4fc6094f5 100644
--- a/expo/src/components/illustrations/Stars.js
+++ b/expo/src/components/illustrations/Stars.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Stars = ({ color, size = 25, ...props }) => (
-
+
+
);
export default Stars;
diff --git a/expo/src/components/illustrations/StratPlusIcon.js b/expo/src/components/illustrations/StratPlusIcon.js
index 66c30b4a0..43dcc47b2 100644
--- a/expo/src/components/illustrations/StratPlusIcon.js
+++ b/expo/src/components/illustrations/StratPlusIcon.js
@@ -2,32 +2,16 @@ import React from "react";
import Svg, { Path, Circle } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const StratPlusIcon = ({ size, color = "#FF0000", ...props }) => (
-
-
-
+
+
);
export default StratPlusIcon;
diff --git a/expo/src/components/illustrations/StrategyIcon.js b/expo/src/components/illustrations/StrategyIcon.js
index dfc7aa0cb..f790d29ef 100644
--- a/expo/src/components/illustrations/StrategyIcon.js
+++ b/expo/src/components/illustrations/StrategyIcon.js
@@ -1,18 +1,15 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-bottom: -3px;
-`;
-
-const StrategyIcon = ({ size }) => (
- (
+
+
);
export default StrategyIcon;
diff --git a/expo/src/components/illustrations/TTCIcon.js b/expo/src/components/illustrations/TTCIcon.js
index 3d458dd7b..599e10e7b 100644
--- a/expo/src/components/illustrations/TTCIcon.js
+++ b/expo/src/components/illustrations/TTCIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const TTCIcon = ({ size, ...props }) => (
-
+
+
);
export default TTCIcon;
diff --git a/expo/src/components/illustrations/ThinkVideos.js b/expo/src/components/illustrations/ThinkVideos.js
index 21901339c..23b0a8c20 100644
--- a/expo/src/components/illustrations/ThinkVideos.js
+++ b/expo/src/components/illustrations/ThinkVideos.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G, Rect, Defs, ClipPath } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ThinkVideos = ({ size, ...props }) => (
-
+
+
);
export default ThinkVideos;
diff --git a/expo/src/components/illustrations/TickDone.js b/expo/src/components/illustrations/TickDone.js
index 0f1e39a40..15911b964 100644
--- a/expo/src/components/illustrations/TickDone.js
+++ b/expo/src/components/illustrations/TickDone.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const TickDone = ({ size, color, opacity = 1, ...props }) => (
-
+
+
);
export default TickDone;
diff --git a/expo/src/components/illustrations/TipIcon.js b/expo/src/components/illustrations/TipIcon.js
index 040da3cd5..f82f47f16 100644
--- a/expo/src/components/illustrations/TipIcon.js
+++ b/expo/src/components/illustrations/TipIcon.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const TipIcon = ({ size, ...props }) => (
-
+
+
);
export default TipIcon;
diff --git a/expo/src/components/illustrations/TriIcon.js b/expo/src/components/illustrations/TriIcon.js
index c87745064..df8826b33 100644
--- a/expo/src/components/illustrations/TriIcon.js
+++ b/expo/src/components/illustrations/TriIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const TriIcon = ({ size, ...props }) => (
-
+
+
);
export default TriIcon;
diff --git a/expo/src/components/illustrations/VideosIcon.js b/expo/src/components/illustrations/VideosIcon.js
index bae18f760..ba85e271e 100644
--- a/expo/src/components/illustrations/VideosIcon.js
+++ b/expo/src/components/illustrations/VideosIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, Circle } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const VideosIcon = ({ size, ...props }) => (
-
+
+
);
export default VideosIcon;
diff --git a/expo/src/components/illustrations/WalkIcon.js b/expo/src/components/illustrations/WalkIcon.js
index 33bf2a5f2..7e7c43782 100644
--- a/expo/src/components/illustrations/WalkIcon.js
+++ b/expo/src/components/illustrations/WalkIcon.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, G } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const WalkIcon = ({ size, ...props }) => (
-
+
+
);
export default WalkIcon;
diff --git a/expo/src/components/illustrations/drinksAndFood/AperitiveBottle.js b/expo/src/components/illustrations/drinksAndFood/AperitiveBottle.js
index 802289b7d..bae526236 100644
--- a/expo/src/components/illustrations/drinksAndFood/AperitiveBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/AperitiveBottle.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const AperitiveBottle = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default AperitiveBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/AperitiveGlass.js b/expo/src/components/illustrations/drinksAndFood/AperitiveGlass.js
index 6079a2533..ff4570d1c 100644
--- a/expo/src/components/illustrations/drinksAndFood/AperitiveGlass.js
+++ b/expo/src/components/illustrations/drinksAndFood/AperitiveGlass.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const AperitiveGlass = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default AperitiveGlass;
diff --git a/expo/src/components/illustrations/drinksAndFood/Banasplit.js b/expo/src/components/illustrations/drinksAndFood/Banasplit.js
index c45bf8106..990d1feab 100644
--- a/expo/src/components/illustrations/drinksAndFood/Banasplit.js
+++ b/expo/src/components/illustrations/drinksAndFood/Banasplit.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Banasplit = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default Banasplit;
diff --git a/expo/src/components/illustrations/drinksAndFood/ChampagneBottle.js b/expo/src/components/illustrations/drinksAndFood/ChampagneBottle.js
index 84e84d7ff..7984354b7 100644
--- a/expo/src/components/illustrations/drinksAndFood/ChampagneBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/ChampagneBottle.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ChampagneBottle = ({ size, ...props }) => (
-
+
+
);
export default ChampagneBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/ChampagneGlass.js b/expo/src/components/illustrations/drinksAndFood/ChampagneGlass.js
index 888885080..dd2a71186 100644
--- a/expo/src/components/illustrations/drinksAndFood/ChampagneGlass.js
+++ b/expo/src/components/illustrations/drinksAndFood/ChampagneGlass.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const ChampagneGlass = ({ size, ...props }) => (
-
+
+
);
export default ChampagneGlass;
diff --git a/expo/src/components/illustrations/drinksAndFood/CiderBottle.js b/expo/src/components/illustrations/drinksAndFood/CiderBottle.js
index 1e040becf..7063232f3 100644
--- a/expo/src/components/illustrations/drinksAndFood/CiderBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/CiderBottle.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CiderBottle = ({ color = "#DE285E", size, ...props }) => (
-
+
+
);
export default CiderBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/CocktailBottle.js b/expo/src/components/illustrations/drinksAndFood/CocktailBottle.js
index 5e15f268f..c532c101d 100644
--- a/expo/src/components/illustrations/drinksAndFood/CocktailBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/CocktailBottle.js
@@ -1,13 +1,8 @@
import React from "react";
import Svg, { Path } from "react-native-svg";
-import styled from "styled-components";
-const StyledSvg = styled(Svg)`
- margin-bottom: 10px;
-`;
-
-const CocktailBottle = ({ size, ...props }) => (
-
+const CocktailBottle = ({ size, className = "", ...props }) => (
+
+
);
export default CocktailBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/CocktailGlass.js b/expo/src/components/illustrations/drinksAndFood/CocktailGlass.js
index 4547aa0bc..ada9b2848 100644
--- a/expo/src/components/illustrations/drinksAndFood/CocktailGlass.js
+++ b/expo/src/components/illustrations/drinksAndFood/CocktailGlass.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CocktailGlass = ({ size, ...props }) => (
-
+
+
);
export default CocktailGlass;
diff --git a/expo/src/components/illustrations/drinksAndFood/CocktailGlassTriangle.js b/expo/src/components/illustrations/drinksAndFood/CocktailGlassTriangle.js
index 30b99b51f..1ef66189b 100644
--- a/expo/src/components/illustrations/drinksAndFood/CocktailGlassTriangle.js
+++ b/expo/src/components/illustrations/drinksAndFood/CocktailGlassTriangle.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const CocktailGlassTriangle = ({ size, ...props }) => (
-
+
+
);
export default CocktailGlassTriangle;
diff --git a/expo/src/components/illustrations/drinksAndFood/DigestiveDrink.js b/expo/src/components/illustrations/drinksAndFood/DigestiveDrink.js
index 90b608af7..d1244ad68 100644
--- a/expo/src/components/illustrations/drinksAndFood/DigestiveDrink.js
+++ b/expo/src/components/illustrations/drinksAndFood/DigestiveDrink.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const DigestiveDrink = ({ size, ...props }) => (
-
+
+
);
export default DigestiveDrink;
diff --git a/expo/src/components/illustrations/drinksAndFood/Esquimau.js b/expo/src/components/illustrations/drinksAndFood/Esquimau.js
index 273eb1c75..33b1ef1a1 100644
--- a/expo/src/components/illustrations/drinksAndFood/Esquimau.js
+++ b/expo/src/components/illustrations/drinksAndFood/Esquimau.js
@@ -2,17 +2,15 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Esquimau = ({ size, ...props }) => (
-
+
+
);
export default Esquimau;
diff --git a/expo/src/components/illustrations/drinksAndFood/Flasque.js b/expo/src/components/illustrations/drinksAndFood/Flasque.js
index de3b3b641..310e0ff82 100644
--- a/expo/src/components/illustrations/drinksAndFood/Flasque.js
+++ b/expo/src/components/illustrations/drinksAndFood/Flasque.js
@@ -2,22 +2,14 @@ import React from "react";
import Svg, { G, Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HalfCider = ({ size, ...props }) => (
-
+
+
);
export default HalfCider;
diff --git a/expo/src/components/illustrations/drinksAndFood/Glace.js b/expo/src/components/illustrations/drinksAndFood/Glace.js
index 7e236607a..0f07d780f 100644
--- a/expo/src/components/illustrations/drinksAndFood/Glace.js
+++ b/expo/src/components/illustrations/drinksAndFood/Glace.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Glace = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default Glace;
diff --git a/expo/src/components/illustrations/drinksAndFood/HalfBeer.js b/expo/src/components/illustrations/drinksAndFood/HalfBeer.js
index d5657c6b6..aaefc077a 100644
--- a/expo/src/components/illustrations/drinksAndFood/HalfBeer.js
+++ b/expo/src/components/illustrations/drinksAndFood/HalfBeer.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HalfBeer = ({ size, ...props }) => (
-
+
+
);
export default HalfBeer;
diff --git a/expo/src/components/illustrations/drinksAndFood/HalfCider.js b/expo/src/components/illustrations/drinksAndFood/HalfCider.js
index 9eca5d8a6..b35c4a510 100644
--- a/expo/src/components/illustrations/drinksAndFood/HalfCider.js
+++ b/expo/src/components/illustrations/drinksAndFood/HalfCider.js
@@ -2,16 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HalfCider = ({ size, ...props }) => (
-
+
+
);
export default HalfCider;
diff --git a/expo/src/components/illustrations/drinksAndFood/HotDog.js b/expo/src/components/illustrations/drinksAndFood/HotDog.js
index 47d851270..7bc6390e0 100644
--- a/expo/src/components/illustrations/drinksAndFood/HotDog.js
+++ b/expo/src/components/illustrations/drinksAndFood/HotDog.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const HotDog = ({ color = "#DE285E", size, ...props }) => (
-
+
+
);
export default HotDog;
diff --git a/expo/src/components/illustrations/drinksAndFood/Mojito.js b/expo/src/components/illustrations/drinksAndFood/Mojito.js
index 868fb3c98..ade0ff320 100644
--- a/expo/src/components/illustrations/drinksAndFood/Mojito.js
+++ b/expo/src/components/illustrations/drinksAndFood/Mojito.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Mojito = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default Mojito;
diff --git a/expo/src/components/illustrations/drinksAndFood/OwnClGlass.js b/expo/src/components/illustrations/drinksAndFood/OwnClGlass.js
index b33495c31..f3569e042 100644
--- a/expo/src/components/illustrations/drinksAndFood/OwnClGlass.js
+++ b/expo/src/components/illustrations/drinksAndFood/OwnClGlass.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const OwnClGlass = ({ size, ...props }) => (
-
+
+
);
export default OwnClGlass;
diff --git a/expo/src/components/illustrations/drinksAndFood/PinaColada.js b/expo/src/components/illustrations/drinksAndFood/PinaColada.js
index 9714c4496..cf37c0892 100644
--- a/expo/src/components/illustrations/drinksAndFood/PinaColada.js
+++ b/expo/src/components/illustrations/drinksAndFood/PinaColada.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const PinaColada = ({ color = "#DE285E", size, ...props }) => (
-
+
+
);
export default PinaColada;
diff --git a/expo/src/components/illustrations/drinksAndFood/Pint.js b/expo/src/components/illustrations/drinksAndFood/Pint.js
index 4b1b122b4..9218c1ab7 100644
--- a/expo/src/components/illustrations/drinksAndFood/Pint.js
+++ b/expo/src/components/illustrations/drinksAndFood/Pint.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Pint = ({ size, color = "#de285e", ...props }) => (
-
+
+
);
export default Pint;
diff --git a/expo/src/components/illustrations/drinksAndFood/PintCider.js b/expo/src/components/illustrations/drinksAndFood/PintCider.js
index d94cfa8f8..2ab39e4d9 100644
--- a/expo/src/components/illustrations/drinksAndFood/PintCider.js
+++ b/expo/src/components/illustrations/drinksAndFood/PintCider.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const PintCider = ({ size, ...props }) => (
-
+
+
);
export default PintCider;
diff --git a/expo/src/components/illustrations/drinksAndFood/Shoot.js b/expo/src/components/illustrations/drinksAndFood/Shoot.js
index e41d4c0b3..283227016 100644
--- a/expo/src/components/illustrations/drinksAndFood/Shoot.js
+++ b/expo/src/components/illustrations/drinksAndFood/Shoot.js
@@ -2,22 +2,21 @@ import React from "react";
import Svg, { G, Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const Shoot = ({ size, ...props }) => (
-
+
+
);
export default Shoot;
diff --git a/expo/src/components/illustrations/drinksAndFood/SmallCan.js b/expo/src/components/illustrations/drinksAndFood/SmallCan.js
index 6632bc0f8..b58213f94 100644
--- a/expo/src/components/illustrations/drinksAndFood/SmallCan.js
+++ b/expo/src/components/illustrations/drinksAndFood/SmallCan.js
@@ -2,16 +2,14 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SmallCan = ({ size, ...props }) => (
-
+
+
);
export default SmallCan;
diff --git a/expo/src/components/illustrations/drinksAndFood/SpagettiPlate.js b/expo/src/components/illustrations/drinksAndFood/SpagettiPlate.js
index fb8248f9b..f5313809b 100644
--- a/expo/src/components/illustrations/drinksAndFood/SpagettiPlate.js
+++ b/expo/src/components/illustrations/drinksAndFood/SpagettiPlate.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SpagettiPlate = ({ size, color = "#DE285E", ...props }) => (
-
+
+
);
export default SpagettiPlate;
diff --git a/expo/src/components/illustrations/drinksAndFood/SpiritsBottle.js b/expo/src/components/illustrations/drinksAndFood/SpiritsBottle.js
index eb1562dc5..b94b38c7a 100644
--- a/expo/src/components/illustrations/drinksAndFood/SpiritsBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/SpiritsBottle.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SpiritsBottle = ({ size, ...props }) => (
-
+
+
);
export default SpiritsBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/WineBottle.js b/expo/src/components/illustrations/drinksAndFood/WineBottle.js
index 49ef7c100..268932edd 100644
--- a/expo/src/components/illustrations/drinksAndFood/WineBottle.js
+++ b/expo/src/components/illustrations/drinksAndFood/WineBottle.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const WineBottle = ({ size, ...props }) => (
-
+
+
);
export default WineBottle;
diff --git a/expo/src/components/illustrations/drinksAndFood/WineGlass.js b/expo/src/components/illustrations/drinksAndFood/WineGlass.js
index 64059856b..333870593 100644
--- a/expo/src/components/illustrations/drinksAndFood/WineGlass.js
+++ b/expo/src/components/illustrations/drinksAndFood/WineGlass.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const WineGlass = ({ size, ...props }) => (
-
+
+
);
export default WineGlass;
diff --git a/expo/src/components/illustrations/smiley/AngrySmiley.js b/expo/src/components/illustrations/smiley/AngrySmiley.js
index 6a1627bbb..bb35cff67 100644
--- a/expo/src/components/illustrations/smiley/AngrySmiley.js
+++ b/expo/src/components/illustrations/smiley/AngrySmiley.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const AngrySmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default AngrySmiley;
diff --git a/expo/src/components/illustrations/smiley/IllSmiley.js b/expo/src/components/illustrations/smiley/IllSmiley.js
index 6b7531dd0..ff493f0c9 100644
--- a/expo/src/components/illustrations/smiley/IllSmiley.js
+++ b/expo/src/components/illustrations/smiley/IllSmiley.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const IllSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default IllSmiley;
diff --git a/expo/src/components/illustrations/smiley/NoReassuredSmiley.js b/expo/src/components/illustrations/smiley/NoReassuredSmiley.js
index 563882712..a6ef5bcb0 100644
--- a/expo/src/components/illustrations/smiley/NoReassuredSmiley.js
+++ b/expo/src/components/illustrations/smiley/NoReassuredSmiley.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const NoReassuredSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default NoReassuredSmiley;
diff --git a/expo/src/components/illustrations/smiley/NoSmiley.js b/expo/src/components/illustrations/smiley/NoSmiley.js
index 5b35c8f21..783ee61dd 100644
--- a/expo/src/components/illustrations/smiley/NoSmiley.js
+++ b/expo/src/components/illustrations/smiley/NoSmiley.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, Mask } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const NoSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default NoSmiley;
diff --git a/expo/src/components/illustrations/smiley/PleasureSmiley.js b/expo/src/components/illustrations/smiley/PleasureSmiley.js
index 853751fb9..1fa2bf268 100644
--- a/expo/src/components/illustrations/smiley/PleasureSmiley.js
+++ b/expo/src/components/illustrations/smiley/PleasureSmiley.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const PleasureSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default PleasureSmiley;
diff --git a/expo/src/components/illustrations/smiley/SadSmiley.js b/expo/src/components/illustrations/smiley/SadSmiley.js
index a6716309f..60d386a28 100644
--- a/expo/src/components/illustrations/smiley/SadSmiley.js
+++ b/expo/src/components/illustrations/smiley/SadSmiley.js
@@ -2,15 +2,13 @@ import React from "react";
import Svg, { Path } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const SadSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default SadSmiley;
diff --git a/expo/src/components/illustrations/smiley/YesSmiley.js b/expo/src/components/illustrations/smiley/YesSmiley.js
index fe772f5e9..f873af57f 100644
--- a/expo/src/components/illustrations/smiley/YesSmiley.js
+++ b/expo/src/components/illustrations/smiley/YesSmiley.js
@@ -2,10 +2,8 @@ import React from "react";
import Svg, { Path, Mask } from "react-native-svg";
import styled from "styled-components";
-const StyledSvg = styled(Svg)``;
-
const YesSmiley = ({ color = "#000", size, ...props }) => (
-
+
+
);
export default YesSmiley;
diff --git a/expo/src/components/quizz/Question.js b/expo/src/components/quizz/Question.js
index 916c3e5de..dc62a7c91 100644
--- a/expo/src/components/quizz/Question.js
+++ b/expo/src/components/quizz/Question.js
@@ -1,10 +1,9 @@
import React from "react";
-import styled, { css } from "styled-components";
+import { ScrollView, TouchableOpacity } from "react-native";
import H2 from "../H2";
-import { screenWidth } from "../../styles/theme";
import WrapperContainer from "../WrapperContainer";
-const Question = ({
+export default function Question({
questionIndex,
numberOfQuestions,
questionKey,
@@ -13,16 +12,16 @@ const Question = ({
answers,
saveAnswer,
navigation,
-}) => {
+}) {
return (
-
+
Question {questionIndex + 1} / {numberOfQuestions}
-
- {questionTitle}
-
+
+ {questionTitle}
+
{answers.map(({ answerKey, content, score }, i) => (
- {
saveAnswer(questionIndex, questionKey, answerKey, score);
@@ -35,59 +34,22 @@ const Question = ({
}
}, 500);
}}
- selected={answerKey === selectedAnswerKey}
- last={i === answers.length - 1}>
- {content}
-
+ className={[
+ "w-full py-2 px-4 rounded-lg mb-2.5 border",
+ answerKey === selectedAnswerKey ? "bg-[#5352a3] border-[#4030a5]" : "bg-[#f3f3f6] border-[#dbdbe9]",
+ i === answers.length - 1 ? "mb-14" : "",
+ ].join(" ")}
+ >
+
+ {content}
+
+
))}
-
+
);
-};
-
-const AnswersContainer = styled.ScrollView`
- background-color: #f9f9f9;
- flex-shrink: 1;
- flex-grow: 0;
- padding-right: 10px;
- border: 1px solid transparent;
-`;
-
-const AnswerButton = styled.TouchableOpacity`
- width: 100%;
- /* min-height: 50px; */
- padding-vertical: 8px;
- background-color: ${({ selected }) => (selected ? "#5352a3" : "#f3f3f6")};
- border-color: ${({ selected }) => (selected ? "#4030a5" : "#dbdbe9")};
- border-width: 1px;
- border-radius: 7px;
- padding-left: 15px;
- justify-content: center;
- margin-bottom: ${({ last }) => (last ? 50 : 10)}px;
-`;
-
-const AnswerContent = styled(H2)`
- font-weight: 500;
- color: ${({ selected }) => (selected ? "#f9f9f9" : "#191919")};
-`;
-
-/*
-QUESTION
-*/
-
-const commonCss = css`
- margin-bottom: 15px;
- flex-shrink: 0;
-`;
-
-const QuestionNumber = styled(H2)`
- ${commonCss}
-`;
-
-const QuestionTitle = styled(H2)`
- color: #4030a5;
- ${commonCss}
- margin-bottom: ${Math.min(30, screenWidth * 0.05)}px;
-`;
-
-export default Question;
+}
diff --git a/expo/src/components/userSurvey/Question.js b/expo/src/components/userSurvey/Question.js
index 8050719cb..4a984bd32 100644
--- a/expo/src/components/userSurvey/Question.js
+++ b/expo/src/components/userSurvey/Question.js
@@ -1,17 +1,15 @@
import React from "react";
-import styled, { css } from "styled-components";
+import { View, ScrollView, TouchableOpacity } from "react-native";
import H2 from "../H2";
-import { defaultPaddingFontScale, screenWidth } from "../../styles/theme";
import WrapperContainer from "../WrapperContainer";
import { useSetRecoilState } from "recoil";
import { showBootSplashState } from "../CustomBootsplash";
import BackButton from "../BackButton";
-import { TouchableOpacity } from "react-native";
import ProgressBar from "../ProgressBar";
import CloseButton from "../CloseButton";
import { logEvent } from "../../services/logEventsWithMatomo";
-const Question = ({
+export default function Question({
questionIndex,
numberOfQuestions,
questionKey,
@@ -23,13 +21,22 @@ const Question = ({
from,
progress,
event,
-}) => {
+}) {
const setShowBootsplash = useSetRecoilState(showBootSplashState);
+ const handleClose = () => {
+ logEvent({
+ category: `QUIZZ${event}`,
+ action: "QUIZZ_CLOSE_BUTTON",
+ name: questionKey,
+ });
+ navigation.navigate("TABS");
+ };
+
return (
<>
{questionIndex > 0 ? (
-
+
{
navigation.goBack();
@@ -42,42 +49,28 @@ const Question = ({
marginLeft
marginTop
/>
- {
- logEvent({
- category: `QUIZZ${event}`,
- action: "QUIZZ_CLOSE_BUTTON",
- name: questionKey,
- });
- navigation.navigate("TABS");
- }}>
+
-
+
) : (
-
- {
- logEvent({
- category: `QUIZZ${event}`,
- action: "QUIZZ_CLOSE_BUTTON",
- name: questionKey,
- });
- navigation.navigate("TABS");
- }}>
+
+
-
+
)}
-
+
Question {questionIndex + 1} / {numberOfQuestions}
-
- 100}>{questionTitle}
-
+
+ 100 ? "text-[18px]" : ""].join(" ")}>
+ {questionTitle}
+
+
{answers.map(({ answerKey, content, score }, i) => (
- {
saveAnswer(questionIndex, questionKey, answerKey, score);
@@ -96,76 +89,23 @@ const Question = ({
}
}, 500);
}}
- selected={answerKey === selectedAnswerKey}
- last={i === answers.length - 1}>
- {content}
-
+ className={[
+ "w-full py-2 px-4 rounded-lg mb-2.5 border",
+ answerKey === selectedAnswerKey ? "bg-[#5352a3] border-[#4030a5]" : "bg-[#f3f3f6] border-[#dbdbe9]",
+ i === answers.length - 1 ? "mb-[50px]" : "",
+ ].join(" ")}
+ >
+
+ {content}
+
+
))}
-
+
);
-};
-
-const AnswersContainer = styled.ScrollView`
- background-color: #f9f9f9;
- flex-shrink: 1;
- flex-grow: 0;
- padding-right: 10px;
- border: 1px solid transparent;
-`;
-
-const AnswerButton = styled.TouchableOpacity`
- width: 100%;
- /* min-height: 50px; */
- padding-vertical: 8px;
- background-color: ${({ selected }) => (selected ? "#5352a3" : "#f3f3f6")};
- border-color: ${({ selected }) => (selected ? "#4030a5" : "#dbdbe9")};
- border-width: 1px;
- border-radius: 7px;
- padding-left: 15px;
- justify-content: center;
- margin-bottom: ${({ last }) => (last ? 50 : 10)}px;
-`;
-
-const AnswerContent = styled(H2)`
- font-weight: 500;
- color: ${({ selected }) => (selected ? "#f9f9f9" : "#191919")};
-`;
-
-/*
-QUESTION
-*/
-
-const commonCss = css`
- margin-bottom: 15px;
- flex-shrink: 0;
-`;
-
-const QuestionNumber = styled(H2)`
- ${commonCss}
-`;
-
-const QuestionTitle = styled(H2)`
- color: #4030a5;
- ${commonCss}
- ${({ reduceSize }) => reduceSize && "font-size: 18px;"}
- margin-bottom: ${Math.min(30, screenWidth * 0.05)}px;
-`;
-
-export default Question;
-
-const HeaderContainer = styled.View`
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-end;
- margin-right: ${defaultPaddingFontScale()}px;
-`;
-
-const CloseOnlyContainer = styled.View`
- flex-direction: row;
- justify-content: flex-end;
- align-items: flex-end;
- padding-top: 20px;
- margin-right: ${defaultPaddingFontScale()}px;
-`;
+}
diff --git a/expo/src/components/userSurvey/QuestionMultipleChoice.js b/expo/src/components/userSurvey/QuestionMultipleChoice.js
index 8513ef5cc..a401c1363 100644
--- a/expo/src/components/userSurvey/QuestionMultipleChoice.js
+++ b/expo/src/components/userSurvey/QuestionMultipleChoice.js
@@ -1,19 +1,17 @@
import React from "react";
-import styled, { css } from "styled-components";
+import { View, ScrollView, TouchableOpacity } from "react-native";
import H2 from "../H2";
import H3 from "../H3";
-import { defaultPaddingFontScale, screenWidth } from "../../styles/theme";
import WrapperContainer from "../WrapperContainer";
import ButtonPrimary from "../ButtonPrimary";
import { showBootSplashState } from "../CustomBootsplash";
import { useSetRecoilState } from "recoil";
-import { TouchableOpacity } from "react-native";
import BackButton from "../BackButton";
import ProgressBar from "../ProgressBar";
import CloseButton from "../CloseButton";
import { logEvent } from "../../services/logEventsWithMatomo";
-const QuestionMultipleChoice = ({
+export default function QuestionMultipleChoice({
questionIndex,
numberOfQuestions,
questionKey,
@@ -26,13 +24,22 @@ const QuestionMultipleChoice = ({
from,
progress,
event,
-}) => {
+}) {
const setShowBootsplash = useSetRecoilState(showBootSplashState);
+ const handleClose = () => {
+ logEvent({
+ category: `QUIZZ${event}`,
+ action: "QUIZZ_CLOSE_BUTTON",
+ name: questionKey,
+ });
+ navigation.navigate("TABS");
+ };
+
return (
<>
{questionIndex > 0 ? (
-
+
{
navigation.goBack();
@@ -45,45 +52,31 @@ const QuestionMultipleChoice = ({
marginLeft
marginTop
/>
- {
- logEvent({
- category: `QUIZZ${event}`,
- action: "QUIZZ_CLOSE_BUTTON",
- name: questionKey,
- });
- navigation.navigate("TABS");
- }}>
+
-
+
) : (
-
- {
- logEvent({
- category: `QUIZZ${event}`,
- action: "QUIZZ_CLOSE_BUTTON",
- name: questionKey,
- });
- navigation.navigate("TABS");
- }}>
+
+
-
+
)}
-
+
Question {questionIndex + 1} / {numberOfQuestions}
-
- 100}>{questionTitle}
- (plusieurs choix autorisés)
-
+
+ 100 ? "text-[18px]" : ""].join(" ")}>
+ {questionTitle}
+
+ (plusieurs choix autorisés)
+
{answers.map(({ answerKey, content, score }, i) => (
- {
+ onPress={() => {
saveMultipleAnswer(
questionIndex,
questionKey,
@@ -95,22 +88,29 @@ const QuestionMultipleChoice = ({
score
);
}}
- selected={selectedAnswerKey?.includes(answerKey)}
- last={i === answers.length - 1}>
-
+ className={[
+ "w-full py-2 px-4 rounded-lg mb-2.5 border",
+ selectedAnswerKey?.includes(answerKey)
+ ? "bg-[#5352a3] border-[#4030a5]"
+ : "bg-[#f3f3f6] border-[#dbdbe9]",
+ i === answers.length - 1 ? "mb-[50px]" : "",
+ ].join(" ")}
+ >
+
{content}
-
-
+
+
))}
{
setTimeout(async () => {
- logMultipleAnswer(
- questionIndex,
- questionKey,
- getAnswerScores(selectedAnswerKey, answers)
- );
+ logMultipleAnswer(questionIndex, questionKey, getAnswerScores(selectedAnswerKey, answers));
const endOfQuestions = questionIndex === numberOfQuestions - 1;
if (!endOfQuestions) {
navigation.push(`QUIZZ_QUESTION_${questionIndex + 1 + 1}`);
@@ -128,89 +128,12 @@ const QuestionMultipleChoice = ({
content="Suivant"
disabled={!selectedAnswerKey || selectedAnswerKey.length === 0}
/>
-
+
);
-};
-
-const getAnswerScores = (selectedAnswerKey, answers) => {
- const answerScores = [];
-
- for (let i = 0; i < selectedAnswerKey.length; i++) {
- const answerKey = selectedAnswerKey[i];
- const answer = answers.find((a) => a.answerKey === answerKey);
- const score = answer.score;
- answerScores.push(score);
- }
-
- return answerScores;
-};
-
-const AnswersContainer = styled.ScrollView`
- background-color: #f9f9f9;
- flex-shrink: 1;
- flex-grow: 0;
- padding-right: 10px;
- border: 1px solid transparent;
-`;
-
-const AnswerButton = styled.TouchableOpacity`
- width: 100%;
- /* min-height: 50px; */
- padding-vertical: 8px;
- background-color: ${({ selected }) => (selected ? "#5352a3" : "#f3f3f6")};
- border-color: ${({ selected }) => (selected ? "#4030a5" : "#dbdbe9")};
- border-width: 1px;
- border-radius: 7px;
- padding-left: 15px;
- justify-content: center;
- margin-bottom: ${({ last }) => (last ? 50 : 10)}px;
-`;
-
-const AnswerContent = styled(H2)`
- font-weight: 500;
- color: ${({ selected }) => (selected ? "#f9f9f9" : "#191919")};
-`;
-
-/*
-QUESTION
-*/
-
-const commonCss = css`
- margin-bottom: 15px;
- flex-shrink: 0;
-`;
-
-const QuestionNumber = styled(H2)`
- ${commonCss}
-`;
-
-const QuestionTitle = styled(H2)`
- color: #4030a5;
- ${commonCss}
- ${({ reduceSize }) => reduceSize && "font-size: 18px;"}
- margin-bottom: ${Math.min(30, screenWidth * 0.05)}px;
-`;
-const QuestionSubtitle = styled(H3)`
- ${commonCss}
- font-style: italic;
- margin-bottom: ${Math.min(30, screenWidth * 0.05)}px;
-`;
-
-export default QuestionMultipleChoice;
-
-const HeaderContainer = styled.View`
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-end;
- margin-right: ${defaultPaddingFontScale()}px;
-`;
+}
-const CloseOnlyContainer = styled.View`
- flex-direction: row;
- justify-content: flex-end;
- align-items: flex-end;
- padding-top: 20px;
- margin-right: ${defaultPaddingFontScale()}px;
-`;
+function getAnswerScores(selectedAnswerKey, answers) {
+ return selectedAnswerKey?.map((key) => answers.find((a) => a.answerKey === key)?.score).filter(Boolean) || [];
+}
diff --git a/expo/tailwind.config.js b/expo/tailwind.config.js
index 4f2ad4e8e..256651f4c 100644
--- a/expo/tailwind.config.js
+++ b/expo/tailwind.config.js
@@ -2,7 +2,14 @@
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ extend: {
+ spacing: {
+ ...Object.fromEntries(Array.from({ length: 41 }, (_, i) => [i * 0.5, `${i * 0.5 * 4}px`])),
+ },
+ lineHeight: {
+ ...Object.fromEntries(Array.from({ length: 41 }, (_, i) => [i * 0.5, `${i * 0.5 * 4}px`])),
+ },
+ },
},
plugins: [],
};