From 271eea95381d2fdb36c4af3eb9ed231a1f724c4a Mon Sep 17 00:00:00 2001 From: Sonika Date: Mon, 11 Dec 2023 11:32:04 +0530 Subject: [PATCH] dashboard css fix --- src/App.css | 304 +---------------------- src/components/Dashboard.js | 83 ++++--- src/components/projects/ProjectFilter.js | 10 + 3 files changed, 61 insertions(+), 336 deletions(-) create mode 100644 src/components/projects/ProjectFilter.js diff --git a/src/App.css b/src/App.css index 2579799..884dfe7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,302 +1,8 @@ -.App { - text-align: center; +.app-background { + background-color: #0d0d0d !important; + color:white !important; } -.App-header { - background-color:#101010; - height: 80px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-footer { - background-color: #101010; - height: 48px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - font-size: 12px; - color: white; - /* position : absolute; - bottom : 0; - width:100%; */ -} - -.App-link { - color: #61dafb; -} - -.header-menu { - display: flex; - flex-direction: row; - margin-right: 15%; -} - -.header-menu a { - margin-left: 12%; - color: white; - text-decoration: none; - font-size: 15px; -} - -.search-bar { - width: 350px; -} - -.search-field { - color: white !important; -} - -.gridListRoot { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - overflow: hidden; - margin-top: 2%; -} - -.gridList { - width: 100%; - display: flex; - justify-content: center; -} - -.gridListItem { - width: 245.5px; - height: 260px; -} - -@media (min-width: 1500px) { - .gridListItem { - width: 320px; - height: 328px; - } -} - -@media (min-width: 1300px) and (max-width: 1500px) { - .gridListItem { - width: 272px; - height: 260px; - } -} - -@media (max-width: 600px) { - .gridListItem { - width: 360px; - height: 260px; - } -} - -@media (min-width: 600px) and (max-width: 800px) { - .gridListItem { - width: 288px; - height: 260px; - } -} - -.fa { - padding: 15px; - font-size: 25px; - width: 50px; - text-align: center; - text-decoration: none; - margin: 5px 3px 0px 3px; - border-radius: 5px; -} - -.fa:hover { - opacity: 0.9; -} - -.fa-facebook { - background: #3B5998; - color: white; -} - -.fa-twitter { - background: #55ACEE; - color: white; -} - -.fa-youtube { - background: #bb0000; - color: white; -} - -.fa-instagram { - background: #125688; - color: white; -} - - - -.card-container { - position: relative; - z-index: 1; - margin: 5% auto; - width: 210px; - height: 210px; - perspective: 1000px; - margin-bottom: 10%; -} - - -.card-body { - width: 210px; - height: 210px; - transform-style: preserve-3d; - transition: all .7s linear; -} - -.card-container:last-child{ - margin-right: 35px; -} - -/* .card-container:hover .card-body { - transform: rotateY(180deg); -} - -.card-container:hover > .card-body > .side-front { - opacity: 0; - visibility: hidden; - transition: opacity 1s ease-in, visibility .75s linear; -} */ - -/*- Card sides -*/ -.card-side { - position: absolute; - top: 0; - overflow: hidden; - width: 100%; - height: 100%; - color: #212121; - background-color: #fff; - backface-visibility: hidden; - box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07); -} - -.side-front { - display: flex; - justify-content: center; - align-items: center; -} - - -/*- Back side -*/ -.side-back { - z-index: 2; - padding: 32px; - transform: rotateY(180deg); - background-color: #878383 -} - -.side-back div { - padding: 3px; -} - -.side-back a { - color: white; -} - -.side-back a:hover { - color: black; -} - -.flip-card-div { - display: flex; - flex-direction: row; -} - -@media (max-width: 600px) { - .flip-card-div { - display: flex; - flex-direction: column; - } -} - -div[role=columnheader] { - height: 35px; - margin-top: 5px; -} - -.select-field { - width : 35%; -} - -.ReactTable .rt-tbody .rt-tr-group { - border-bottom: solid 1px #2d333b !important; -} - -.ReactTable .rt-thead .rt-tr { - text-align: left !important; -} - -.card_header span { - font-size: 14px; -} - -.project_details { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.project_details li { - padding-top: 0px !important; -} - -/* ul[class*="MuiList-padding-"] { - padding-top: 0; - padding-bottom: 0; -} */ - -.groupArrow { - display: inline-block; - position: relative; - color: white; - margin: 0 10px; - cursor: pointer; -} - -.noResult { - margin: auto; - width: 288px; -} - -.img { - position: absolute; - left: 45%; - top: 55%; - z-index: 1000; -} - -/* .full-height div:nth-of-type(3n) { - width: 10px !important; - top: 100px !important; -} - -.full-height div:nth-of-type(3n) div { - background-color: red !important; -} */ - -.track-vertical { - width: 10px !important; - top: 100px !important; - bottom: 2px; - right: 2px; - border-radius: 3px; - background: rgba(255, 255, 255, 0.111); -} -.track-vertical .thumb-vertical { - position: relative; - display: block; - width: 100%; - height: 10% !important; - cursor: pointer; - border-radius: inherit; - background-color: white; +.app-screen-heights{ + min-height: 650px; } \ No newline at end of file diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js index 10eb018..57d8ffa 100644 --- a/src/components/Dashboard.js +++ b/src/components/Dashboard.js @@ -1,8 +1,5 @@ -import { Card, CardContent, Grid, Paper, Typography } from "@mui/material"; +import { Box, Card, CardContent, Grid, Paper, Typography, styled } from "@mui/material"; import React, { useEffect } from "react"; -import { useMutation } from "@tanstack/react-query"; -import { useQuery } from '@tanstack/react-query'; -import {Link} from 'react-router-dom'; import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects"; import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects"; import { useGetProjectData } from "APIs/getProject"; @@ -14,42 +11,54 @@ export default function Dashboard(){ const { data: getUnlinkedProjectList } = useGetUnlinkedProjects(); const { data: getProjectDataList } = useGetProjectData(); - + const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#1e1e1e', + color:"white", + padding: theme.spacing(5), + textAlign: 'left', + + })); console.log('sdfsds',getProjectDataList) return ( - -
-
- {/*

Home

*/} -
- - {/* */} - - - {getUnlinkedProjectList && getUnlinkedProjectList.length} - - - New Projects That needs Contract Linkage - - - {/* */} - - - {/* */} - - - {getLinkedProjectList && getLinkedProjectList.length} - - - Projects That needs To Be Published - - - {/* */} - -
-
-
+ + + + + + + + + {getUnlinkedProjectList && getUnlinkedProjectList.length} + + + + + New Projects That needs Contract Linkage + + + + + + + + + + + {getLinkedProjectList && getLinkedProjectList.length} + + + + + Projects That needs To Be Published + + + + + + + + ) diff --git a/src/components/projects/ProjectFilter.js b/src/components/projects/ProjectFilter.js new file mode 100644 index 0000000..b7d8316 --- /dev/null +++ b/src/components/projects/ProjectFilter.js @@ -0,0 +1,10 @@ +import React from "react"; + +export default function ProjectFilter(){ + + return( + <> + + + ) +} \ No newline at end of file