Merge branch 'develop' into feature/implementing-use-context

Author: MatheusCampos-450

src/components/Select/Select.tsx

@@ -0,0 +1,39 @@
+import React, { SelectHTMLAttributes } from 'react';
+import { StyledSelect } from './styles';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    title: string;
+    color?: string;
+    Size?: string;
+    styleWidth?: string;
+}
+
+const Select: React.FC<SelectProps> = ({
+    title,
+    id,
+    color,
+    Size,
+    styleWidth,
+    ...rest
+  }: SelectProps) => {
+    return (
+      <StyledSelect
+        SelectWidth={styleWidth || '23.75rem'}
+        Color={color || 'var(--black)'}
+        Size={Size || '1.5rem'}
+      >
+        <h3>{title}</h3>
+
+        <select name={title} id={id} {...rest} />
+
+      </StyledSelect>
+    );
+  };
+
+  Select.defaultProps = {
+    Size: '',
+    styleWidth: '23.75rem',
+    color: '',
+  };
+
+  export default Select;

src/components/Select/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+interface Props {
+    SelectWidth: string;
+    Color: string;
+    Size: string;
+  }
+
+export const StyledSelect = styled.div<Props>`
+  display: flex;
+  flex-direction: column;
+  
+  width: ${props => props.SelectWidth || '23.75rem'};
+
+  margin: 0;
+
+  select {
+    display: flex;
+    align-items: center;
+    padding-left: 0.625rem;
+    height: 4.063rem;
+    background-color: var(--soft-gray);
+
+    font-family: Roboto;
+    font-size: 1.3rem;
+    font-style: normal;
+    font-weight: bold;
+
+    outline: none;
+    border: 0;
+    border-radius: 1.25rem;
+
+    width: ${props => props.SelectWidth || '23.75rem'}
+  }
+  
+`;

src/pages/InviteUsers/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import Input from 'components/Input/Input';
+import Button from 'components/Button/Button';
+import Select from 'components/Select/Select';
+
+import StyleInviteUsers from './styles';
+
+function index() {
+    return (
+      <StyleInviteUsers>
+        <h1>Convidar Participante</h1>
+
+        <div className="EmailAndPermission">
+          <Input
+            title="E-mail"
+            color="black"
+            Size="large"
+            styleWidth="41.875rem"
+          />
+
+          <Select
+            title="Nível de permissão"
+            color="black"
+            styleWidth="41.875rem"
+          >
+            <option value="Admin">Administrador</option>
+            <option value="Manager">Gerente</option>
+            <option value="Normal">Comum</option>
+
+          </Select>
+
+          <Button
+            color="var(--black)"
+            colorText="white"
+            size="23.75rem"
+          >
+            Convidar
+
+          </Button>
+
+        </div>
+      </StyleInviteUsers>
+    );
+}
+
+export default index;

src/pages/InviteUsers/styles.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const StyleInviteUsers = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    margin-top: 4.375rem;
+
+    h1 {
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: 900;
+        font-size: 3.125rem;
+        color: #CECFD0;
+    }
+
+
+    .EmailAndPermission {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        margin-top: 13.25rem;
+
+        align-items: flex-end;
+
+       
+        Input {
+            margin-bottom: 2rem;  
+        }
+
+        Button {
+            margin-top: 4rem;
+            width: 14.063rem;
+        }
+    }
+  
+
+`;
+
+export default StyleInviteUsers;

src/routes.tsx

@@ -5,6 +5,7 @@ import { Switch, Route, BrowserRouter } from 'react-router-dom';
 import NewPassword from 'pages/NewPassword';
 import Main from './pages/Main';
 import Login from './pages/Login';
+import InviteUsers from './pages/InviteUsers';
 
 export default function Routes() {
   return (
@@ -14,6 +15,7 @@ export default function Routes() {
         <Route path="/recovery-password" exact component={RecoveryPassword} />
         <Route path="/new-password" exact component={NewPassword} />
         <Route path="/login" exact component={Login} />
+        <Route path="/invite-users" exact component={InviteUsers} />
       </Switch>
     </BrowserRouter>
   );