← All changes | backend/views/components/Docs/components/help-center/SearchInput.jsx +20 -20 1.3.53 → 1.4.21 View file →

		@@ -53,9 +53,9 @@
53	53
54	54	return (
55	55	<>
56	56	<div
57		- className="disco-w-full disco-h-11 disco-relative disco-my-5"
	57	+ className="disco:w-full disco:h-11 disco:relative disco:my-5"
58	58	ref={wrapperRef}
59	59	>
60	60	<input
61	61	type="text"
		@@ -67,9 +67,9 @@
67	67	searchQuery.trim() && setIsOpen(true);
68	68	}}
69	69	onBlur={() => setIsFocused(false)}
70	70	placeholder={`Search docs\u2026 e.g. "BOGO setup", "conditions", "multi-currency"`}
71		- className="disco-w-full disco-h-full !disco-rounded-2xl disco-py-3 !disco-px-10 disco-border-2 disco-text-sm !disco-placeholder:text-[rgba(0, 0, 0, 0.35)] !disco-bg-gray-100 focus:outline-none disco-transition-colors disco-duration-200"
	71	+ className="disco:w-full disco:h-full disco:rounded-2xl! disco:py-3! disco:px-10! disco:border-2! disco:text-sm disco:placeholder:text-[rgba(0,0,0,0.35)]! disco:bg-gray-100! disco:focus:outline-hidden! disco:transition-colors disco:duration-200"
72	72	style={{
73	73	boxShadow: 'none',
74	74	borderColor: isFocused ? '#47CD89' : '#D1D5DB',
75	75	}}
		@@ -75,20 +75,20 @@
75	75	}}
76	76	/>
77	77	<img
78	78	src={searchIcon}
79		- className="disco-absolute disco-top-1/2 disco-left-3 disco-transform disco--translate-y-1/2 disco-w-4 disco-h-4"
	79	+ className="disco:absolute disco:top-1/2 disco:left-3 disco:transform disco:-translate-y-1/2 disco:w-4 disco:h-4"
