Improve styling for admin pages (#179)

* Improve styling for admin pages * Add changelog * Improve test alert UIs
wpsocio · Oct 16, 2024 · 55eeace · 55eeace
1 parent 6adf297
commit 55eeace
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 127 deletions.
diff --git a/.changeset/cuddly-rocks-joke.md b/.changeset/cuddly-rocks-joke.md
@@ -0,0 +1,8 @@
+---
+"wptelegram-comments": patch
+"wptelegram-widget": patch
+"wptelegram-login": patch
+"wptelegram": patch
+---
+
+Improved admin styles on smaller screens
diff --git a/packages/js/e2e-utils/package.json b/packages/js/e2e-utils/package.json
diff --git a/packages/js/shared-ui/components/wp-admin-container.tsx b/packages/js/shared-ui/components/wp-admin-container.tsx
@@ -0,0 +1,20 @@
+export type WpAdminContainerProps = {
+	children?: React.ReactNode;
+	sidebar: React.ReactNode;
+};
+
+export function WpAdminContainer({ children, sidebar }: WpAdminContainerProps) {
+	return (
+		<>
+			<style>
+				{
+					'#wpcontent { padding-left: 0 !important; padding-right: 0 !important; }'
+				}
+			</style>
+			<div className="flex flex-col md:flex-row gap-4 p-3 sm:p-6">
+				<div className="md:basis-2/3 xl:basis-3/4 shrink-0">{children}</div>
+				<div className="md:basis-1/3 xl:basis-1/4">{sidebar}</div>
+			</div>
+		</>
+	);
+}
diff --git a/packages/js/shared-ui/form/test-result/member-count-result.tsx b/packages/js/shared-ui/form/test-result/member-count-result.tsx
@@ -4,6 +4,7 @@ import type {
 	TestResultType,
 } from '@wpsocio/services/apiFetch/types.js';
 import { cn } from '@wpsocio/ui-components';
+import { Alert } from '@wpsocio/ui-components/wrappers/alert.jsx';
 
 interface MemberCountResultProps {
 	memberCountResult: TestResult;
@@ -14,31 +15,30 @@ export const MemberCountResult: React.FC<MemberCountResultProps> = ({
 	memberCountResult,
 	memberCountResultType,
 }) => {
-	const result = Object.entries(memberCountResult);
+	const [[chat_id, result] = []] = Object.entries(memberCountResult);
 
-	return result.length ? (
+	const resultType = memberCountResultType?.[chat_id ?? ''];
+
+	return result ? (
 		<div className="mt-4">
-			<p className="text-gray-500">{__('Members Count:')}</p>
-			{result.map(([chat_id, result]) => {
-				return (
-					<div className="flex flex-row flex-wrap py-4" key={chat_id}>
-						<div className="min-w-[150px]">
-							<span className="font-bold">{chat_id}</span>
-						</div>
-						<div className="ms-4">
-							<span
-								className={cn('font-bold', {
-									'text-red-600': memberCountResultType?.[chat_id] === 'ERROR',
-									'text-green-600':
-										memberCountResultType?.[chat_id] === 'SUCCESS',
-								})}
-							>
-								{result}
-							</span>
-						</div>
+			<Alert
+				title={__('Members Count:')}
+				type={resultType === 'ERROR' ? 'error' : 'success'}
+				className="max-w-max"
+			>
+				<div className="flex flex-wrap gap-3">
+					<div className="min-w-[150px]">
+						<span className="font-semibold">{chat_id}</span>
 					</div>
-				);
-			})}
+					<span
+						className={cn('font-semibold', {
+							'text-green-600': resultType === 'SUCCESS',
+						})}
+					>
+						{result}
+					</span>
+				</div>
+			</Alert>
 		</div>
 	) : null;
 };
diff --git a/packages/js/shared-ui/form/test-result/message-result.tsx b/packages/js/shared-ui/form/test-result/message-result.tsx
@@ -4,6 +4,7 @@ import type {
 	TestResultType,
 } from '@wpsocio/services/apiFetch/types.js';
 import { cn } from '@wpsocio/ui-components';
+import { Alert } from '@wpsocio/ui-components/wrappers/alert.jsx';
 
 interface MessageResultProps {
 	messageResult: TestResult;
@@ -14,30 +15,30 @@ export const MessageResult: React.FC<MessageResultProps> = ({
 	messageResult,
 	messageResultType,
 }) => {
-	const testResults = Object.entries(messageResult);
+	const [[chat_id, result] = []] = Object.entries(messageResult);
 
-	return testResults.length ? (
+	const resultType = messageResultType?.[chat_id ?? ''];
+
+	return result ? (
 		<div className="mt-4">
-			<p className="text-gray-500">{__('Result:')}</p>
-			{testResults.map(([chat_id, result]) => {
-				return (
-					<div className="flex py-4 flex-wrap" key={chat_id}>
-						<div className="min-w-[150px]">
-							<span className="font-bold">{chat_id}</span>
-						</div>
-						<div className="ms-4">
-							<span
-								className={cn('font-bold', {
-									'text-red-600': messageResultType?.[chat_id] === 'ERROR',
-									'text-green-600': messageResultType?.[chat_id] === 'SUCCESS',
-								})}
-							>
-								{result}
-							</span>
-						</div>
+			<Alert
+				title={__('Test Result:')}
+				type={resultType === 'ERROR' ? 'error' : 'success'}
+				className="max-w-max"
+			>
+				<div className="flex flex-wrap gap-3" key={chat_id}>
+					<div className="min-w-max">
+						<span className="font-semibold">{chat_id}</span>
 					</div>
-				);
-			})}
+					<span
+						className={cn('font-semibold', {
+							'text-green-600': resultType === 'SUCCESS',
+						})}
+					>
+						{result}
+					</span>
+				</div>
+			</Alert>
 		</div>
 	) : null;
 };
diff --git a/packages/js/shared-ui/form/test-result/render-test-result.tsx b/packages/js/shared-ui/form/test-result/render-test-result.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wpsocio/i18n';
 import { cn } from '@wpsocio/ui-components';
+import { Alert } from '@wpsocio/ui-components/wrappers/alert.js';
 
 export type ResultType = 'SUCCESS' | 'ERROR';
 
@@ -13,17 +14,18 @@ export const RenderTestResult: React.FC<RenderTestResultProps> = ({
 	resultType,
 }) => {
 	return result ? (
-		<div>
-			<i className="text-gray-600">{__('Test Result:')}</i>
-			&nbsp;
+		<Alert
+			title={__('Test Result:')}
+			type={resultType === 'ERROR' ? 'error' : 'success'}
+			className="max-w-max"
+		>
 			<span
 				className={cn('font-bold', {
-					'text-red-600': resultType === 'ERROR',
 					'text-green-600': resultType === 'SUCCESS',
 				})}
 			>
 				{result}
 			</span>
-		</div>
+		</Alert>
 	) : null;
 };
diff --git a/packages/js/shared-ui/form/use-chat-with-test.tsx b/packages/js/shared-ui/form/use-chat-with-test.tsx
@@ -47,7 +47,6 @@ export const useChatWithTest = (
 					return;
 				}
 				const chat_id = fixUsername ? fixChatId(chatId) : chatId;
-				// setMemberCountResult({});
 				await sendTestMessage(
 					{
 						bot_token,
@@ -58,26 +57,23 @@ export const useChatWithTest = (
 						},
 						setResult(result) {
 							setTestResult({
-								...testResult,
 								[chatId]: result,
 							});
 						},
 						setResultType(resultType) {
 							setTestResultType({
-								...testResultType,
 								[chatId]: resultType,
 							});
 						},
 					},
 					event,
 				);
 			},
-		[bot_token, fixUsername, testResult, testResultType],
+		[bot_token, fixUsername],
 	);
 
 	const onBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(
 		async ({ nativeEvent: e }) => {
-			// setTestResult({});
 			const chatId = (e.target as HTMLInputElement)?.value;
 			if (!bot_token || !chatId || checkingMemberCount[chatId]) {
 				return;
@@ -88,20 +84,17 @@ export const useChatWithTest = (
 				bot_token,
 				chat_id,
 				setInProgress: (val) =>
-					setCheckingMemberCount((prevState) => ({
-						...prevState,
+					setCheckingMemberCount({
 						[chatId]: val,
-					})),
+					}),
 				setResult: (result) =>
-					setMemberCountResult((prevState) => ({
-						...prevState,
+					setMemberCountResult({
 						[chatId]: result,
-					})),
+					}),
 				setResultType: (resultType) =>
-					setMemberCountResultType((prevState) => ({
-						...prevState,
+					setMemberCountResultType({
 						[chatId]: resultType,
-					})),
+					}),
 			});
 		},
 		[bot_token, checkingMemberCount, fixUsername],

diff --git a/plugins/wptelegram-comments/js/settings/ui/App.tsx b/plugins/wptelegram-comments/js/settings/ui/App.tsx
@@ -1,4 +1,5 @@
 import { Form, useForm, zodResolver } from '@wpsocio/form';
+import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
 import { useMemo } from 'react';
 import { ROOT_ID } from '../constants';
@@ -39,17 +40,12 @@ const App: React.FC = () => {
 			onSubmit={form.handleSubmit(onSubmit, onInvalid)}
 			form={form}
 		>
-			<div className="flex flex-col gap-4 p-4 lg-wp:ps-0 md:flex-row">
-				<div className="md:basis-2/3 xl:basis-3/4 shrink-0">
-					<Header />
-					<Instructions />
-					<Configuration />
-					<SubmitBar form={`${ROOT_ID}-form`} />
-				</div>
-				<div className="md:basis-1/3 xl:basis-1/4">
-					<Sidebar />
-				</div>
-			</div>
+			<WpAdminContainer sidebar={<Sidebar />}>
+				<Header />
+				<Instructions />
+				<Configuration />
+				<SubmitBar form={`${ROOT_ID}-form`} />
+			</WpAdminContainer>
 		</Form>
 	);
 };

diff --git a/plugins/wptelegram-login/js/settings/ui/App.tsx b/plugins/wptelegram-login/js/settings/ui/App.tsx
@@ -1,4 +1,5 @@
 import { Form, useForm, zodResolver } from '@wpsocio/form';
+import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
 import { ROOT_ID } from '../constants';
 import { useData, validationSchema } from '../services';
@@ -30,20 +31,15 @@ const App: React.FC = () => {
 			onSubmit={form.handleSubmit(onSubmit, onInvalid)}
 			form={form}
 		>
-			<div className="flex flex-col gap-4 p-4 lg-wp:ps-0 md:flex-row">
-				<div className="md:basis-2/3 xl:basis-3/4 shrink-0">
-					<Header />
-					<Instructions />
-					<TelegramOptions />
-					<LoginOptions />
-					<ButtonOptions />
-					<ErrorMessageOptions />
-					<SubmitBar form={`${ROOT_ID}-form`} />
-				</div>
-				<div className="md:basis-1/3 xl:basis-1/4">
-					<Sidebar />
-				</div>
-			</div>
+			<WpAdminContainer sidebar={<Sidebar />}>
+				<Header />
+				<Instructions />
+				<TelegramOptions />
+				<LoginOptions />
+				<ButtonOptions />
+				<ErrorMessageOptions />
+				<SubmitBar form={`${ROOT_ID}-form`} />
+			</WpAdminContainer>
 		</Form>
 	);
 };

diff --git a/plugins/wptelegram-widget/js/settings/ui/App.tsx b/plugins/wptelegram-widget/js/settings/ui/App.tsx
@@ -1,4 +1,5 @@
 import { Form, useForm, zodResolver } from '@wpsocio/form';
+import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
 import { ROOT_ID } from '../constants';
 import {
@@ -31,16 +32,11 @@ const App: React.FC = () => {
 			onSubmit={form.handleSubmit(onSubmit, onInvalid)}
 			form={form}
 		>
-			<div className="flex flex-col gap-4 p-4 lg-wp:ps-0 md:flex-row">
-				<div className="md:basis-2/3 xl:basis-3/4 shrink-0">
-					<Header />
-					<TabbedSections />
-					<SubmitBar form={`${ROOT_ID}-form`} showSeparator={false} />
-				</div>
-				<div className="md:basis-1/3 xl:basis-1/4">
-					<Sidebar />
-				</div>
-			</div>
+			<WpAdminContainer sidebar={<Sidebar />}>
+				<Header />
+				<TabbedSections />
+				<SubmitBar form={`${ROOT_ID}-form`} showSeparator={false} />
+			</WpAdminContainer>
 		</Form>
 	);
 };

diff --git a/plugins/wptelegram/js/settings/ui/App.tsx b/plugins/wptelegram/js/settings/ui/App.tsx
@@ -1,4 +1,5 @@
 import { Form, useForm, zodResolver } from '@wpsocio/form';
+import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
 import { useMemo } from 'react';
 import { ROOT_ID } from '../constants';
@@ -37,17 +38,12 @@ const App: React.FC = () => {
 			onSubmit={form.handleSubmit(onSubmit, onInvalid)}
 			form={form}
 		>
-			<div className="flex flex-col gap-4 p-4 lg-wp:ps-0 md:flex-row">
-				<div className="md:basis-2/3 xl:basis-3/4 shrink-0">
-					<Header />
-					<Upsell location="header" />
-					<TabbedSections />
-					<SubmitBar form={`${ROOT_ID}-form`} />
-				</div>
-				<div className="md:basis-1/3 xl:basis-1/4">
-					<Sidebar />
-				</div>
-			</div>
+			<WpAdminContainer sidebar={<Sidebar />}>
+				<Header />
+				<Upsell location="header" />
+				<TabbedSections />
+				<SubmitBar form={`${ROOT_ID}-form`} />
+			</WpAdminContainer>
 		</Form>
 	);
 };