minor changes

urdadx · Jun 29, 2022 · 3a2d5a7 · 3a2d5a7 · vercel · Jun 29, 2022
1 parent 1f63e99
commit 3a2d5a7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon"  type="image/x-icon"  href="/public/favicon.png" />
+    <link rel="shortcut icon" type="image/jpg" href="/images/favicon.png"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 

diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
@@ -6,6 +6,7 @@ import { useState, useEffect } from "react";
 import { TailSpin } from "react-loader-spinner";
 import { Link } from "react-router-dom";
 import Meta from "../components/Meta";
+import { Button } from "../styles/ButtonStyled";
 
 const Home = () => {
 
@@ -25,7 +26,13 @@ const Home = () => {
         <HomeStyled>
             <Navbar />
             <div className="wrapper">
-
+                <div className="category">
+                    <Button border="none" background="#FF025E">Red</Button>
+                    <Button border="none" background="#FFD000">Yellow</Button>
+                    <Button border="none" background="#64F38C">Blue</Button>
+                    <Button border="none" background="#019DF7">Green</Button>
+                    <Button border="none" background="#161A1D">Black</Button>
+                </div>
                 <section className="main">
                     {
                     !loading && gradients.length !== 0 ? gradients.map((gradient) => {

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -101,7 +101,8 @@ const Navbar = () => {
                         <Description message="Add colors" />
                     </Link>
                     <Link className="bk-parent" to="#">
-                        <img alt="" src={!currentUser ? USER_PROFILE : currentUser.photoURL} className="user"></img>
+                        <img alt="" src={!currentUser ? USER_PROFILE : currentUser.photoURL} 
+                             className="user"></img>
                     </Link>
                 </div>
 
@@ -124,7 +125,7 @@ const Navbar = () => {
 
                          <img className="btn-img" alt="" src={GITHUB_LOGO}/>
                         <a rel="noreferrer" className="fork"
-                            href="https://github.com/WahabDev12" target="_blank" >Contribute</a>
+                            href="https://github.com/WahabDev12/gradients-ninja" target="_blank" >Contribute</a>
                     </Button>
                 </div>
 

diff --git a/src/styles/ButtonStyled.js b/src/styles/ButtonStyled.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 
 export const Button = styled.button`
-    border:1px solid rgb(124, 65, 255);
+    border: ${({ border }) => border || '1px solid rgb(124, 65, 255)'} ;
     outline:none;
     background:${({ background }) => background || 'rgb(124, 65, 255)'}; ;
     width:${({ width }) => width || '140px'};

diff --git a/src/styles/HomeStyled.js b/src/styles/HomeStyled.js
@@ -10,7 +10,7 @@ export const HomeStyled = styled.div`
 
    .main{
         width:340px;
-        margin:8rem auto;
+        margin:0.5rem auto;
         padding:20px;
         display: grid;
         grid-template-rows: 1fr 1fr 1fr;
@@ -20,21 +20,31 @@ export const HomeStyled = styled.div`
    }
 
    .saved{
-     width:500px;
-     margin-top:7rem;
-     margin-left:auto;
-     font-size:34px;
+    
      color:#24306d;
-   }
+     width:340px;
+     margin:3em auto;
+     padding:20px;
+     display: grid;
+     grid-template-rows: 1fr ;
+     grid-template-columns: 1fr ;
+     gap:25px;
+     margin-bottom: 0px;
+     font-size: 30px;
+}
 
-   .sort{
-         width:500px;
-        margin: 7rem auto;
-        display: flex;
-        gap:20px;
-    
+   .category{
+     width:340px;
+     margin:6em auto;
+     padding:20px;
+     display: grid;
+     grid-template-rows: 1fr ;
+     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+     gap:25px;
+     margin-bottom: 0px;
    }
 
+ 
    .loader{
         display: flex;
         width:calc(100vw - 25vw);