feat(client): replace elements jsx with just styled-components

packages/client/src/containers/Login/Login.styled.ts

@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 
+import { Card } from '../../elements';
+import { EmailIcon } from '../../icons';
+
 export const Container = styled.div`
   width: 100%;
   display: flex;
@@ -17,10 +20,11 @@ export const LinksContainer = styled.div`
   height: 50px;
 `;
 
-export const CardContainer = styled.div`
+export const StyledCard = styled(Card)`
   max-width: 500px;
   width: 100%;
   margin: 15px;
+  align-items: center;
 `;
 
 export const ActionsContainer = styled.div`
@@ -46,6 +50,6 @@ export const LoginButtonContainer = styled.div(
 `,
 );
 
-export const IconWrapper = styled.div`
+export const StyledEmailIcon = styled(EmailIcon)`
   color: ${({ theme }) => theme.palette.colors.orange};
 `;

packages/client/src/containers/Login/index.tsx

@@ -6,21 +6,19 @@ import {
   AnimatedLogo,
   BackgroundLogo,
   Button,
-  Card,
   Checkbox,
   Form,
   Link,
   TextField,
 } from '../../elements';
 import { useAuth, useSnackbar } from '../../hooks';
-import { EmailIcon } from '../../icons';
 import {
   ActionsContainer,
-  CardContainer,
   Container,
-  IconWrapper,
   LinksContainer,
   LoginButtonContainer,
+  StyledCard,
+  StyledEmailIcon,
 } from './Login.styled';
 import { LoginInputs } from './Login.types';
 
@@ -62,57 +60,51 @@ const Login = () => {
     }
   };
 
-  const emailIcon = (
-    <IconWrapper>
-      <EmailIcon />
-    </IconWrapper>
-  );
+  console.log('test2');
 
   return (
     <Container>
       <BackgroundLogo />
-      <CardContainer>
-        <Card>
-          <AnimatedLogo />
-          <Form
-            onSubmit={handleSubmit(onSubmit)}
-            errors={errors}
-            register={register}
-            loading={loading}
-          >
-            <TextField
-              name="email"
-              placeholder="Enter your email"
-              required
-              autoFocus
-              startAdornment={emailIcon}
-            />
-            <TextField
-              required
-              name="password"
-              placeholder="Enter your password"
-              type="password"
-              autoComplete="current-password"
-            />
-            <ActionsContainer>
-              <Checkbox name="keepMeLoggedIn" />
-              <LoginButtonContainer>
-                <Button type="submit" fullWidth disabled={loading} withArrow>
-                  Log in
-                </Button>
-              </LoginButtonContainer>
-            </ActionsContainer>
-            <LinksContainer>
-              <Link to="/" colorVariant="grey">
-                Forgot password?
-              </Link>
-              <Link to="/registration" colorVariant="colour">
-                I don’t have an account
-              </Link>
-            </LinksContainer>
-          </Form>
-        </Card>
-      </CardContainer>
+      <StyledCard>
+        <AnimatedLogo />
+        <Form
+          onSubmit={handleSubmit(onSubmit)}
+          errors={errors}
+          register={register}
+          loading={loading}
+        >
+          <TextField
+            name="email"
+            placeholder="Enter your email"
+            required
+            autoFocus
+            startAdornment={<StyledEmailIcon />}
+          />
+          <TextField
+            required
+            name="password"
+            placeholder="Enter your password"
+            type="password"
+            autoComplete="current-password"
+          />
+          <ActionsContainer>
+            <Checkbox name="keepMeLoggedIn" />
+            <LoginButtonContainer>
+              <Button type="submit" fullWidth disabled={loading} withArrow>
+                Log in
+              </Button>
+            </LoginButtonContainer>
+          </ActionsContainer>
+          <LinksContainer>
+            <Link to="/" colorVariant="grey">
+              Forgot password?
+            </Link>
+            <Link to="/registration" colorVariant="colour">
+              I don’t have an account
+            </Link>
+          </LinksContainer>
+        </Form>
+      </StyledCard>
     </Container>
   );
 };

packages/client/src/elements/AnimatedLogo/index.tsx

@@ -1,8 +1,7 @@
 import anime, { AnimeInstance } from 'animejs';
 import React, { useEffect, useRef } from 'react';
 
-import { SmartGateLogo } from '../../icons';
-import { Wrapper } from './AnimatedLogo.styled';
+import { SmartGateLogoIcon } from '../../icons';
 
 const AnimatedLogo = () => {
   const logoRef = useRef<SVGPathElement>(null);
@@ -17,11 +16,7 @@ const AnimatedLogo = () => {
     });
   }, []);
 
-  return (
-    <Wrapper data-testid="animatedLogo">
-      <SmartGateLogo ref={logoRef} />
-    </Wrapper>
-  );
+  return <SmartGateLogoIcon data-testid="animatedLogo" ref={logoRef} />;
 };
 
 AnimatedLogo.displayName = 'AnimatedLogo';

packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts → packages/client/src/elements/BackgroundLogo/index.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const BackgroundLogoWrapper = styled.div(
+import { SmartGateBackgroundLogoIcon } from '../../icons';
+
+const BackgroundLogo = styled(SmartGateBackgroundLogoIcon)(
   ({ theme: { breakpoints, up, palette } }) => `
   display: none;
   ${up(breakpoints.lg)} {
@@ -17,3 +19,5 @@ export const BackgroundLogoWrapper = styled.div(
   }
   `,
 );
+
+export default BackgroundLogo;

packages/client/src/elements/Card/Card.styled.ts → packages/client/src/elements/Card/index.ts

@@ -2,17 +2,16 @@ import styled from 'styled-components';
 
 import { CardProps } from './Card.types';
 
-export const Wrapper = styled.div<CardProps>(
-  ({ minWidth, theme: { sizes, palette, breakpoints, down } }) => `
-  display: flex;
-  flex-direction: column;
+const Card = styled.div<CardProps>(
+  ({ theme: { sizes, palette, breakpoints, down } }) => `
   background: ${palette.background.paper};
   box-shadow: ${palette.boxShadow};
   border-radius: ${sizes.borderRadius};
   padding: 50px;
-  min-width: ${minWidth};
   ${down(breakpoints.sm)} {
     padding: 40px 20px
   }
 `,
 );
+
+export default Card;

packages/client/src/elements/Form/index.tsx

@@ -7,7 +7,7 @@ const formInputs: Array<ReactNode> = [Checkbox, TextField];
 const isFormInput = (child: ReactElement) => formInputs.includes(child.type);
 
 const Form = ({ children, errors, register, loading, onSubmit, ...rest }: FormProps) => (
-  <form onSubmit={onSubmit} noValidate {...rest}>
+  <form onSubmit={onSubmit} style={{ width: '100%' }} noValidate {...rest}>
     {Children.map(children, (child) => {
       if (isValidElement(child)) {
         if (isFormInput(child)) {

packages/client/src/elements/IconButton/IconButton.stories.tsx

@@ -3,14 +3,13 @@ import React from 'react';
 
 import LockIcon from '../../icons/LockIcon';
 import IconButton from '.';
-import { IconButtonProps } from './IconButton.types';
 
 export default {
   title: 'Elements/IconButton',
   component: IconButton,
 } as Meta;
 
-const Template: Story<IconButtonProps> = (args) => <IconButton {...args} />;
+const Template: Story = (args) => <IconButton {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -19,5 +18,4 @@ Default.args = {
       <LockIcon />
     </>
   ),
-  color: 'primary',
 };

packages/client/src/elements/IconButton/IconButton.styled.ts → packages/client/src/elements/IconButton/index.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { getCssColor } from '../../utils';
 
-export const StyledIconButton = styled.button(
+const IconButton = styled.button(
   ({ color, theme }) => `
   display: flex;
   justify-content: center;
@@ -32,3 +32,5 @@ export const StyledIconButton = styled.button(
   }
 `,
 );
+
+export default IconButton;

packages/client/src/icons/SmartGateBackgroundLogo.tsx → packages/client/src/icons/SmartGateBackgroundLogoIcon.tsx

@@ -1,6 +1,9 @@
 import React, { forwardRef, memo, Ref, SVGProps } from 'react';
 
-const SmartGateBackgroundLogo = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+const SmartGateBackgroundLogoIcon = (
+  props: SVGProps<SVGSVGElement>,
+  svgRef?: Ref<SVGSVGElement>,
+) => (
   <svg
     width="100%"
     height="100%"
@@ -18,4 +21,4 @@ const SmartGateBackgroundLogo = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SV
   </svg>
 );
 
-export default memo(forwardRef(SmartGateBackgroundLogo));
+export default memo(forwardRef(SmartGateBackgroundLogoIcon));

packages/client/src/icons/SmartGateLogo.tsx → packages/client/src/icons/SmartGateLogoIcon.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, memo, Ref, SVGProps } from 'react';
 
-const SmartGateLogo = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGPathElement>) => (
+const SmartGateLogoIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGPathElement>) => (
   <svg
     width={174}
     height={172}
@@ -31,4 +31,4 @@ const SmartGateLogo = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGPathEleme
   </svg>
 );
 
-export default memo(forwardRef(SmartGateLogo));
+export default memo(forwardRef(SmartGateLogoIcon));

packages/client/src/icons/index.ts

@@ -1,7 +1,7 @@
 export { default as ArrowIcon } from './ArrowIcon';
 export { default as EmailIcon } from './EmailIcon';
 export { default as LockIcon } from './LockIcon';
-export { default as SmartGateBackgroundLogo } from './SmartGateBackgroundLogo';
-export { default as SmartGateLogo } from './SmartGateLogo';
+export { default as SmartGateBackgroundLogoIcon } from './SmartGateBackgroundLogoIcon';
+export { default as SmartGateLogoIcon } from './SmartGateLogoIcon';
 export { default as TickIcon } from './TickIcon';
 export { default as UserIcon } from './UserIcon';