Merge pull request #28 from akirachix/feature/new_responsiveness

Feature/new responsiveness

Author: hunterachieng

carbontrack/src/app/emissions/page.test.tsx

@@ -53,10 +53,7 @@ jest.mock('next/link', () => ({
   )
 }));
 
-jest.mock('react-icons/io5', () => ({
-  IoSettingsOutline: () => <div data-testid="settings-icon">Settings</div>,
-  IoPersonOutline: () => <div data-testid="person-icon">Person</div>
-}));
+
 
 describe('EmissionsHeatmapPage', () => {
   const mockFactoryEmissions = [
@@ -173,13 +170,7 @@ describe('EmissionsHeatmapPage', () => {
     expect(mockUseEmissionsData.setSelectedDate).toHaveBeenCalledWith('2023-01-15');
   });
 
-  test('renders sidebar layout and icons correctly', () => {
-    render(<EmissionsHeatmapPage />);
 
-    expect(screen.getByTestId('sidebar-layout')).toBeInTheDocument();
-    expect(screen.getByTestId('settings-icon')).toBeInTheDocument();
-    expect(screen.getByTestId('person-icon')).toBeInTheDocument();
-  });
 
   test('handles empty emissions data', () => {
     (useEmissionsData as jest.Mock).mockReturnValue({

carbontrack/src/app/ktda-dashboard/page.tsx

@@ -149,7 +149,7 @@ export default function DashboardPage() {
               </div>
               <h1 className="mb-4 font-semibold text-white 2xl:text-[1.5rem] 2xl:mt-5 xl:text-[1.3rem] xl:mt-3">Emission Trend</h1>
               <div className="grid grid-cols-3 2xl:gap-6 xl:gap-0">
-                <div className="col-span-2 bg-gray-800 p-4 rounded-lg 2xl:w-[100%] 2xl:h-[100%] xl:w-[95%] xl:h-[99%]">
+                <div className="col-span-2 bg-gray-800 p-4 rounded-lg 2xl:w-[100%] 2xl:h-[100%] xl:w-[95%] xl:h-[90%]">
                   <ResponsiveContainer width="100%" height={460}>
                     <LineChart data={fullEmissionTrend}>
                       <XAxis dataKey="month" stroke="#ccc" label={{ value: "Months", position: "insideBottom", offset: -5, fill: "#ccc" }} />
@@ -184,7 +184,7 @@ export default function DashboardPage() {
                     </div>
                   </div>
                   <h3 className="font-semibold text-white text-[20px] xl:mt-4 xl:text-[25px]">Consumed Energy</h3>
-                  <div className="bg-gray-800 p-4 rounded-lg  xl:mt-2 xl:h-[72%]">
+                  <div className="bg-gray-800 p-4 rounded-lg  xl:mt-2 xl:h-[67%]">
                     <ResponsiveContainer width="100%" height={250}>
                       <PieChart>
                         <Pie data={pieData} dataKey="value" nameKey="name" outerRadius={90} fill="#8884D8" label>