extract to styled files @ormiz

Autofleet · Jan 4, 2024 · 056ef46 · 056ef46
1 parent d5b9e4d
commit 056ef46
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 74 deletions.
diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx
@@ -1,25 +1,6 @@
 import React from 'react';
-import { Text, View } from 'react-native';
-import styled from 'styled-components';
+import { BoldTitle, SubTitle, TitleWithSubTitle } from './styled';
 
-const TitleWithSubTitle = styled(View)`
- display: flex;
- flex-direction: column;
- flex: 1 0 0;
-`;
-const BaseText = styled(Text)`
-color: #212229;
-font-family: Montserrat;
-font-size: 14px;
-font-style: normal;
-line-height: 20px;
-`;
-const SubTitle = styled(BaseText)`
-font-weight: 500;
-`;
-const BoldTitle = styled(BaseText)`
-font-weight: 700;
-`;
 interface BusinessAccountTextProps {
  title: string;
  subTitle: string;

diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts
@@ -0,0 +1,21 @@
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+
+export const TitleWithSubTitle = styled(View)`
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0;
+`;
+export const BaseText = styled(Text)`
+color: #212229;
+font-family: Montserrat;
+font-size: 14px;
+font-style: normal;
+line-height: 20px;
+`;
+export const SubTitle = styled(BaseText)`
+font-weight: 500;
+`;
+export const BoldTitle = styled(BaseText)`
+font-weight: 700;
+`;
diff --git a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from 'styled-components/native';
 import SvgIcon from '../SvgIcon';
 import i18n from '../../I18n';
+import {
+ Container, SELECTED_COLOR, Tab, TabInner, TextContainer, UNSELECTED_COLOR,
+} from './styled';
 
-const SELECTED_COLOR = '#212229';
-const UNSELECTED_COLOR = '#666975';
 interface ITabSwitchProps {
  onUnselectedClick: (tab) => void
  activeTabId: string;
@@ -14,57 +14,6 @@ interface ITabSwitchProps {
  Svg: any;
  }[];
 }
-interface TabStyled {
- isSelected: boolean;
-}
-const Container = styled.View`
- flex-direction: row;
- justify-content: center;
- align-items: center;
- align-self: stretch;
- border-color: rgba(125, 139, 172, 0.32)
- border-bottom-width: 1px;
- border-bottom-color: #7D8BAC52;
- margin-bottom: 16px;
- padding-left: 8px;
- padding-right: 8px;
-`;
-
-const Tab = styled.TouchableOpacity`
- height: 40px;
- justify-content: center;
- align-items: center;
- flex: 1 0 0;
- text-align: center; 
- ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`}
- margin-left: 8px;
- margin-right: 8px;
-`;
-const TabInner = styled.View`
-display: flex;
-flex-direction: row;
-height: 32px;
-padding: 4px;
-justify-content: center;
-align-items: center;
-color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
-font-family: Montserrat;
-font-size: 16px;
-font-style: normal;
-font-weight: 500;
-line-height: 24px;
-`;
-const TextContainer = styled.Text`
-color: #666975;
-color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
-font-family: Montserrat;
-font-size: 16px;
-font-style: normal;
-font-weight: 500;
-line-height: 24px;
-padding-left: 4px;
-`;
-
 
 const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => (
  <Container>

diff --git a/examples/client/Locomotion/src/Components/TabSwitch/styled.ts b/examples/client/Locomotion/src/Components/TabSwitch/styled.ts
@@ -0,0 +1,56 @@
+import styled from 'styled-components/native';
+
+interface TabStyled {
+ isSelected: boolean;
+}
+
+export const SELECTED_COLOR = '#212229';
+export const UNSELECTED_COLOR = '#666975';
+
+export const Container = styled.View`
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ align-self: stretch;
+ border-color: rgba(125, 139, 172, 0.32)
+ border-bottom-width: 1px;
+ border-bottom-color: #7D8BAC52;
+ margin-bottom: 16px;
+ padding-left: 8px;
+ padding-right: 8px;
+`;
+
+export const Tab = styled.TouchableOpacity`
+ height: 40px;
+ justify-content: center;
+ align-items: center;
+ flex: 1 0 0;
+ text-align: center; 
+ ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`}
+ margin-left: 8px;
+ margin-right: 8px;
+`;
+export const TabInner = styled.View`
+display: flex;
+flex-direction: row;
+height: 32px;
+padding: 4px;
+justify-content: center;
+align-items: center;
+color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
+font-family: Montserrat;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px;
+`;
+export const TextContainer = styled.Text`
+color: #666975;
+color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)};
+font-family: Montserrat;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px;
+padding-left: 4px;
+`;