Skip to content

Stack b wall #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ccarloloo wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Stack b wall #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
946c725
Add files via upload
Ccarloloo Jul 11, 2023
ac34712
Add files via upload
Ccarloloo Jul 20, 2023
62bba14
Add files via upload
Ccarloloo Jul 20, 2023
b20e483
Add files via upload
Ccarloloo Jul 20, 2023
956c1f7
Add files via upload
Ccarloloo Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added client/public/icon6.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 9 additions & 3 deletions client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/icon6.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon6.jpg" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand All @@ -24,7 +24,11 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>

<link rel="stylesheet" href="style.css">


<title>Stack Bwall</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand All @@ -39,5 +43,7 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->


</body>
</html>
12 changes: 6 additions & 6 deletions client/src/components/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import React from "react";
import Logo from "../components/assets/stackwall.png";
import "flowbite";
import Events from "./columns/Events";
import Leaderboard from "./columns/Leaderboard";
import Feeds from "./columns/Feeds";
import "./columns/style.css";
import TopOfTheMonth from "./columns/TopofTheMonth";

const Dashboard = () => {
return (
<body class=" grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 max-h-screen overflow-x-hidden">
<div className="Leaderboard">
<body className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 max-h-screen overflow-x-hidden">
<div className="Leaderboard" style={{ margin: "10px" }}>
<Leaderboard />
</div>

<div className="col-span-2">
<div className="col-span-2" style={{ margin: "10px" }}>
<Events />
</div>

<div className="items-center justify-center md:px-4 xs:mx-auto">
<div className="md:px-4 xs:mx-auto" style={{ marginTop: "10px", marginBottom: "30px", marginRight: "10px" }}>
<TopOfTheMonth />
<Feeds />
</div>
</body>

);
};

Expand Down
33 changes: 17 additions & 16 deletions client/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import Logo from "../components/assets/stackwall.png";
import Logo from "../components/assets/stackb.png";
import User from "../components/assets/Pragados.png";
import "flowbite";
const Navbar = () => {
Expand Down Expand Up @@ -29,9 +29,9 @@ const Navbar = () => {
<nav class="border-gray-200 bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1.5">
<a href="#" class="flex items-center">
<img src={Logo} class="h-8 mr-3" alt="stackbwall Logo" />
<img src={Logo} class="h-12 mr-3" alt="stackbwall Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
StackBWall

</span>
</a>
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
Expand All @@ -44,6 +44,7 @@ const Navbar = () => {
class="w-10 h-10 rounded-full cursor-pointer"
src={User}
alt="User dropdown"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div>
Expand Down Expand Up @@ -95,62 +96,62 @@ const Navbar = () => {
</form>
<div class="max-h-72 overflow-y-scroll w-82">
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
<div class=" text-center ">
<div class="text-center">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
<p class="text-base text-gray-400 font-normal">Software Engineer</p>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
</div>
</div>
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
<p class="text-base text-gray-400 font-normal">Graphic Designer</p>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
</div>
</div>
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
<p class="text-base text-gray-400 font-normal">Dev Ops</p>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
</div>
</div>
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
<p class="text-base text-gray-400 font-normal">Software Engineer</p>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
</div>
</div>
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
<p class="text-base text-gray-400 font-normal">Graphic Designer</p>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
</div>
</div>
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
<div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
<div class="mb-8">
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" />
<img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
</div>
<div class="text-center">
<p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
Expand Down
Binary file added client/src/components/assets/medalk.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/components/assets/medall.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/components/assets/stackb.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 36 additions & 32 deletions client/src/components/columns/Events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,16 @@ const Events = () => {
return (
<>
<div
id=" custom-controls-gallery"
class="relativey w-auto pt-2 pb-8"
id="custom-controls-gallery"
className="relativey mx-auto mt-3 pt-2 pb-8"
data-carousel="slide"
style={{
border: "2px solid transparent",
boxShadow: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 5px px",
}}
>
<div class="flex items-center justify-center min-h-fit shadow-lg shadow-offset-x-8 shadow-right relative h-80 flex-wrap overflow-hidden rounded-lg">

<div class=" duration-700 ease-in-out" data-carousel-item="active">
<img
src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
Expand Down Expand Up @@ -99,25 +104,22 @@ const Events = () => {
</div>


<div class="grid-col-2 px-2 py-2 flex flex-col align-middle bg-white rounded-lg shadow-lg dark:border-gray-700">
<div class="flex flex-col align-middle mx-8 mb-5 mt-0 w-82 bg-blue border border-white rounded-lg shadow-lg" style={{ border: '2px solid transparent', boxShadow: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px" }}>
<div class="grid grid-cols-2">
{/* Top Voted */}
<div class="grid grid-cols-1 px-4">
<h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">

<div class="grid grid-cols-1 mt-4 mb-2 px-4">
<h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">
Top Favorite
</h5>

<ul
role="list"
class="divide-y divide-white dark:divide-gray-300"
>
<li class="pt-3">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<ul role="list" class="divide-y divide-white dark:divide-gray-300">
<li class="pt-3 pb-0 sm:pt-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex-shrink-0 ">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User}
alt="Neil image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down Expand Up @@ -148,12 +150,13 @@ const Events = () => {
</div>
</li>
<li class="pt-3 pb-0 sm:pt-4">
<div class="flex items-center space-x-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User1}
alt="Thomas image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down Expand Up @@ -184,12 +187,13 @@ const Events = () => {
</div>
</li>
<li class="pt-3 pb-0 sm:pt-4">
<div class="flex items-center space-x-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex items-center space-x-4 flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User2}
alt="Thomas image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down Expand Up @@ -223,22 +227,20 @@ const Events = () => {
</div>

{/* Top Performers */}
<div>
<div class="grid grid-cols-1 px-4">
<h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">
<div style={{ marginBottom: "5px" }}>
<div class="grid grid-cols-1 mt-4 px-4" >
<h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">
Top Performers
</h5>
<ul
role="list"
class="divide-y divide-white dark:divide-gray-200"
>
<ul role="list" class="divide-y divide-white dark:divide-gray-200">
<li class="pt-4">
<div class="flex items-center space-x-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User}
alt="Neil image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down Expand Up @@ -269,12 +271,13 @@ const Events = () => {
</div>
</li>
<li class="pt-3 pb-0 sm:pt-4">
<div class="flex items-center space-x-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User1}
alt="Thomas image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down Expand Up @@ -305,12 +308,13 @@ const Events = () => {
</div>
</li>
<li class="pt-3 pb-0 sm:pt-4">
<div class="flex items-center space-x-4">
<div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
class="w-10 h-10 rounded-full"
src={User2}
alt="Thomas image"
style={{ border: "2px solid #ec581d" }}
/>
</div>
<div class="flex-1 min-w-0">
Expand Down
Loading