80	80	alt="Search icon"
81	81	/>
82	82	{searchQuery && (
83	83	<button
84	84	onClick={handleClear}
85		- className="disco-absolute disco-top-1/2 disco-right-3 disco-transform disco--translate-y-1/2 disco-text-gray-400 hover:disco-text-gray-600 disco-bg-transparent disco-border-none disco-cursor-pointer disco-p-0 disco-leading-none"
	85	+ className="disco:absolute disco:top-1/2 disco:right-3 disco:transform disco:-translate-y-1/2 disco:text-gray-400 disco:hover:text-gray-600 disco:bg-transparent disco:border-none disco:cursor-pointer disco:p-0 disco:leading-none"
86	86	aria-label="Clear search"
87	87	>
88	88	<svg
89	89	xmlns="http://www.w3.org/2000/svg"
90		- className="disco-w-4 disco-h-4"
	90	+ className="disco:w-4 disco:h-4"
91	91	viewBox="0 0 24 24"
92	92	fill="none"
93	93	stroke="currentColor"
94	94	strokeWidth={2}
		@@ -103,12 +103,12 @@
103	103	)}
104	104
105	105	{/* Search results dropdown */}
106	106	{showDropdown && (
107		- <div className="disco-absolute disco-top-full disco-left-0 disco-right-0 disco-mt-1 disco-bg-white disco-rounded-xl disco-border disco-border-gray-200 disco-shadow-lg disco-z-50 disco-max-h-72 disco-overflow-y-auto">
	107	+ <div className="disco:absolute disco:top-full disco:left-0 disco:right-0 disco:mt-1 disco:bg-white disco:rounded-xl disco:border disco:border-gray-200 disco:shadow-lg disco:z-50 disco:max-h-72 disco:overflow-y-auto">
108	108	{searchResults.length > 0 ? (
109	109	<>
110		- <p className="disco-text-xs disco-text-gray-400 disco-font-semibold disco-px-4 disco-pt-3 disco-pb-1 disco-m-0">
	110	+ <p className="disco:text-xs disco:text-gray-400 disco:font-semibold disco:px-4 disco:pt-3 disco:pb-1 disco:m-0">
111	111	{searchResults.length} result
112	112	{searchResults.length !== 1 ? 's' : ''}{' '}
113	113	found
114	114	</p>
		@@ -118,12 +118,12 @@
118	118	href={result.link}
119	119	target="_blank"
120	120	rel="noopener noreferrer"
121	121	onClick={handleResultClick}
122		- className="disco-flex disco-items-center disco-gap-3 disco-px-4 disco-py-2.5 hover:disco-bg-gray-50 disco-transition-colors disco-duration-150 disco-border-b disco-border-gray-100 last:disco-border-b-0"
	122	+ className="disco:flex disco:items-center disco:gap-3 disco:px-4 disco:py-2.5 disco:hover:bg-gray-50 disco:transition-colors disco:duration-150 disco:border-b disco:border-gray-100 disco:last:border-b-0"
123	123	>
124	124	<svg
125		- className="disco-w-4 disco-h-4 disco-text-gray-300 disco-flex-shrink-0"
	125	+ className="disco:w-4 disco:h-4 disco:text-gray-300 disco:shrink-0"
126	126	fill="none"
127	127	viewBox="0 0 24 24"
128	128	stroke="currentColor"
129	129	>
		@@ -133,13 +133,13 @@
133	133	strokeWidth={1.5}
134	134	d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
135	135	/>
136	136	</svg>
137		- <div className="disco-flex-1 disco-min-w-0">
138		- <p className="disco-text-sm disco-font-medium disco-text-gray-800 disco-m-0 disco-truncate">
	137	+ <div className="disco:flex-1 disco:min-w-0">
	138	+ <p className="disco:text-sm disco:font-medium disco:text-gray-800 disco:m-0 disco:truncate">
139	139	{result.title}
140	140	</p>
141		- <p className="disco-text-xs disco-text-gray-400 disco-m-0 disco-truncate">
	141	+ <p className="disco:text-xs disco:text-gray-400 disco:m-0 disco:truncate">
142	142	{result.section}
143	143	{result.excerpt
144	144	? ` \u00b7 ${result.excerpt}\u2026`
145	145	: ''}
		@@ -145,9 +145,9 @@
145	145	: ''}
146	146	</p>
147	147	</div>
148	148	<svg
149		- className="disco-w-3.5 disco-h-3.5 disco-text-gray-300 disco-flex-shrink-0"
	149	+ className="disco:w-3.5 disco:h-3.5 disco:text-gray-300 disco:shrink-0"
150	150	fill="none"
151	151	viewBox="0 0 24 24"
152	152	stroke="currentColor"
153	153	>
		@@ -161,14 +161,14 @@
161	161	</a>
162	162	))}
163	163	</>
164	164	) : (
165		- <div className="disco-px-4 disco-py-6 disco-text-center">
166		- <p className="disco-text-sm disco-text-gray-400 disco-m-0">
	165	+ <div className="disco:px-4 disco:py-6 disco:text-center">
	166	+ <p className="disco:text-sm disco:text-gray-400 disco:m-0">
167	167	No results found for{' '}
168	168	<strong>{searchQuery}</strong>
169	169	</p>
170		- <p className="disco-text-xs disco-text-gray-300 disco-mt-1 disco-m-0">
	170	+ <p className="disco:text-xs disco:text-gray-300 disco:mt-1 disco:m-0">
171	171	Try a different keyword
172	172	</p>
173	173	</div>
174	174	)}
		@@ -175,18 +175,18 @@
175	175	</div>
176	176	)}
177	177	</div>
178	178
179		- <div className="disco-flex !disco-items-center disco-gap-2">
180		- <p className="disco-text-sm disco-text-gray-400 disco-font-bold disco-leading-7">
	179	+ <div className="disco:flex disco:items-center! disco:gap-2">
	180	+ <p className="disco:text-sm disco:text-gray-400 disco:font-bold disco:leading-7">
181	181	Popular:{' '}
182	182	</p>
183		- <div className="disco-flex disco-flex-wrap disco-gap-2">
	183	+ <div className="disco:flex disco:flex-wrap disco:gap-2">
184	184	{popularTopics.map((topic, index) => (
185	185	<span
186	186	key={index}
187	187	onClick={() => handleTopicClick(topic)}
188		- className="disco-text-xs disco-bg-gray-100 disco-rounded-full disco-px-3 disco-py-1 disco-border disco-border-gray-300 disco-cursor-pointer hover:disco-bg-gray-200 disco-transition-colors disco-duration-150"
	188	+ className="disco:text-xs disco:bg-gray-100 disco:rounded-full disco:px-3 disco:py-1 disco:border disco:border-gray-300 disco:hover:border-primary-light disco:cursor-pointer disco:hover:bg-gray-200 disco:transition-colors disco:duration-150"
189	189	>
190	190	{topic}
191	191	</span>
192	192	))}