Basic design

src/App.js

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet-async';
 import i18next from 'i18next';
 import history from './store/utils/history';
 import AppRoutes from './AppRoutes';
+import GlobalStyle from './components/Styles/globalStyles';
 
 const App = () => (
     <>
@@ -14,6 +15,7 @@ const App = () => (
           </title>
         </Helmet>
             <main className="l-page">
+                <GlobalStyle/>
                 <AppRoutes />
             </main>
       </Router>

src/AppRoutes.js

@@ -19,11 +19,13 @@ import ErrorPage from './pages/ErrorPages/ErrorPage';
 // import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';
 import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPageMUI';
 import PrivateRoute from './components/Router/PrivateRoute';
+import LoginT from './pages/LoginPage/LoginT';
 
 const AppRoutes = () => (
   <Switch>
     <Route exact path={BASE_PAGE} component={LoginPage} />
     <Route exact path={LOGIN_PAGE} component={LoginPage} />
+    <Route exact path="/l"><LoginT/></Route>
     <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
     <Route path={ERROR_PAGE} component={ErrorPage} />
     <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />

src/assets/images/svg/VisibilityOff.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.24741 12.2086L1.42675 15M7.02641 13.3083C7.51222 13.3992 8.00558 13.4448 8.5 13.4444C12.0193 13.4444 14.998 11.1554 16 8C15.7302 7.15074 15.3147 6.3538 14.7716 5.64411L7.02641 13.3083ZM10.1677 6.35033C9.72551 5.91271 9.12576 5.66686 8.50039 5.66686C7.87502 5.66686 7.27527 5.91271 6.83307 6.35033C6.39087 6.78796 6.14244 7.3815 6.14244 8.00039C6.14244 8.61928 6.39087 9.21282 6.83307 9.65044L10.1677 6.35033ZM10.1677 6.34956L6.83386 9.64889L10.1677 6.34956ZM10.1661 6.35111L12.7518 3.79222L10.1661 6.35111ZM6.83228 9.65044L4.24662 12.2093L6.83228 9.65044ZM15.5732 1L12.7518 3.79222L15.5732 1ZM12.7518 3.79222C11.4846 2.983 10.0081 2.55354 8.5 2.55556C4.98067 2.55556 2.00204 4.84456 1 8C1.55325 9.7348 2.702 11.2236 4.24741 12.2086L12.7518 3.79222Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/VisibilityOn.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9999 7.99994C13.9999 8.79557 13.6838 9.55862 13.1212 10.1212C12.5586 10.6838 11.7956 10.9999 10.9999 10.9999C10.2043 10.9999 9.44126 10.6838 8.87866 10.1212C8.31606 9.55862 8 8.79557 8 7.99994C8 7.20431 8.31606 6.44126 8.87866 5.87866C9.44126 5.31606 10.2043 5 10.9999 5C11.7956 5 12.5586 5.31606 13.1212 5.87866C13.6838 6.44126 13.9999 7.20431 13.9999 7.99994V7.99994Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.45898 7.99986C2.73296 3.94294 6.52388 1 11.0008 1C15.4787 1 19.2686 3.94294 20.5426 7.99986C19.2686 12.0568 15.4787 14.9997 11.0008 14.9997C6.52388 14.9997 2.73296 12.0568 1.45898 7.99986Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/styles/_base.scss

@@ -3,6 +3,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-anchor: none;
+  background-color: #F1F1F1;
 }
 
 * {

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -27,4 +27,9 @@ PrimaryButton.propTypes = {
   textcolor: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,
+  font: PropTypes.string
 };
+
+PrimaryButton.defaultProps = {
+  font: "Open Sans"
+}

src/components/Buttons/PrimaryButton/PrimaryButton.styled.js

@@ -11,10 +11,11 @@ export const PrimaryButtonStyled = styled(Button)`
     props.variant === "outlined" ? props.buttoncolor : "transparent"};
   color: ${(props) => props.textcolor};
   box-shadow: 0 0 0 0;
-  font-size: 10px;
+  font-size: 12px;
   letter-spacing: 1px;
   font-weight: 100;
   width: ${(props) => props.width};
+  font-family: ${(props) => props.font};
 
   height: ${(props) => props.height};
   &:hover {

src/components/Link/Link.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import { LinkStyled } from './Link.styled';
+
+const Link = props => {
+  return (
+    <LinkStyled {...props} href={props.href}>{props.children}</LinkStyled>
+  )
+}
+
+Link.propTypes = {
+    href: PropTypes.string,
+    children: PropTypes.node,
+    font: PropTypes.string,
+    align: PropTypes.oneOf(["left", "right", "center"])
+}
+Link.defaultProps = {
+    font: "Poppins",
+    align: "left"
+}
+
+export default Link

src/components/Link/Link.styled.js

@@ -0,0 +1,17 @@
+import { Link } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+
+export const LinkStyled = styled(Link)`
+  color: ${PRIMARY_PURPLE_COLOR};
+  font-family: ${(props) => props.font};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${props => props.fontsize ? props.fontsize : "14px"};
+  line-height: ${props => props.lineheight ? props.lineheight : "14px"};
+  text-decoration-line: underline;
+  display: block;
+  text-align: ${props => props.align === "right" ? "right" : (props.align === "center" ? "center" : "left")};
+  /* ${props => props.align === "right" && "display: block; text-align: right;"}
+  ${props => props.align === "center" && "display: block; text-align: center;"} */
+`;

src/components/Styles/globalStyles.js

@@ -0,0 +1,21 @@
+import { createGlobalStyle } from 'styled-components';
+import OpenSans from "./fonts/OpenSans-Regular.ttf"
+import Poppins from "./fonts/Poppins-Regular.ttf"
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Open Sans';
+    src: url(${OpenSans}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url(${Poppins}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+`;
+
+export default GlobalStyle;

src/components/TextFields/TextField/TextField.js

@@ -17,7 +17,6 @@ export const TextField = (props) => {
   return (
     <ComponentContainer style={props.containerStyle} className={props.className}>
       <TextFieldStyled
-        
         {...props}
         sx={props.style}
         label={props.showAnimation ? props.placeholder : ""}
@@ -55,13 +54,17 @@ TextField.propTypes = {
   autoFocus: PropTypes.bool,
   fullWidth: PropTypes.bool,
   type: PropTypes.string,
+  textSize: PropTypes.string,
+  font: PropTypes.string,
   InputProps: PropTypes.shape({
     startAdornment: PropTypes.node,
     endAdornment: PropTypes.node,
+    style: PropTypes.any,
   }),
 };
 
 TextField.defaultProps = {
   italicPlaceholder: false,
   showAnimation: false,
+  font: "Open Sans"
 };

src/components/TextFields/TextField/TextField.styled.js

@@ -1,19 +1,31 @@
 import { Box, TextField } from "@mui/material";
 import styled from "styled-components";
-
-const backgroundColor = `rgb(241, 241, 241)`;
+import { PRIMARY_BACKGROUND_COLOR } from "../../../constants/stylesConstants";
 
 export const ComponentContainer = styled(Box)`
   width: 100%;
+  height: 48px;
+  box-sizing: border-box;
+  margin: 16px 0;
   padding-left: 0;
 `;
 
 export const TextFieldStyled = styled(TextField)`
-  background-color: ${backgroundColor};
+  background-color: ${PRIMARY_BACKGROUND_COLOR};
   width: ${(props) => props.width};
   font-style: ${(props) => (props.italic === true ? "italic" : "normal")};
   padding-left: 0;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  box-sizing: border-box;
   & div {
     padding-left: 2px;
   }
+  & div input {
+    height: 48px;
+    box-sizing: border-box;
+    font-size: ${props => props.textsize ? props.textsize : "16px"} !important;
+    font-family: ${props => props.font ? props.font : ""}
+  }
 `;

src/constants/stylesConstants.js

@@ -1,3 +1,4 @@
-export const PRIMARY_PURPLE_COLOR = `rgb(90, 57, 131)`;
+export const PRIMARY_PURPLE_COLOR = `rgb(90, 57, 132)`;
 export const PRIMARY_YELLOW_COLOR = `rgb(247, 178, 38)`;
-export const PRIMARY_PURPLE_DISABLED = `rgb(75, 92, 100)`;
+export const PRIMARY_PURPLE_DISABLED = `rgb(75, 92, 100)`;
+export const PRIMARY_BACKGROUND_COLOR = '#F1F1F1';

src/i18n/index.js

@@ -3,13 +3,17 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 import enTranslations from './resources/en';
+import rsTranslations from './resources/rs'
 
 i18n.use(initReactI18next).init({
-  lng: 'en',
-  fallbackLng: 'en',
+  lng: 'rs',
+  fallbackLng: 'rs',
   debug: false,
-  supportedLngs: ['en'],
+  supportedLngs: ['rs', 'en'],
   resources: {
+    rs: {
+      translation: rsTranslations,
+    },
     en: {
       translation: enTranslations,
     },

src/i18n/resources/rs.js

@@ -0,0 +1,81 @@
+export default {
+    app: {
+        title: 'Trampa'
+      },
+      refresh: {
+        title: 'Jel si aktivan?',
+        cta:
+          "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
+      },
+      common: {
+        close: 'Zatvori',
+        trademark: 'TM',
+        search: 'Pretraga',
+        error: 'Greška',
+        continue: 'Nastavi',
+        labelUsername: 'Username',
+        labelEmail: 'Email',
+        labelPassword: 'Lozinka',
+        next: 'Sledeće',
+        nextPage: 'Sledeća strana',
+        previousPage: 'Prethodna strana',
+        back: 'Nazad',
+        goBack: 'Idi nazad',
+        ok: 'Ok',
+        done: 'Gotovo',
+        confirm: 'Potvrdi',
+        printDownload: 'Print/Download',
+        cancel: 'Obustavi',
+        remove: 'Izbriši',
+        invite: 'Pozovi',
+        save: 'Sačuvaj',
+        complete: 'Završi',
+        download: 'Download',
+        yes: 'Da',
+        no: 'Ne',
+        to: 'do',
+        select: 'Izaberi...',
+        none: 'Ni jedan',
+        date: {
+          range: '{{start}} do {{end}}',
+        },
+      },
+    login: {
+        welcome: 'React template',
+        welcomeText: 'Trampa sa kolegama na dohvat ruke',
+        dontHaveAccount: "Nemate nalog? ",
+        emailFormat: 'Nevalidan format email adrese!',
+        emailRequired: 'Email adresa je obavezna!',
+        noUsers: 'Ne postoji korisnik sa zadatom email adresom.',
+        passwordStrength: 'Your password is {{strength}}.',
+        passwordLength: 'Lozinka mora imati izmedju 8 i 50 karaktera!',
+        signUpRecommendation: 'Registrujte se.',
+        email: 'Unesite email adresu kako biste se prijavili',
+        logInTitle: 'Uloguj se',
+        logIn: 'Uloguj se',
+        signUp: 'Registrujte se.',
+        usernameRequired: 'Username je obavezan!',
+        passwordRequired: 'Lozinka je obavezna!',
+        forgotYourPassword: 'Zaboravili ste lozinku?',
+        forgotPasswordEmail:'Email',
+        useDifferentEmail: 'Iskoristite drugačiju lozinku.',
+      },
+      password: {
+        weak: 'slaba',
+        average: 'srednja',
+        good: 'dobra',
+        strong: 'jaka',
+      },
+      forgotPassword: {
+        title: 'Zaboravili ste lozinku',
+        label: 'Pošalji email',
+        emailRequired: 'Email je obavezan!',
+        emailFormat: 'Nevalidan format email adrese!',
+        forgotPassword: {
+          title: 'Zaboravili ste lozinku',
+          subtitle:
+            'Odgovorite na tajno pitanje kako biste povratili svoj nalog: ',
+          label: 'Obnovite lozinku',
+        },
+      },
+}

src/pages/LoginPage/Login.styled.js

@@ -0,0 +1,41 @@
+import { Box, Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Container)`
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const LoginTitle = styled(Typography)`
+  font-family: "Open Sans";
+  width: 328px;
+  height: 33px;
+  text-align: center;
+  flex: 1;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 33px;
+  color: ${PRIMARY_PURPLE_COLOR};
+  margin-top: 36px;
+`;
+export const LoginDescription = styled(Typography)`
+  font-family: "Open Sans";
+  margin-top: 9px;
+  width: 221px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #818181;
+  margin-bottom: 20px;
+`;
+export const LoginFormContainer = styled(Box)`
+  width: 335px;
+  height: 216px;
+`;

src/pages/LoginPage/LoginPageMUI.js

@@ -19,15 +19,11 @@ import {
   Container,
   Grid,
   InputAdornment,
-  Link,
   Typography,
 } from "@mui/material";
-import {
-  LocationOn,
-  LocationOnOutlined,
-  Visibility,
-  VisibilityOff,
-} from "@mui/icons-material";
+import { LocationOn, LocationOnOutlined } from "@mui/icons-material";
+import { ReactComponent as VisibilityOn } from "../../assets/images/svg/VisibilityOn.svg";
+import { ReactComponent as VisibilityOff } from "../../assets/images/svg/VisibilityOff.svg";
 import Backdrop from "../../components/MUI/BackdropComponent";
 import ErrorMessage from "../../components/MUI/ErrorMessageComponent";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
@@ -41,7 +37,15 @@ import PrimaryButtonWithIcon from "../../components/Buttons/PrimaryButtonWithIco
 import TextFieldWithIcon from "../../components/TextFields/TextFieldWithIcon/TextFieldWithIcon";
 import DropdownList from "../../components/Dropdown/DropdownList/DropdownList";
 import DropdownItem from "../../components/Dropdown/DropdownItem/DropdownItem";
+import Link from "../../components/Link/Link";
 import { CheckBox } from "../../components/CheckBox/CheckBox";
+import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
+import {
+  ComponentContainer,
+  LoginTitle,
+  LoginDescription,
+  LoginFormContainer,
+} from "./Login.styled";
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
@@ -104,27 +108,19 @@ const LoginPage = ({ history }) => {
 
   return (
     <Container component="main" maxWidth="md">
-      <Box
-        sx={{
-          marginTop: 32,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <Typography component="h1" variant="h5">
+      <ComponentContainer>
+        <Logo />
+        <LoginTitle component="h1" variant="h5">
           {t("login.logInTitle")}
-        </Typography>
-        {error && <ErrorMessage error={error} />}
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ position: "relative", mt: 1, p: 1 }}
-        >
+        </LoginTitle>
+        <LoginDescription component="h1" variant="h6">
+          {t("login.welcomeText")}
+        </LoginDescription>
+        <LoginFormContainer component="form" onSubmit={formik.handleSubmit}>
           <Backdrop position="absolute" isLoading={isLoading} />
           <TextField
             name="username"
-            placeholder={t("common.labelUsername")}
+            placeholder={t("common.labelEmail")}
             margin="normal"
             value={formik.values.username}
             onChange={formik.handleChange}
@@ -149,7 +145,7 @@ const LoginPage = ({ history }) => {
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
                 >
-                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                  {showPassword ? <VisibilityOn /> : <VisibilityOff />}
                 </IconButton>
               ),
             }}
@@ -186,36 +182,28 @@ const LoginPage = ({ history }) => {
             </DropdownItem>
           </DropdownList> */}
 
-          <PrimaryButtonWithIcon
-            icon={<Visibility />}
-            sx={{ mt: 3, mb: 2 }}
-            buttonProps={{
-              type: "submit",
-              variant: "contained",
-              height: "40px",
-              fullWidth: true,
-              buttoncolor: PRIMARY_PURPLE_COLOR,
-              textcolor: "white",
-            }}
+          <Link to={FORGOT_PASSWORD_PAGE} component={NavLink} underline="hover" align="right">
+            {t("login.forgotYourPassword")}
+          </Link>
+
+          <PrimaryButton
+            type="submit"
+            variant="contained"
+            height="48px"
+            fullWidth={true}
+            buttoncolor={PRIMARY_PURPLE_COLOR}
+            textcolor="white"
+            style={{marginTop: "16px"}}
           >
-            {t("login.logIn")}
-          </PrimaryButtonWithIcon>
+             {t("login.logIn")}
+          </PrimaryButton>
           <Grid container>
             <Grid
               item
               xs={12}
               md={6}
               sx={{ textAlign: { xs: "center", md: "left" } }}
-            >
-              <Link
-                to={FORGOT_PASSWORD_PAGE}
-                component={NavLink}
-                variant="body2"
-                underline="hover"
-              >
-                {t("login.forgotYourPassword")}
-              </Link>
-            </Grid>
+            ></Grid>
             <Grid
               item
               xs={12}
@@ -227,13 +215,16 @@ const LoginPage = ({ history }) => {
                 component={NavLink}
                 variant="body2"
                 underline="hover"
+                align="center"
+                style={{marginTop: "36px"}}
               >
                 {t("login.dontHaveAccount")}
+                {t("login.signUp")}
               </Link>
             </Grid>
           </Grid>
-        </Box>
-      </Box>
+        </LoginFormContainer>
+      </ComponentContainer>
     </Container>
   );
 };

src/pages/LoginPage/LoginT.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
+
+const LoginT = () => {
+  return (
+    <Logo />
+  )
+}
+
+LoginT.propTypes = {
+    children: PropTypes.node,
+}
+
+export default LoginT