From 56eb562193ba18b31509478b282f016ec70cd528 Mon Sep 17 00:00:00 2001 From: mohammedsaid18 Date: Fri, 3 Oct 2025 14:57:49 +0300 Subject: [PATCH] Responsive app --- src/components/DashboardGrid.tsx | 18 +- src/components/Strategy/ProgressMetrics.tsx | 10 +- src/components/shared/ContainerPage.tsx | 2 +- src/components/shared/HeaderPage.tsx | 4 +- src/components/shared/Stepper.tsx | 2 +- src/components/shared/UrlDropdown.tsx | 2 +- src/pages/Portfolio.tsx | 57 +++--- src/pages/Settings.tsx | 211 +++++++++++++------- src/pages/Strategy.tsx | 8 +- src/pages/login.tsx | 8 +- 10 files changed, 190 insertions(+), 132 deletions(-) diff --git a/src/components/DashboardGrid.tsx b/src/components/DashboardGrid.tsx index b6193ba..4952355 100644 --- a/src/components/DashboardGrid.tsx +++ b/src/components/DashboardGrid.tsx @@ -333,7 +333,7 @@ export default function DashboardGrid() { const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => { return ( -
{ if (tooltipText) { setIsHovered(true) @@ -344,12 +344,12 @@ export default function DashboardGrid() { setIsHovered(false) } }}> - Active Keywords + Active Keywords -
+
- {value} + {value} {tooltipText &&
{/* */} @@ -364,9 +364,9 @@ export default function DashboardGrid() { )}
}
-
{title}
-
- {valueChange} +
{title}
+
+ {valueChange}
@@ -382,8 +382,8 @@ export default function DashboardGrid() { {/* Main content area with new metric cards */} -
-
+
+
diff --git a/src/components/Strategy/ProgressMetrics.tsx b/src/components/Strategy/ProgressMetrics.tsx index 7e62302..5f36f5e 100644 --- a/src/components/Strategy/ProgressMetrics.tsx +++ b/src/components/Strategy/ProgressMetrics.tsx @@ -16,7 +16,7 @@ function ProgressMetrics() { return (
-
+

CPA Los Angeles

{/* Example 2: With Completed Status */}
@@ -31,9 +31,9 @@ function ProgressMetrics() {
-
+
{/* Left section with progress indicators */} -
+
{/* 60% Progress */}
@@ -52,7 +52,7 @@ function ProgressMetrics() {
-
+
{/* 75% Keyword Visibility */}
75%
@@ -80,7 +80,7 @@ function ProgressMetrics() {
{/* Right section with Chat GPT and metrics */} -
+
{/* Performance metrics with chart */}
diff --git a/src/components/shared/ContainerPage.tsx b/src/components/shared/ContainerPage.tsx index cf72b64..ae234aa 100644 --- a/src/components/shared/ContainerPage.tsx +++ b/src/components/shared/ContainerPage.tsx @@ -2,7 +2,7 @@ import React from 'react' const ContainerPage = ({ children }: { children: React.ReactNode }) => { return ( -
+
{children}
) diff --git a/src/components/shared/HeaderPage.tsx b/src/components/shared/HeaderPage.tsx index e5080de..3fcc9ab 100644 --- a/src/components/shared/HeaderPage.tsx +++ b/src/components/shared/HeaderPage.tsx @@ -3,8 +3,8 @@ import UrlDropdown from "./UrlDropdown" const HeaderPage = ({ title }: { title: string }) => { return ( -
-

{title}

+
+

{title}

diff --git a/src/components/shared/Stepper.tsx b/src/components/shared/Stepper.tsx index 62cec36..6b2ee00 100644 --- a/src/components/shared/Stepper.tsx +++ b/src/components/shared/Stepper.tsx @@ -13,7 +13,7 @@ interface StepperProps { export function Stepper({ steps }: StepperProps) { return ( -
+
{steps.map((step, index) => (
{/* Step Badge and Label */} diff --git a/src/components/shared/UrlDropdown.tsx b/src/components/shared/UrlDropdown.tsx index 9fa5ed2..9b77556 100644 --- a/src/components/shared/UrlDropdown.tsx +++ b/src/components/shared/UrlDropdown.tsx @@ -21,7 +21,7 @@ export default function UrlDropdown() { }; return ( -
+
{/* Input box */}
-
+
{/* Table Section */} -
+
{/* Title Bar */} -
+
- CPA Los Angeles - Links: - - Indexed 32% - - Interlinked 4% - - Content Publishing: - Locked + CPA Los Angeles + + Links: + Indexed 32% + Interlinked 4% + + Content Publishing: + Locked
-
+
-
{/* Global Filter/Sort Header Row */} -
-
+
+
DR @@ -154,32 +152,31 @@ function Portfolio() { {cat.rows.length}
-
- +
+
{cat.rows.map((row, rIdx) => ( - - - - - + + + - - + ))} diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 1b5ac68..783d43e 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; const Settings = () => { const [activeSection, setActiveSection] = useState("profile"); @@ -78,11 +78,11 @@ const Settings = () => { }; return ( -
-
+
+
{/* Sidebar */} -
-

Settings

+
+

Settings

diff --git a/src/pages/Strategy.tsx b/src/pages/Strategy.tsx index f12dc56..efebe21 100644 --- a/src/pages/Strategy.tsx +++ b/src/pages/Strategy.tsx @@ -20,16 +20,14 @@ function Strategy() { return ( -
- - {/* */} +
-
+
-
+
{selectedKeyword === "CPA Los Angeles" ? : } diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 58a0964..77eaf91 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -285,7 +285,7 @@ export default function Login() { )}
- {/* */} + {/* */}
@@ -299,7 +299,7 @@ export default function Login() { name="email" type="email" required - className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" + className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 " placeholder="your.email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} @@ -429,7 +429,7 @@ export default function Login() { name="email" type="email" required - className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" + className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white" placeholder="your.email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} @@ -450,7 +450,7 @@ export default function Login() { name="password" type="password" required - className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white" + className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white" placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)}
+
- +
-
{row.title}
+
{row.title}
{row.DR}{row.DA}{row.traffic} + {row.DR}{row.DA}{row.traffic}
{row.indexed}
- {/* whitespace-nowrap */} 		+ {row.interlinked} {row.date}{row.date}