@servesall/atoms 1.0.50 → 1.0.55

package/src/Icons/Assets/toursResources.json

@@ -0,0 +1,228 @@
+{
+  "ip": 0,
+  "fr": 60,
+  "v": "5.1.20",
+  "assets": [],
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "toursResources",
+      "ip": 0,
+      "st": 0,
+      "ind": 1,
+      "hix": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "or": { "a": 0, "k": [0, 0, 0] },
+        "a": { "a": 0, "k": [13, 9, 0] },
+        "p": {
+          "s": true,
+          "x": { "a": 0, "k": 13.621 },
+          "y": { "a": 0, "k": 12.04 }
+        },
+        "rx": { "a": 0, "k": 0 },
+        "ry": { "a": 0, "k": 0 },
+        "rz": { "a": 0, "k": 0 },
+        "s": { "a": 0, "k": [100, 100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "toursResources shape group",
+          "it": [
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [6.20812066, 22.4253184],
+                    [9.14678701, 24.2866516],
+                    [12.0907873, 22.4133174]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [-1.2986666400000004, 0],
+                    [-0.5186667000000007, 1.1066666000000005]
+                  ],
+                  "o": [
+                    [0.5199999800000006, 1.1000000000000014],
+                    [1.3026666899999988, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "v": [
+                    [28.2907867, 21.0373179],
+                    [25.041453, 17.7879842],
+                    [21.7921206, 21.0373179],
+                    [25.041453, 24.2866516]
+                  ],
+                  "i": [
+                    [0, 1.7945572999999975],
+                    [1.794557300000001, 0],
+                    [0, -1.7945571999999999],
+                    [-1.7945571999999999, 0]
+                  ],
+                  "o": [
+                    [0, -1.7945571999999999],
+                    [-1.7945571999999999, 0],
+                    [0, 1.7945572999999975],
+                    [1.794557300000001, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [22.2654533, 15.0493177],
+                    [19.708121, 7.71331787],
+                    [16.1534538, 7.71331787]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [11.5601203, 10.597318],
+                    [8.48812071, 10.597318],
+                    [5.54412047, 9.3053182],
+                    [4.90012042, 8.60531807]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0.7573333599999996, 0.8239999999999998],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-1.1186666400000007, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [25.041453, 14.4373182],
+                    [18.5867869, 19.6506513],
+                    [18.5894547, 19.6506513],
+                    [14.5841204, 19.6506513],
+                    [9.14545441, 14.2119853],
+                    [3.70678711, 19.6506513],
+                    [14.5841204, 19.6506513]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0.6373333000000017, -2.9786666000000004],
+                    [0, 0],
+                    [0, 0],
+                    [3.0039999900000005, 0],
+                    [0, -3.0040000000000013],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-3.1693333999999993, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -3.0040000000000013],
+                    [-3.0040000299999994, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [24.296121, 10.597318],
+                    [24.296121, 8.60531807]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "st",
+              "o": { "a": 0, "k": 100 },
+              "c": { "a": 0, "k": [0, 0, 0, 1] },
+              "lc": 2,
+              "lj": 2,
+              "ml": 1,
+              "w": { "a": 0, "k": 1 },
+              "d": [
+                { "n": "d", "v": { "a": 0, "k": 0 }, "nm": "0" },
+                { "n": "g", "v": { "a": 0, "k": 0 }, "nm": "1" }
+              ]
+            },
+            {
+              "ty": "fl",
+              "o": { "a": 0, "k": 0 },
+              "c": { "a": 0, "k": [0, 0, 0, 0] },
+              "r": 1
+            },
+            {
+              "ty": "tr",
+              "o": { "a": 0, "k": 100 },
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "p": { "a": 0, "k": [-3, -7] },
+              "r": { "a": 0, "k": 0 }
+            }
+          ]
+        }
+      ],
+      "op": 1
+    }
+  ],
+  "op": 1,
+  "w": 28,
+  "h": 25
+}

package/src/Layout/Layout.style.js

@@ -87,6 +87,12 @@ export const PaddingVerticalElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const PaddingTopElement = styled.View`
+  padding-top: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
 export const RowElement = styled.View`
   flex-direction: row;
   ${(props) => props.style};

package/src/Layout/PaddingTop.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { PaddingTopElement } from "./Layout.style";
+
+const PaddingTop = ({ children, style, direction = false }) => {
+  return (
+    <PaddingTopElement style={style} flexDirection={direction}>
+      {children}
+    </PaddingTopElement>
+  );
+};
+
+export default PaddingTop;

package/src/Layout/index.js

@@ -9,6 +9,7 @@ import MarginTop from "./MarginTop";
 import Padding from "./Padding";
 import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
+import PaddingTop from "./PaddingTop";
 import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
