chore: ui fixes

Sphereon-Opensource · Aug 12, 2024 · 9660c06 · 9660c06
1 parent b53ec67
commit 9660c06
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/packages/ssi-react-native/src/components/buttons/PrimaryButton/index.tsx b/packages/ssi-react-native/src/components/buttons/PrimaryButton/index.tsx
@@ -1,4 +1,4 @@
-import React, {FC} from 'react'
+import React, {FC, ReactElement} from 'react'
 import {ColorValue, PressableProps, ViewStyle} from 'react-native'
 import {fontColors, gradientsColors, OpacityStyleEnum} from '@sphereon/ui-components.core'
 import {
@@ -16,7 +16,7 @@ export interface Props extends Omit<PressableProps, 'disabled'> {
   style?: ViewStyle
 }
 
-const PrimaryButton: FC<Props> = (props: Props): JSX.Element => {
+const PrimaryButton: FC<Props> = (props: Props): ReactElement => {
   const {
     captionColor = fontColors.light,
     backgroundColors = [gradientsColors['100'].secondaryColor, gradientsColors['100'].primaryColor],

diff --git a/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx b/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx
@@ -1,12 +1,12 @@
-import React, {FC} from 'react'
+import React, {FC, ReactElement} from 'react'
 import {ColorValue, PressableProps, ViewStyle} from 'react-native'
-import MaskedView from '@react-native-masked-view/masked-view'
 import {fontColors, gradientsColors, OpacityStyleEnum} from '@sphereon/ui-components.core'
 import {
   SSITouchableOpacityButtonFlexRowStyled as Button,
   SSITextH2SecondaryButtonStyled as ButtonCaption,
   SecondaryButtonLinearGradientStyled as LinearGradient,
   SecondaryButtonMaskContainerStyled as MaskContainer,
+  SecondaryButtonMaskedViewStyled as MaskedView
 } from '../../../styles'
 
 export interface Props extends Omit<PressableProps, 'disabled'> {
@@ -18,7 +18,7 @@ export interface Props extends Omit<PressableProps, 'disabled'> {
   style?: ViewStyle
 }
 
-const SecondaryButton: FC<Props> = (props: Props): JSX.Element => {
+const SecondaryButton: FC<Props> = (props: Props): ReactElement => {
   const {
     caption,
     captionColor = fontColors.secondaryButton,
@@ -41,8 +41,8 @@ const SecondaryButton: FC<Props> = (props: Props): JSX.Element => {
       style={{
         ...(disabled && {opacity: OpacityStyleEnum.DISABLED}),
       }}>
-      <MaskedView maskElement={<MaskContainer>{caption && <ButtonCaption>{caption}</ButtonCaption>}</MaskContainer>}>
-        <LinearGradient style={style} colors={borderColors}>
+      <MaskedView style={{...style}} maskElement={<MaskContainer style={{...style}}>{caption && <ButtonCaption>{caption}</ButtonCaption>}</MaskContainer>}>
+        <LinearGradient style={{...style}} colors={borderColors}>
           <ButtonCaption style={{color: captionColor}}>{caption}</ButtonCaption>
         </LinearGradient>
       </MaskedView>

diff --git a/packages/ssi-react-native/src/components/indicators/SSIActivityIndicator/index.tsx b/packages/ssi-react-native/src/components/indicators/SSIActivityIndicator/index.tsx
@@ -1,4 +1,4 @@
-import React, {FC} from 'react'
+import React, {FC, ReactElement} from 'react'
 import {ActivityIndicator, ColorValue, StyleProp, ViewStyle} from 'react-native'
 import {elementColors} from '@sphereon/ui-components.core'
 
@@ -8,7 +8,7 @@ type Props = {
   style?: StyleProp<ViewStyle>
 }
 
-const SSIActivityIndicator: FC<Props> = (props: Props): React.ReactElement => {
+const SSIActivityIndicator: FC<Props> = (props: Props): ReactElement => {
   const {color = elementColors.blue, style, size = 80} = props
   return <ActivityIndicator style={style} size={size} color={color} />
 }

diff --git a/packages/ssi-react-native/src/styles/components/buttons/index.ts b/packages/ssi-react-native/src/styles/components/buttons/index.ts
@@ -10,5 +10,6 @@ export const SSIRoundedCenteredLinearGradientStyled = styled(SSIRoundedLinearGra
   align-items: center;
   justify-content: center;
   padding: 9px;
-  width: 180px;
+  flex: 1;
+  height: 42px;
 `
diff --git a/packages/ssi-react-native/src/styles/components/components/SecondaryButton/index.ts b/packages/ssi-react-native/src/styles/components/components/SecondaryButton/index.ts
@@ -1,19 +1,27 @@
 import styled from 'styled-components/native'
+import MaskedView from '@react-native-masked-view/masked-view'
+import {SSIRoundedEdgesCss} from '@sphereon/ui-components.core'
 import {SSILinearGradientStyled} from '../../../gradients'
 
-// TODO extend rounded css
 export const SecondaryButtonMaskContainerStyled = styled.View`
+  ${SSIRoundedEdgesCss};
   background-color: transparent;
   flex: 1;
   border-width: 1px;
-  border-radius: 8px;
   align-items: center;
   justify-content: center;
+  height: 42px;
 `
 
 export const SecondaryButtonLinearGradientStyled = styled(SSILinearGradientStyled)`
   align-items: center;
   justify-content: center;
   padding: 9px;
-  width: 180px;
+  flex: 1;
+  height: 42px;
+`
+
+export const SecondaryButtonMaskedViewStyled = styled(MaskedView)`
+  flex: 1;
+  height: 42px;
 `