Merge pull request #27 from DarkFalc0n/main

Added logo and favicon

frontend/components/NavBar/Logo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Logo(){
+
+return(
+    <div className="logo-wrapper">
+        <svg class="logo" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.4 53.31"><path d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z" transform="translate(-28.21 -17.61)" fill="#fff"/><path d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z" transform="translate(-28.21 -17.61)" fill="#fff"/></svg>
+        <p className="logo-text">
+            URL MINIFY
+        </p>
+    </div>                
+)
+}

frontend/components/NavBar/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography} from "@mui/material";
 import MenuIcon from '@mui/icons-material/Menu';
 import NavbarStyle from "./Navbar.style";
+import Logo from './Logo';
 
 const pages = ['Products', 'Pricing', 'Blog'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
@@ -28,17 +29,10 @@ function Index(props) {
     return (
         <NavbarStyle position="fixed">
             <Container maxWidth="xl">
-                <Toolbar disableGutters>
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="div"
-                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
-                    >
-                        LOGO
-                    </Typography>
-
+                <Toolbar disableGutters="false">
+                    <Logo/>
                     <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+                        
                         <IconButton
                             size="large"
                             aria-label="account of current user"
@@ -74,14 +68,7 @@ function Index(props) {
                             ))}
                         </Menu>
                     </Box>
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="div"
-                        sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
-                    >
-                        LOGO
-                    </Typography>
+                    
                     <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                         {pages.map((page) => (
                             <Button

frontend/pages/_app.js

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import '../styles/logostyles.css'
 
 function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />

frontend/styles/globals.css

@@ -23,3 +23,5 @@ section{
    width:100vw;
    min-height:100vh;
 }
+
+

frontend/styles/logostyles.css

@@ -0,0 +1,21 @@
+/* This StyleSheet was prepared for the logo in the NavBar. 
+Please put any other style definitions inside globals.css or create a new stylesheet under styles folder */
+
+.logo{
+   width: 3rem;
+   position: relative;
+   top: 0.2rem;
+}
+
+
+.logo-text{
+   font-family: sans-serif;
+   font-weight: 700;
+   font-size: 2rem;
+   margin-left: 1rem;
+   margin-right: 3.5rem;
+   display: inline-block;
+   position: relative;
+   top: -0.7rem;
+}
+