@@ -26,6 +27,7 @@ export {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,

package/src/Switch/index.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef } from "react";
+import { View } from "react-native";
+import LottieView from "lottie-react-native";
+import switchIcon from "./switch.json";
+import { RoundedBtn } from "../Buttons";
+import colors from "../Theme/definitions/colors";
+import { Center } from "../Layout";
+
+const CheckMark = ({ isEnabled, micro }) => {
+  const loadingRef = useRef();
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: micro ? -7 : 10,
+        right: micro ? -7 : 10,
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        borderWidth: 1,
+        borderColor: isEnabled ? colors.color1 : colors.color10,
+        backgroundColor: colors.color1,
+      }}
+    >
+      <Center>
+        {isEnabled && (
+          <LottieView
+            ref={loadingRef}
+            style={{
+              height: 30,
+              width: 30,
+            }}
+            autoPlay={true}
+            loop={false}
+            source={switchIcon}
+          />
+        )}
+      </Center>
+    </View>
+  );
+};
+
+export default function Switch({
+  children,
+  enabled = true,
+  value = false,
+  onValueChange = () => {},
+  micro = false,
+}) {
+  const [isEnabled, setIsEnabled] = useState(value);
+  const toggleSwitch = () => {
+    enabled &&
+      setIsEnabled((previousState) => {
+        onValueChange(!previousState);
+        return !previousState;
+      });
+  };
+
+  useEffect(() => {
+    setIsEnabled(value);
+  }, [value]);
+
+  return (
+    <RoundedBtn
+      style={{
+        borderWidth: 1,
+        borderColor: isEnabled ? colors.color15 : colors.color10,
+        opacity: enabled ? 1 : 0.6,
+      }}
+      color={colors.color1}
+      onClick={toggleSwitch}
+    >
+      <CheckMark isEnabled={isEnabled} micro={micro} />
+      {children}
+    </RoundedBtn>
+  );
+}

package/src/Switch/switch.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"success","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[75,75,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[50],"e":[50.05400195600987],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"y":{"a":1,"k":[{"t":0,"s":[50],"e":[49.946001956009866],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[11,11],"e":[66.7,66.7],"i":{"x":[0.515,0.515],"y":[0.955,0.955]},"o":{"x":[0.455,0.455],"y":[0.03,0.03]}},{"t":12}]}},"shapes":[{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[69,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[85.2835427,75.5]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":2,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-28.156,92.301]},"r":{"a":0,"k":310.02746294528845}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[43,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[58.5,85.6007333]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":2,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[85.687,-14.236]},"r":{"a":0,"k":50.019215514920866}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"el","p":{"a":0,"k":[75,75]},"s":{"a":0,"k":[150,150]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":2,"c":{"a":0,"k":[0.3333333333333333,0.9372549019607843,0.7686274509803922,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-0.784,0]},"r":{"a":0,"k":0}}]}],"op":12}],"op":12,"w":100,"h":100}

package/src/Theme/definitions/colors.js

@@ -1,19 +1,30 @@
 const colors = {
   color1: "#FFFFFF",
-  color2: "#2d3436",
+  color2: "#000000",
   color3: "#74b9ff",
+  color3light: "#E1F0FF",
   color4: "#0984e3",
   color5: "#ffeaa7",
+  color5light: "#FFF9E5",
+  color5border: "#E4E0D2",
   color6: "#ff7675",
+  color6light: "#FFDCDB",
   color7: "#dfe6e9",
-  color8: "#fafafa",
+  color8: "#F8F9FB",
   color9: "#FFA15F",
-  color10: "#f6f7fb",
+  color9light: "#FFF0E6",
+  color9border: "#DDD1C9",
+  color10: "#F2F3F7",
   color11: "#00b894",
+  color11light: "#EEFFFC",
+  color11border: "#D2E3E0",
   color12: "#a29bfe",
+  color12light: "#F5F4FF",
+  color12border: "#DFDDEA",
   color13: "#fab1a0",
   color14: "#00b894",
   color15: "#00cec9",
   color16: "#636e72",
+  color17: "#6c5ce7",
 };
 export default colors;

package/src/Theme/definitions/fonts.js

@@ -1,5 +1,5 @@
 const fonts = {
-  xsmall: "12px",
+  xsmall: "16px",
   lhXsmall: "15px",
   small: "18px",
   lhSmall: "21px",

package/src/Theme/definitions/layout.js

@@ -1,7 +1,7 @@
 const layout = {
-  margin: '20px',
-  padding: '10px',
-  borderRadius: '8px',
-  borderRadiusSmall: '8px'
+  margin: "16px",
+  padding: "10px",
+  borderRadius: "8px",
+  borderRadiusSmall: "8px",
 };
 export default layout;

package/src/index.js

@@ -12,6 +12,7 @@ import {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,
@@ -32,6 +33,7 @@ import Icon from "./Icons";
 import FlatList from "./FlatList";
 import Header from "./Header";
 import BottomNavBar from "./BottomNavBar";
+import Switch from "./Switch";
 
 export {
   ThemeWrapper,
@@ -53,6 +55,7 @@ export {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,
@@ -72,4 +75,5 @@ export {
   FlatList,
   Header,
   BottomNavBar,
+  Switch,
 };