feat: mobile app package (#1075)

packages/mobile/src/Components/Button.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import styled, { css } from 'styled-components/native'
+
+type Props = {
+  onPress: () => void
+  label: string
+  primary?: boolean
+  fullWidth?: boolean
+  last?: boolean
+}
+
+const PrimaryButtonContainer = styled.TouchableOpacity.attrs({
+  activeOpacity: 0.84,
+})<{
+  fullWidth?: boolean
+  last?: boolean
+}>`
+  background-color: ${({ theme }) => theme.stylekitInfoColor};
+  padding: 12px 24px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: ${({ theme }) => theme.stylekitInfoColor};
+  margin-bottom: ${({ fullWidth, last }) => (fullWidth && !last ? '16px' : 0)};
+  ${({ fullWidth }) =>
+    !fullWidth &&
+    css`
+      align-self: center;
+    `};
+`
+
+const SecondaryButtonContainer = styled.TouchableHighlight.attrs(({ theme }) => ({
+  activeOpacity: 0.84,
+  underlayColor: theme.stylekitBorderColor,
+}))<{
+  fullWidth?: boolean
+  last?: boolean
+}>`
+  background-color: ${({ theme }) => theme.stylekitBackgroundColor};
+  padding: 12px 24px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: ${({ theme }) => theme.stylekitBorderColor};
+  margin-bottom: ${({ fullWidth, last }) => (fullWidth && !last ? '16px' : 0)};
+  ${({ fullWidth }) =>
+    !fullWidth &&
+    css`
+      align-self: center;
+    `};
+`
+
+const ButtonLabel = styled.Text<{ primary?: boolean }>`
+  text-align: center;
+  text-align-vertical: center;
+  font-weight: bold;
+  color: ${({ theme, primary }) => {
+    return primary ? theme.stylekitInfoContrastColor : theme.stylekitForegroundColor
+  }};
+  font-size: ${props => props.theme.mainTextFontSize}px;
+`
+
+export const Button: React.FC<Props> = ({ onPress, label, primary, fullWidth, last }: Props) => {
+  if (primary) {
+    return (
+      <PrimaryButtonContainer onPress={onPress} fullWidth={fullWidth} last={last}>
+        <ButtonLabel primary={primary}>{label}</ButtonLabel>
+      </PrimaryButtonContainer>
+    )
+  } else {
+    return (
+      <SecondaryButtonContainer onPress={onPress} fullWidth={fullWidth} last={last}>
+        <ButtonLabel primary={primary}>{label}</ButtonLabel>
+      </SecondaryButtonContainer>
+    )
+  }
+}