add a new component - Alert | show info that you can check your answers by swiping back (TestPage) | add a new variable to theme | new tab colors in review mode

src/libs/native-base/components/Button.ts

@@ -367,7 +367,7 @@ export default (variables /* : * */ = variable) => {
     borderRadius: variables.borderRadiusBase,
     borderColor: variables.buttonPrimaryBg,
     borderWidth: null,
-    height: 45,
+    height: variables.buttonHeightNormal,
     flexDirection: 'row',
     elevation: 2,
     alignItems: 'center',

src/libs/native-base/variables/platform.ts

@@ -57,6 +57,7 @@ export default {
   buttonDefaultFlex: 1,
   buttonDefaultBorderRadius: 2,
   buttonDefaultBorderWidth: 1,
+  buttonHeightNormal: 45,
   get buttonPrimaryBg() {
     return this.brandPrimary;
   },

src/libs/native-base/variables/types.ts

@@ -54,6 +54,7 @@ export type Variables = {
   buttonDefaultFlex: number;
   buttonDefaultBorderRadius: number;
   buttonDefaultBorderWidth: number;
+  buttonHeightNormal: number;
   buttonPrimaryBg: string;
   buttonPrimaryColor: string;
   buttonInfoBg: string;

src/screens/TestScreen/components/Test/Alert.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useVariables } from 'libs/native-base';
+
+import { Icon, View, H3, Text, NativeBase } from 'native-base';
+import { StyleSheet } from 'react-native';
+
+export enum AlertVariant {
+  Info = 'info',
+}
+
+export interface AlertProps extends Pick<NativeBase.View, 'style'> {
+  variant?: AlertVariant;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+const Alert = ({
+  variant = AlertVariant.Info,
+  title,
+  description,
+  style,
+}: AlertProps) => {
+  const variables = useVariables();
+
+  const renderIcon = () => {
+    const defaultProps = {
+      style: [{ color: variables.inverseTextColor }, styles.icon],
+    };
+    switch (variant) {
+      case AlertVariant.Info:
+        return <Icon type="Feather" name="info" {...defaultProps} />;
+    }
+  };
+
+  const getBgColor = () => {
+    switch (variant) {
+      case AlertVariant.Info:
+        return variables.brandInfo;
+    }
+  };
+
+  return (
+    <View
+      padder
+      style={[{ backgroundColor: getBgColor() }, styles.container, style]}
+    >
+      <View>{renderIcon()}</View>
+      <View style={styles.textContainer}>
+        <H3 style={[{ color: variables.inverseTextColor }]}>{title}</H3>
+        {description ? (
+          <Text
+            style={[{ color: variables.inverseTextColor }, styles.description]}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 5,
+  },
+  icon: {
+    fontSize: 30,
+    marginRight: 10,
+  },
+  description: {
+    marginTop: 5,
+  },
+  textContainer: {
+    flexShrink: 1,
+  },
+});
+
+export default Alert;

src/screens/TestScreen/components/Test/Question.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Question as QuestionT, Answer } from 'libs/graphql';
+import { useVariables } from 'libs/native-base';
 
 import { StyleSheet } from 'react-native';
 import { Button, H1, Text } from 'native-base';
@@ -21,6 +22,8 @@ const Question = ({
   reviewMode,
   selectAnswer,
 }: QuestionProps) => {
+  const variables = useVariables();
+
   return (
     <Content>
       {question.from && <Text note>{question.from}</Text>}
@@ -47,6 +50,7 @@ const Question = ({
             style={[
               index + 1 === ANSWERS.length ? undefined : styles.mb,
               styles.button,
+              { minHeight: variables.buttonHeightNormal },
             ]}
             success={reviewMode && isCorrect}
             danger={reviewMode && isSelected && !isCorrect}

src/screens/TestScreen/components/Test/SummaryTab.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
+import { polishPlurals } from 'polish-plurals';
 import { Answer, Question } from 'libs/graphql';
 
+import { StyleSheet } from 'react-native';
 import { Button, H1, H3, Text, View } from 'native-base';
 import Content from '../Content/Content';
-import { polishPlurals } from 'polish-plurals';
-import { StyleSheet } from 'react-native';
+import Alert from './Alert';
 
 export interface SummaryTabProps {
   reviewMode: boolean;
@@ -25,12 +26,16 @@ const SummaryTab = ({
     ).length;
   }, [answers, questions]);
   const total = questions.length;
-  const wrongAnswers = total - correctAnswers;
 
   return (
     <Content>
       {reviewMode ? (
         <View>
+          <Alert
+            title="Pamiętaj!"
+            description="Po zakończeniu testu możesz wrócić do pytań i sprawdzić gdzie zrobiłeś błąd."
+            style={styles.mb}
+          />
           <H1 style={[styles.textAlignCenter]}>
             Twój wynik: {Math.ceil((correctAnswers / total) * 100)}%
           </H1>

src/screens/TestScreen/components/Test/Test.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
 import { Question as QuestionT, Answer } from 'libs/graphql';
-import { useVariables } from 'libs/native-base';
 
 import { ScrollableTab, Tab, Tabs } from 'native-base';
 import Question from './Question';
@@ -17,7 +16,6 @@ const Test = ({ questions }: TestProps) => {
   const [selectedAnswers, setSelectedAnswers] = useState<Answer[]>(
     new Array(questions.length).fill(''),
   );
-  const variables = useVariables();
 
   const createSelectAnswerHandler = (index: number) => (answer: Answer) => {
     if (reviewMode) {
@@ -40,17 +38,17 @@ const Test = ({ questions }: TestProps) => {
       {questions.map((question, index) => {
         const color =
           selectedAnswers[index] === question.correctAnswer
-            ? variables.buttonSuccessBg
-            : variables.buttonDangerBg;
-        const textStyle = {
+            ? 'lightgreen'
+            : 'red';
+        const textStyleReviewMode = {
           color,
         };
         return (
           <Tab
             key={question.id}
             heading={`Pytanie ${index + 1}`}
-            textStyle={reviewMode ? textStyle : []}
-            activeTextStyle={reviewMode ? textStyle : []}
+            textStyle={reviewMode ? textStyleReviewMode : []}
+            activeTextStyle={reviewMode ? textStyleReviewMode : []}
           >
             <Question
               question={question}