Merge pull request #21 from akirachix/feature/ci-cd

Updated the feedback and material responsiveness

Author: hunterachieng

ecorise-react-app/src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+ 
 }
 
 .App-logo {
@@ -22,6 +23,7 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  
 }
 
 .App-link {

ecorise-react-app/src/App.js

@@ -10,23 +10,17 @@ import Teaser from './Teaser';
 import Feedback from './Feedback';
 import Dashboard from './Dashboard';
 import LoginScreen from './Login';
-
 import Sidebar from './shared-component/SideBar';
-
 function AppContent() {
   const location = useLocation();
   const noSidebarRoutes = ['/login', '/signup','/teaser']; 
   const hideSidebar = noSidebarRoutes.includes(location.pathname);
-
   return (
-     
-
     <div style={{ display: 'flex' }}>
       {!hideSidebar && <Sidebar />}
       <div
         style={{
        flex: 1,
-     
       minHeight: '100vh',
       boxSizing: 'border-box',
       marginRight: !hideSidebar ? '380px' : 0,

ecorise-react-app/src/Dashboard/index.js

@@ -5,7 +5,7 @@ import "./style.css";
 import { useNavigate } from "react-router-dom";
 import { usePickups } from '../hooks/useFetchPickups';
 import { useProducts } from '../hooks/useFetchProducts';
-import { useUsers } from '../hooks/useFetchUser';
+import { useUsers } from '../hooks/useFetchUsers';
 import { usePayment } from '../hooks/useFetchPayments';
 function Dashboard() {
   const navigate = useNavigate();

ecorise-react-app/src/Dashboard/index.test.js

@@ -15,7 +15,7 @@ jest.mock('react-router-dom', () => {
 });
 
 
-import * as useUsers from '../hooks/useFetchUser';
+import * as useUsers from '../hooks/useFetchUsers';
 import * as usePickups from '../hooks/useFetchPickups';
 import * as useProducts from '../hooks/useFetchProducts';
 import * as usePayment from '../hooks/useFetchPayments';

ecorise-react-app/src/Dashboard/style.css

@@ -1,5 +1,5 @@
 .dashboard-main {
-  width: 1730px;
+  width: 118%;
   margin-left: 160px;
   background: #fff;
   flex-direction: column;
@@ -323,7 +323,7 @@ text-anchor: middle;
 }
 @media screen and (max-width: 1366px) {
   .dashboard-main {
-    width: 100%;
+    width: 104%;
     margin-left: 180px;
     padding: 0px 20px 30px 20px;
     overflow-x: hidden;
@@ -366,9 +366,9 @@ text-anchor: middle;
   width: 100%;
 }
 }
-@media screen and(min-width:1024) and (max-width: 1280px) {
+@media screen and (max-width: 1280px) {
   .dashboard-main {
-    width: 100%;
+    width: 109%;
     margin-left: 180px;
     padding: 0px 20px 30px 20px;
     overflow-x: hidden;

ecorise-react-app/src/Feedback/style.css

@@ -1,199 +1,3 @@
-
-html, body {
- background-color: white;
- margin: 0;
- padding: 0;
- height: 100%;
-}
-
-
-.main-content {
- padding: 20px ;
- font-family: Arial, sans-serif;
- background: white;
- min-height: 100vh;
- max-width: 1200px;
- margin-left: 22%;
-}
-
-
-.feedback-title {
- text-align: center;
- color: maroon;
- margin-bottom: 20px;
- font-weight: 700;
- font-size: 42px;
-}
-
-.feedback-table-container {
- display: flex;
- flex-direction: column;
- background: white;
- border-radius: 12px;
- box-shadow: 0 4px 15px rgba(0,0,0,0.07);
- overflow-x: auto;
- margin: 0 auto;
-}
-
-
-
-
-.feedback-label-row {
- display: flex;
- background-color: orange;
- border-bottom: 2px solid #cdd4e8;
-}
-
-
-
-
-.label-cell {
- flex: 1;
- font-size: 17pxrem;
- font-weight: 700;
- color: white;
- text-align: center;
- padding: 1.5rem 0;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- border-right: 1px solid #cdd4e8;
- white-space: nowrap;
- user-select: none;
-
-
-}
-.label-cell:last-child {
- border-right: none;
-}
-.feedback-values-row {
- display: flex;
- gap: 70px;
-}
-.values-column {
- gap: 18px;
- min-width: 180px;
- box-sizing: border-box;
- display: flex;          
- flex-direction: column;
-}
-
-
-.values-column:last-child {
- border-right: none;
-}
-
-
-
-
-.value-cell {
- flex: 1;
- padding: 1.75rem;
- font-size: 1rem;
- text-align: center;
- border-bottom: none;
- flex: 1;
-}
-
-
-
-
-.values-column .value-cell:nth-child(odd) {
- background-color: white;
-}
-
-
-.pagination-controls {
- display: flex;
- margin-bottom: 16px;
- gap: 10px;
- justify-content: flex-start;
- margin-top: 16px;
- display: flex;
- align-items: center;
-}
-
-
-.pagination-controls label {
- font-size: 17px;
- font-weight: 600;
- color: #444;
-}
-
-
-.pagination-controls select {
- font-size: 1rem;
- padding: 5px 10px;
- border-radius: 5px;
- border: 1px solid #ccc;
- cursor: pointer;
-}
-
-
-.pagination-button {
- background-color: #e67e22;
- border: none;
- color: white;
- padding: 8px 18px;
- border-radius: 6px;
- cursor: pointer;
- font-size: 1.15rem;
- user-select: none;
- transition: background-color 0.2s;
- padding: 0.5rem 1rem;
-  margin-right: 1rem;
-}
-
-
-.pagination-button:disabled {
- background-color: #ccc;
- cursor: not-allowed;
-}
-
-
-.pagination-button:not(:disabled):hover {
- background-color: #cf711a;
-}
-
-
-.feedback-loading,
-.feedback-error,
-.feedback-empty {
- text-align: center;background-color: white;
- font-size: 1.5rem;
- color: #555;
- padding: 2rem;
-}
-.values-row {
- display: flex;
- margin-bottom: 1.5rem;
-}
-.pagination-controls-top{
-    margin-right: 8px;
-    margin-bottom: 3px;
-  
-
-
-}
-.pagination-controls{
-  margin-right: 8px;
-  justify-content: center;
-
-
-
-}
-.feedback-table-container{
- display: flex;
-
-
-}
-
-
-.values-row{
- display: flex;
- border-bottom: 1px solid #ccc;
-
-
-}
 html, body {
  background-color: white;
  margin: 0;
@@ -213,6 +17,7 @@ html, body {
  text-align: center;
  color: maroon;
  margin-bottom: 20px;
+ margin-left: 20%;
  font-weight: 700;
  font-size: 42px;
 }
@@ -224,7 +29,8 @@ html, body {
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
  overflow-x: auto;
  margin: 0 auto;
- margin-left: 200px;
+ margin-left: 30px;
+ width: 130%;
 }
 .feedback-label-row {
  display: flex;
@@ -413,9 +219,7 @@ html, body {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
- width: 750px;
- margin-left: 100px;
- padding-left: 100px;
+ width: 70%;
 }
 .pagination-controls {
  display: flex;
@@ -427,10 +231,4 @@ html, body {
  align-items: center;
  margin-left: 300px;
  }
-}
-
-
-
-
-
-
+}

ecorise-react-app/src/Login/index.js

@@ -3,7 +3,7 @@ import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { MdEmail } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
 import "./style.css";
-import { useUsers } from "../hooks/useFetchUser";
+import { useUsers } from "../hooks/useFetchUsers";
 const LoginScreen = () => {
   const [form, setForm] = useState({ email: "", password: "" });
   const [showPassword, setShowPassword] = useState(false);

ecorise-react-app/src/Login/index.test.js

@@ -19,7 +19,7 @@ const mockUseUsers = jest.fn(() => ({
   error: null,
 }));
 
-jest.mock('../hooks/useFetchUser', () => ({
+jest.mock('../hooks/useFetchUsers', () => ({
   useUsers: () => mockUseUsers(),
 }));