chore: remove styled-components (#621)

expo/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

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 <Animated.Text {...props} className={classNames} style={[inlineStyle, style]} />;
+};
+
+const styles = StyleSheet.create({
+  androidFont: {
+    fontFamily: "Raleway",
+  },
+});
+
+export default AnimatedText;

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 }) => (
-  <StyledSvg height={size} width={size} color={color} viewBox="0 0 24 24" {...style} fill="none">
+  <Svg height={size} width={size} color={color} viewBox="0 0 24 24" {...style} fill="none">
     <Path d="M6 9L12 15L18 9" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
-  </StyledSvg>
+  </Svg>
 );
 
-const StyledSvg = styled(Svg)``;
-
 export default ArrowDown;

expo/src/components/ArrowLeft.js

@@ -1,19 +1,16 @@
 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 }) => (
-  <StyledSvg height={size} width={size} viewBox="0 0 47 80" {...props}>
+  <Svg height={size} width={size} viewBox="0 0 47 80" {...props}>
     <Path
       d="M11.1269469,2 C8.7797638,-0.312083484 5.00731862,-0.298985751 2.67624681,2.02934039 C0.345175001,4.35766653 0.327631262,8.13009366 2.63694687,10.48 L32.1469469,40 L2.63694687,69.51 C1.12035436,71.0265924 0.52805754,73.2370741 1.08316889,75.3087779 C1.63828023,77.3804817 3.25646513,78.9986666 5.32816896,79.553778 C7.39987279,80.1088893 9.61035445,79.5165925 11.1269469,78 L44.8769469,44.24 C46.0036091,43.1145905 46.6366668,41.5874555 46.6366668,39.995 C46.6366668,38.4025445 46.0036091,36.8754095 44.8769469,35.75 L11.1269469,2 Z"
       id="ArrowLeft"
       fill={color}
       fillRule="nonzero"
       transform="translate(23.757570, 40.016477) scale(-1, 1) translate(-23.757570, -40.016477) "
     />
-  </StyledSvg>
+  </Svg>
 );
 
 export default ArrowLeft;

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 }) => (
-  <StyledSvg height={size} width={size} viewBox="0 0 47 80" {...props}>
+  <Svg height={size} width={size} viewBox="0 0 47 80" {...props}>
     <Path
       d="M10.37,2 C8.02281693,-0.312083484 4.25037175,-0.298985751 1.91929994,2.02934039 C-0.411771867,4.35766653 -0.429315606,8.13009366 1.88,10.48 L31.39,40 L1.88,69.51 C0.363407496,71.0265924 -0.228889328,73.2370741 0.326222019,75.3087779 C0.881333366,77.3804817 2.49951826,78.9986666 4.57122209,79.553778 C6.64292592,80.1088893 8.85340759,79.5165925 10.37,78 L44.12,44.24 C45.2466623,43.1145905 45.8797199,41.5874555 45.8797199,39.995 C45.8797199,38.4025445 45.2466623,36.8754095 44.12,35.75 L10.37,2 Z"
       id="ArrowRight"
       fill={color}
       fillRule="nonzero"
     />
-  </StyledSvg>
+  </Svg>
 );
 
 export default ArrowRight;

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 }) => (
-  <StyledSvg height={size} width={size} viewBox="0 0 270 185" {...style}>
+  <Svg height={size} width={size} viewBox="0 0 270 185" {...style}>
     <Polygon
       id="ArrowDown"
       fill={color}
       transform="translate(135.143315, 134.812629) rotate(135.000000) translate(-135.143315, -134.812629) "
       points="110 40 110 160 230.28663 160 230.28663 229.625259 40 229.625259 40 40"
     />
-  </StyledSvg>
+  </Svg>
 );
 
-const StyledSvg = styled(Svg)``;
-
 export default ArrowUp;

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 }) => (
-  <Container
-    onPress={onPress}
-    marginBottom={marginBottom}
-    marginLeft={marginLeft}
-    marginTop={marginTop}>
-    <ReturnButton bold>{"< Retour"}</ReturnButton>
-  </Container>
-);
-
-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 (
+    <TouchableOpacity
+      style={[
+        { marginRight: "auto" },
+        marginBottom && { marginBottom: 20 },
+        marginLeft && { marginLeft: defaultPaddingFontScale() },
+        marginTop && { marginTop: 20 },
+      ]}
+      onPress={onPress}
+    >
+      <TextStyled
+        className={[
+          "text-[#191919] flex-shrink-0 justify-center items-center",
+          Platform.OS === "android" ? "font-bold" : "font-extrabold",
+          height > 800
+            ? small
+              ? "text-[15px]"
+              : "text-[20px]"
+            : height > 700
+            ? small
+              ? "text-[13px]"
+              : "text-[18px]"
+            : small
+            ? "text-[13px]"
+            : "text-[15px]",
+        ].join(" ")}
+        style={{ textAlignVertical: "center" }}
+      >
+        {"< Retour"}
+      </TextStyled>
+    </TouchableOpacity>
+  );
+}

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 <StyledH1 style={style} {...props} />;
+}