From 190e05d3a89b291331141e96cc91d069df5026e2 Mon Sep 17 00:00:00 2001
From: AadneM <aadne.code@outlook.com>
Date: Wed, 17 Apr 2024 14:09:37 +0200
Subject: [PATCH] Merged the work done on the frontend homepage
---
Frontend/src/Assets/ProfileIcon.svg | 17 ++++++++++++++++
Frontend/src/Assets/ShoppingCart.svg | 20 +++++++++++++++++++
Frontend/src/Navigation.jsx | 6 +++++-
Frontend/src/css/App.css | 29 +++++++++++++++++++++++++---
4 files changed, 68 insertions(+), 4 deletions(-)
create mode 100644 Frontend/src/Assets/ProfileIcon.svg
create mode 100644 Frontend/src/Assets/ShoppingCart.svg
diff --git a/Frontend/src/Assets/ProfileIcon.svg b/Frontend/src/Assets/ProfileIcon.svg
new file mode 100644
index 0000000..8d34a2a
--- /dev/null
+++ b/Frontend/src/Assets/ProfileIcon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M244 466 c-48 -48 -48 -104 0 -152 28 -28 42 -34 76 -34 34 0 48 6
+76 34 28 28 34 42 34 76 0 60 -50 110 -110 110 -34 0 -48 -6 -76 -34z m115 -1
+c16 -8 34 -28 41 -45 28 -67 -44 -138 -111 -110 -44 19 -66 68 -49 110 12 29
+50 59 78 60 7 0 26 -7 41 -15z"/>
+<path d="M225 211 c-39 -17 -105 -81 -105 -101 0 -20 21 -9 52 26 81 92 199
+96 287 8 24 -24 48 -44 52 -44 34 0 -37 81 -95 109 -53 26 -136 27 -191 2z"/>
+</g>
+</svg>
diff --git a/Frontend/src/Assets/ShoppingCart.svg b/Frontend/src/Assets/ShoppingCart.svg
new file mode 100644
index 0000000..2b1b1c3
--- /dev/null
+++ b/Frontend/src/Assets/ShoppingCart.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="800px" height="800px" viewBox="0 0 902.86 902.86"
+ xml:space="preserve">
+<g>
+ <g>
+ <path d="M671.504,577.829l110.485-432.609H902.86v-68H729.174L703.128,179.2L0,178.697l74.753,399.129h596.751V577.829z
+ M685.766,247.188l-67.077,262.64H131.199L81.928,246.756L685.766,247.188z"/>
+ <path d="M578.418,825.641c59.961,0,108.743-48.783,108.743-108.744s-48.782-108.742-108.743-108.742H168.717
+ c-59.961,0-108.744,48.781-108.744,108.742s48.782,108.744,108.744,108.744c59.962,0,108.743-48.783,108.743-108.744
+ c0-14.4-2.821-28.152-7.927-40.742h208.069c-5.107,12.59-7.928,26.342-7.928,40.742
+ C469.675,776.858,518.457,825.641,578.418,825.641z M209.46,716.897c0,22.467-18.277,40.744-40.743,40.744
+ c-22.466,0-40.744-18.277-40.744-40.744c0-22.465,18.277-40.742,40.744-40.742C191.183,676.155,209.46,694.432,209.46,716.897z
+ M619.162,716.897c0,22.467-18.277,40.744-40.743,40.744s-40.743-18.277-40.743-40.744c0-22.465,18.277-40.742,40.743-40.742
+ S619.162,694.432,619.162,716.897z"/>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Frontend/src/Navigation.jsx b/Frontend/src/Navigation.jsx
index d40393d..1f13dfd 100644
--- a/Frontend/src/Navigation.jsx
+++ b/Frontend/src/Navigation.jsx
@@ -1,4 +1,6 @@
import React from 'react'
+import ShoppingCart from "./Assets/ShoppingCart.svg"
+import ProfileIcon from "./Assets/ProfileIcon.svg"
function Navigation() {
@@ -7,7 +9,9 @@ function Navigation() {
<div className="navigation">
<div className="navTop">
- <h1> ElectroMart </h1>
+ <h1 className="headerTitle"> ElectroMart </h1>
+ <img src={ShoppingCart} className='ShopCartIcon' alt="Shopping Cart icon" />
+ <img src={ProfileIcon} className='ProfileIcon' alt="Profile Icon" />
</div>
<div className="navBot">
diff --git a/Frontend/src/css/App.css b/Frontend/src/css/App.css
index c9bf211..492424e 100644
--- a/Frontend/src/css/App.css
+++ b/Frontend/src/css/App.css
@@ -1,10 +1,17 @@
+/* ----------------------------------------------------------------------------------
+ body CSS
+*/
body
{
background-color: rgb(24, 22, 22);
color : rgb(218, 218, 218);
}
+.headerTitle {
+ color:#111111
+}
+
.product-grid
{
position: fixed;
@@ -14,14 +21,29 @@ body
margin: 0; /* This removes the default margin around the body */
}
+/* ----------------------------------------------------------------------------------
+ navigation bar css
+*/
.navigation
{
position: fixed;
top: 0;
- background-color: rgb(58, 58, 58);
+ background-color: rgb(202, 193, 189);
width : 100%;
}
+.ShopCartIcon {
+ width: 50px;
+ height: 50px;
+ padding-left: 100px;
+ }
+
+ .ProfileIcon {
+ width: 50px;
+ height: 50px;
+ padding-left: 10px;
+ }
+
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -57,7 +79,8 @@ body
display:flex;
flex-direction:row;
list-style: none; /* removing bullet points */
- border-style: solid;
+ border-bottom-style: solid;
+ border-bottom-color: black;
border-width: 1px;
padding: 16px;
}
@@ -66,7 +89,7 @@ body
.navigationBar a
{
text-decoration: none;
- color : rgb(218, 218, 218);
+ color : rgb(15, 14, 14);
padding: 16px;
}
--
GitLab