filter component

components/Filter/filter.jsx

@@ -23,7 +23,8 @@ const filter = () => {
           <button>
             <Image src={images.clear} alt="clear" width={20} height={20}/>
             CLEAR CHAT
-          </button>
+          </button>.
+
           <button onClick={() => setAddFriend(true)}>
             <Image src={images.user} alt="clear" width={20} height={20}/>
             ADD FRIEND

components/Navbar/navbar.jsx

@@ -11,23 +11,23 @@ import images from "../../assets";
 const Navbar = () => {
   const menuItems =[
     {
-      menu: "All users",
+      menu: "ALL USERS",
       link: "/alluser",
     },
     {
-      menu: "chat",
+      menu: "CHAT",
       link: "/",
     },
     {
-      menu: "settings",
+      menu: "SETTINGS",
       link: "/",
     },
     {
       menu: "FAQS",
       link: "/",
     },
     {
-      menu: "terms of use",
+      menu: "TERMS OF USE",
       link: "/",
     },
   ]

components/Navbar/navbar.module.css

@@ -2,6 +2,7 @@
     width:80%;
     margin: 3rem auto;
     position: relative;
+    color:#FFFFFF;
 }
 
 .NavBar_box{
@@ -25,6 +26,13 @@
     gap: 2rem;
     border-bottom: 2px solid transparent;
     transition: all .3s ease-in-out;
+    color:#FFFFFF;
+
+}
+.NavBar_box_right_menu_items_link{
+
+    color:#FFFFFF;
+    text-decoration: none;
 
 }
 
@@ -39,7 +47,7 @@
     justify-self: flex-end;
 
 }
-.NavBar_box_right_connect_button{
+.NavBar_box_right_connect button{
 
     background-color: rgb(0, 0, 0, 0.25);
     padding: 1rem;

components/UserCard/userCard.module.css

@@ -4,6 +4,7 @@
     text-align: center;
     padding: 1rem;
     position: relative;
+    color: #FFFFFF;
 }
 
 .UserCard_box{

pages/_app.js

@@ -1,6 +1,6 @@
 
 import React from 'react'
-
+import '../styles/globals.css'
 import { AppProvider } from '../context/AppContext';
 import { Navbar } from '../components/index';
 const MyApp = ({ Component, pageProps}) => (

pages/alluser.js

@@ -13,7 +13,7 @@ const alluser = () => {
         <div>
             <div className={Style.alluser_info}>
                 <h1>
-                    find your friends
+                    Find Your Friends :
                 </h1>
 
             </div>

pages/index.js

@@ -1,6 +1,8 @@
 import React, {useState, useEffect, useContext} from 'react';
 import { Filter,Friend } from '../components/index';
 import { AppContext } from '../context/AppContext';
+
+
 const chatApp = () => {
     const {}= useContext(AppContext);
   return (

styles/alluser.module.css

@@ -2,15 +2,18 @@
     width: 80%;
     margin: 4rem auto;
     font-size: 1.5rem;
+    color: #FFFFFF;
 
 }
 
 .alluser{
+    position: relative;
+    left:10rem;
     width: 80%;
     max-width: 2rem auto;
     display: grid;
     grid-template-columns: repeat(3,1fr);
-    gap: 3rem;
+    gap: 5rem;
 }
 
 

styles/globals.css

@@ -0,0 +1,4 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #292f3f
+  }