feat: make the connection details card more compact

Author: abaicus

assets/src/dashboard/parts/components/Tooltip.js

@@ -0,0 +1,41 @@
+import { useState } from '@wordpress/element';
+import classnames from 'classnames';
+
+export default function({ children, text }) {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	if ( ! text ) {
+		return children;
+	}
+	if ( ! children ) {
+		return null;
+	}
+
+	const classes = classnames(
+		'absolute text-white bg-gray-800 text-xs p-2 rounded shadow-lg z-10 transition-opacity duration-200 pointer-events-none',
+		{
+			'opacity-100': isVisible,
+			'opacity-0': ! isVisible
+		}
+	);
+
+	const tooltipStyles = {
+		left: '50%',
+		transform: 'translateX(-50%)',
+		bottom: '120%'
+	};
+
+	return (
+		<div
+			className="relative"
+			onMouseEnter={() => setIsVisible( true )}
+			onMouseLeave={() => setIsVisible( false )}
+		>
+			<div className={classes} style={tooltipStyles}>
+				{text.charAt( 0 ).toUpperCase() + text.slice( 1 ).toLowerCase()}
+				<div className="absolute -bottom-1 w-2 h-2 bg-gray-800" style={{ left: '50%', transform: 'translateX(-50%) rotate(45deg)' }}></div>
+			</div>
+			{children}
+		</div>
+	);
+}

assets/src/dashboard/parts/connected/Sidebar.js

@@ -13,6 +13,8 @@ import { addQueryArgs } from '@wordpress/url';
 
 import SPCRecommendation from './SPCRecommendation';
 import OptimizationStatus from './OptimizationStatus';
+import { globe, user } from '../../utils/icons';
+import Tooltip from '../components/Tooltip';
 
 const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_1,
@@ -47,31 +49,23 @@ const Sidebar = ({ settings }) => {
 
 	return (
 		<div className="grid md:grid-cols-2 xl:flex xl:flex-col xl:mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 gap-5 shrink-0 xl:w-[350px]">
-			<div className="bg-white gap-5 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
-				<TextControl
-					label={ optimoleDashboardApp.strings.logged_in_as }
-					value={ name }
-					className="optml__placeholder"
-					disabled
-				/>
-
-				<TextControl
-					label={ optimoleDashboardApp.strings.private_cdn_url }
-					value={ domain }
-					className="optml__placeholder"
-					disabled
-				/>
+			<div className="bg-white gap-3 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
 
-				<hr className="m-0 border-grayish-blue"/>
+				<div className="grid gap-4">
+					<PlaceholderInput icon={user} value={name} tooltipText={optimoleDashboardApp.strings.logged_in_as}/>
+					<PlaceholderInput icon={globe} value={domain} tooltipText={optimoleDashboardApp.strings.private_cdn_url}/>
+				</div>
 
-				<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
+				<hr className="m-0 border-t-grayish-blue"/>
 
-				<p
-					className="m-0 -mt-3"
-					dangerouslySetInnerHTML={ {
-						__html: optimoleDashboardApp.strings.optml_dashboard
-					} }
-				/>
+				<div className="border-t border-gray-300 block grid gap-2">
+					<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
+					<span
+						dangerouslySetInnerHTML={ {
+							__html: optimoleDashboardApp.strings.optml_dashboard
+						} }
+					/>
+				</div>
 			</div>
 
 			{ 'free' === plan ? (
@@ -137,3 +131,22 @@ const Sidebar = ({ settings }) => {
 };
 
 export default Sidebar;
+
+
+const PlaceholderInput = ({ icon = null, value, tooltipText = '' }) => {
+	return (
+		<Tooltip text={tooltipText}>
+			<div className="grid grid-cols-1 text-gray-700 hover:text-info transition-all ease-in-out duration-300">
+				<input
+					value={value}
+					type="text"
+					disabled
+					className="col-start-1 row-start-1 block w-full rounded-md !bg-light-blue py-1.5 !pl-9 pr-3 !text-gray-500 !m-0 text-sm !py-0.5 !border-0"
+				/>
+				<span className="pointer-events-none col-start-1 row-start-1 flex items-center ml-3 w-4 h-4 self-center">
+					{icon}
+				</span>
+			</div>
+		</Tooltip>
+	);
+};