@servesall/atoms 1.0.59 → 1.1.2

package/src/Buttons/RoundButton/index.js

@@ -29,29 +29,27 @@ const RoundBtn = ({
   });
 
   return (
-    <ButtonWrapper>
-      <Animated.View style={[animatedStyle]}>
-        <ButtonStyle
-          size={size}
-          active={active}
-          color={color}
-          style={style}
-          onPressIn={() => {
-            scale.value = withSequence(
-              withTiming(0.9, {
-                duration: 80,
-              }),
-              withTiming(1, {
-                duration: 200,
-              })
-            );
-          }}
-          onPress={() => onClick()}
-        >
-          {children}
-        </ButtonStyle>
-      </Animated.View>
-    </ButtonWrapper>
+    <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+      <ButtonStyle
+        size={size}
+        active={active}
+        color={color}
+        style={style}
+        onPressIn={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+            })
+          );
+        }}
+        onPress={() => onClick()}
+      >
+        {children}
+      </ButtonStyle>
+    </Animated.View>
   );
 };
 

package/src/Buttons/RoundedButton/RoundedButton.style.js

@@ -3,8 +3,9 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: 60px;
-  border-radius: ${(props) => props.theme.borderRadius};
+  min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
+  width: 100%;
+  border-radius: ${(props) => props.theme.borderRadiusMedium};
   background-color: ${(props) => props.color};
   opacity: ${(props) => (props.active ? 1 : 0.7)};
   ${(props) => props.style};

package/src/Buttons/RoundedButton/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonWrapper, ButtonStyle } from "./RoundedButton.style";
+import { ButtonStyle } from "./RoundedButton.style";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -13,6 +13,8 @@ const RoundedBtn = ({
   color,
   onClick = () => {},
   style,
+  size = "big",
+  hitSlop = 0,
 }) => {
   const scale = useSharedValue(1);
 
@@ -28,28 +30,28 @@ const RoundedBtn = ({
   });
 
   return (
-    <ButtonWrapper>
-      <Animated.View style={[animatedStyle]}>
-        <ButtonStyle
-          active={active}
-          color={color}
-          style={style}
-          onPressIn={() => {
-            scale.value = withSequence(
-              withTiming(0.9, {
-                duration: 80,
-              }),
-              withTiming(1, {
-                duration: 200,
-              })
-            );
-          }}
-          onPress={() => onClick()}
-        >
-          {children}
-        </ButtonStyle>
-      </Animated.View>
-    </ButtonWrapper>
+    <Animated.View style={[animatedStyle]}>
+      <ButtonStyle
+        hitSlop={hitSlop}
+        size={size}
+        active={active}
+        color={color}
+        style={style}
+        onPressIn={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+            })
+          );
+        }}
+        onPress={() => active && onClick()}
+      >
+        {children}
+      </ButtonStyle>
+    </Animated.View>
   );
 };
 

package/src/Buttons/TextButton/LineAnimation/LineAnimation.style.js

@@ -1,7 +1,7 @@
-import styled from 'styled-components/native';
+import styled from "styled-components/native";
 
 export const BorderIdle = styled.View`
-  height: 4px;
+  height: 18px;
   background-color: ${(props) => props.color};
   flex: 1;
   position: absolute;
@@ -10,7 +10,7 @@ export const BorderIdle = styled.View`
 `;
 
 export const BorderActive = styled.View`
-  height: 4px;
+  height: 18px;
   background-color: ${(props) => props.color};
   z-index: 11;
 `;

package/src/Buttons/TextButton/TextButton.style.js

@@ -1,8 +1,15 @@
-import styled from 'styled-components/native';
+import styled from "styled-components/native";
 
-export const ButtonWrapper = styled.Pressable`
-`;
+export const ButtonWrapper = styled.Pressable``;
 
 export const BorderWrapper = styled.View`
-  height: 4px;
+  height: 18px;
+  position: absolute;
+  width: 100%;
+  bottom: 10;
+  z-index: 0;
+`;
+
+export const ChildWrapper = styled.View`
+  z-index: 2;
 `;

package/src/Buttons/TextButton/index.js

@@ -1,32 +1,40 @@
-import React, {useState, useEffect} from 'react';
-import {ButtonWrapper, BorderWrapper} from './TextButton.style';
-import LineAnimation from './LineAnimation';
+import React, { useState, useEffect } from "react";
+import { ButtonWrapper, BorderWrapper, ChildWrapper } from "./TextButton.style";
+import LineAnimation from "./LineAnimation";
 
-const TextBtn = ({children, active, disabled = false, borderColorActive, borderColorIdle, onClick=() => {}, style}) => {
+const TextBtn = ({
+  children,
+  active,
+  disabled = false,
+  borderColorActive,
+  borderColorIdle,
+  onClick = () => {},
+  style,
+}) => {
+  const [isActive, setIsActive] = useState(active);
 
-    const [isActive, setIsActive] = useState(active);
+  useEffect(() => {
+    setIsActive(active);
+  }, [active]);
 
-    useEffect(() => {
-        setIsActive(active);
-      }, [active]);
-
-    return (
-        <ButtonWrapper
-            disabled={disabled}
-            onPress={() => {
-                onClick();
-                active !== false && setIsActive(true);
-            }}>
-            {children}
-            <BorderWrapper>
-                <LineAnimation
-                    active={isActive}
-                    borderColorActive={borderColorActive}
-                    borderColorIdle={borderColorIdle}
-                />
-            </BorderWrapper>
-        </ButtonWrapper>
-    );
+  return (
+    <ButtonWrapper
+      disabled={disabled}
+      onPress={() => {
+        onClick();
+        active !== false && setIsActive(true);
+      }}
+    >
+      <ChildWrapper>{children}</ChildWrapper>
+      <BorderWrapper>
+        <LineAnimation
+          active={isActive}
+          borderColorActive={borderColorActive}
+          borderColorIdle={borderColorIdle}
+        />
+      </BorderWrapper>
+    </ButtonWrapper>
+  );
 };
 
 export default TextBtn;

package/src/Buttons/index.js

@@ -3,5 +3,15 @@ import RoundedBtn from "./RoundedButton";
 import RoundBtn from "./RoundButton";
 import FloatingBtn from "./FloatingButton";
 import AnimatedButton from "./AnimatedButton";
+import FeedbackButton from "./FeedbackButton";
+import AnimatedRoundedButton from "./AnimatedRoundedButton";
 
-export { TextBtn, RoundedBtn, RoundBtn, FloatingBtn, AnimatedButton };
+export {
+  TextBtn,
+  RoundedBtn,
+  RoundBtn,
+  FloatingBtn,
+  AnimatedButton,
+  FeedbackButton,
+  AnimatedRoundedButton,
+};