feat: JoinGroupScreen

src/assets/styles/theme.ts

@@ -0,0 +1,13 @@
+import { DefaultTheme } from 'styled-components';
+
+export const theme: DefaultTheme = {
+  colors: {
+    border_grey: '#D9D9D9',
+    button_red: '#F13D42',
+    light_grey: '#BBBBBB',
+    underline_grey: '#797979',
+    black_100: '#000000',
+  },
+};
+
+

src/main.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { theme } from './assets/styles/theme';
+import { ThemeProvider } from 'styled-components';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );

src/screens/JoinGroupScreen/JoinGroupScreen.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Wrapper, Content, GroupCodeInput, GroupCodeField, JoinButton, CreateGroupButton, BackButton, SvgContainer, Logo } from './JoinGroupScreenStyles';
+import { Wrapper, Content, GroupCodeInput, GroupCodeField, JoinButton, CreateGroupButton, BackButton, SvgContainer, Logo, StyledTypography } from './JoinGroupScreenStyles';
 
 const JoinGroup = () => {
   return (
@@ -25,11 +25,11 @@ const JoinGroup = () => {
           <GroupCodeField inputProps={{ maxLength: 1 }} />
           <GroupCodeField inputProps={{ maxLength: 1 }} />
         </GroupCodeInput>
-        <Typography variant="body1" display="block" sx={{ color: '#BBBBBB', marginLeft: 'auto', marginRight: '0' }} gutterBottom>
+        <StyledTypography variant="body1"  gutterBottom>
           Czym jest kod grupy?
-        </Typography>
+        </StyledTypography>
         <JoinButton variant="contained">Dołącz do grupy</JoinButton>
-        <Typography variant="body1" sx={{ color: "#BBBBBB" }}>lub</Typography>
+        <StyledTypography variant="body1" >lub</StyledTypography>
         <CreateGroupButton variant="outlined">Utwórz grupę</CreateGroupButton>
       </Content>
     </Wrapper>

src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts

@@ -1,5 +1,7 @@
-import { Box, Button, IconButton, Input } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, Button, IconButton, Input, Typography } from '@mui/material';
+import {styled }from 'styled-components';
+
+
 
 export const Wrapper = styled(Box)`
   display: flex;
@@ -50,7 +52,7 @@ export const GroupCodeField = styled(Input)`
   &::after {
     border-bottom: none !important;
   }
-  border-bottom: 2px solid #000;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.underline_grey};
   @media (max-width: 600px) {
     width: 40px;
     height: 40px;
@@ -62,10 +64,10 @@ export const GroupCodeField = styled(Input)`
 `;
 
 export const JoinButton = styled(Button)`
-  background-color: #ff3b30;
+  background-color: ${({ theme }) => theme.colors.button_red} !important;
   color: white;
   &:hover {
-    background-color: #e6392e;
+    background-color: ${({ theme }) => theme.colors.button_red} !important;
   }
   margin: 55px 0 15px;
   padding: 16px 0;
@@ -80,9 +82,10 @@ export const JoinButton = styled(Button)`
 `;
 
 export const CreateGroupButton = styled(Button)`
-  border: 1px solid #c4c4c4;
+  border: 1px solid ${({ theme }) => theme.colors.border_grey} !important;
   padding: 16px 0;
   font-size: 18px;
+  color: ${({ theme }) => theme.colors.black_100} !important;
   border-radius: 8px;
   width: 100%;
   color: black;
@@ -123,3 +126,9 @@ export const Logo = styled('img')`
     margin-bottom: 8px;
   }
 `;
+
+export const StyledTypography = styled(Typography)`
+  color: ${({ theme }) => theme.colors.light_grey};
+  margin-left: auto;
+  margin-right: 0;
+`;

src/types/style.d.ts

@@ -0,0 +1,13 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: {
+      border_grey: string;
+      button_red: string;
+      light_grey: string;
+      underline_grey: string;
+      black_100: string;
+    };
+  }
+}