paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-11-20 22:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui improvements on the toggle

Browse Source
This commit is contained in:
Muhammad Ibrahim
2025-11-17 01:18:20 +00:00
parent 539bbb7fbc
commit d2b36f36c9
15 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/InlineMultiGroupEdit.jsx
View File

@@ -203,7 +203,7 @@ const InlineMultiGroupEdit = ({
className="mr-2 h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded" className="mr-2 h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
/> />
<span <span
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white" className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium text-white"
style={{ backgroundColor: option.color }} style={{ backgroundColor: option.color }}
> >
{option.name} {option.name}
@@ -250,7 +250,7 @@ const InlineMultiGroupEdit = ({
return ( return (
<div className={`flex items-center gap-1 group ${className}`}> <div className={`flex items-center gap-1 group ${className}`}>
{displayGroups.length === 0 ? ( {displayGroups.length === 0 ? (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800"> <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-secondary-100 text-secondary-800">
Ungrouped Ungrouped
</span> </span>
) : ( ) : (
@@ -258,7 +258,7 @@ const InlineMultiGroupEdit = ({
{displayGroups.map((group) => ( {displayGroups.map((group) => (
<span <span
key={group.id} key={group.id}
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white" className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium text-white"
style={{ backgroundColor: group.color }} style={{ backgroundColor: group.color }}
> >
{group.name} {group.name}

2
frontend/src/components/InlineToggle.jsx
View File

@@ -56,7 +56,7 @@ const InlineToggle = ({
type="button" type="button"
onClick={handleToggle} onClick={handleToggle}
disabled={isLoading} disabled={isLoading}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${ className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
value value
? "bg-primary-600 dark:bg-primary-500" ? "bg-primary-600 dark:bg-primary-500"
: "bg-secondary-200 dark:bg-secondary-600" : "bg-secondary-200 dark:bg-secondary-600"

2
frontend/src/components/settings/AgentUpdatesTab.jsx
View File

@@ -324,7 +324,7 @@ const AgentUpdatesTab = () => {
key={m} key={m}
type="button" type="button"
onClick={() => handleInputChange("updateInterval", m)} onClick={() => handleInputChange("updateInterval", m)}
className={`px-3 py-1.5 rounded-full text-xs font-medium border ${ className={`px-3 py-1.5 rounded-md text-xs font-medium border ${
formData.updateInterval === m formData.updateInterval === m
? "bg-primary-600 text-white border-primary-600" ? "bg-primary-600 text-white border-primary-600"
: "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600" : "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600"

2
frontend/src/components/settings/RolesTab.jsx
View File

@@ -318,7 +318,7 @@ const RolePermissionsCard = ({
{role.role} {role.role}
</h3> </h3>
{isBuiltInRole && ( {isBuiltInRole && (
<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800"> <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800">
Built-in Role Built-in Role
</span> </span>
)} )}

4
frontend/src/components/settings/UsersTab.jsx
View File

@@ -179,7 +179,7 @@ const UsersTab = () => {
{user.username} {user.username}
</div> </div>
{user.id === currentUser?.id && ( {user.id === currentUser?.id && (
<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
You You
</span> </span>
)} )}
@@ -195,7 +195,7 @@ const UsersTab = () => {
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<span <span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${ className={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium ${
user.role === "admin" user.role === "admin"
? "bg-primary-100 text-primary-800" ? "bg-primary-100 text-primary-800"
: user.role === "host_manager" : user.role === "host_manager"

6
frontend/src/pages/HostDetail.jsx
View File

@@ -495,7 +495,7 @@ const HostDetail = () => {
{getStatusText(isStale, host.stats.outdated_packages > 0)} {getStatusText(isStale, host.stats.outdated_packages > 0)}
</div> </div>
{host.needs_reboot && ( {host.needs_reboot && (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"> <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<RotateCcw className="h-3 w-3" /> <RotateCcw className="h-3 w-3" />
Reboot Required Reboot Required
</span> </span>
@@ -856,7 +856,7 @@ const HostDetail = () => {
toggleAutoUpdateMutation.mutate(!host.auto_update) toggleAutoUpdateMutation.mutate(!host.auto_update)
} }
disabled={toggleAutoUpdateMutation.isPending} disabled={toggleAutoUpdateMutation.isPending}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${ className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
host.auto_update host.auto_update
? "bg-primary-600 dark:bg-primary-500" ? "bg-primary-600 dark:bg-primary-500"
: "bg-secondary-200 dark:bg-secondary-600" : "bg-secondary-200 dark:bg-secondary-600"
@@ -1593,7 +1593,7 @@ const HostDetail = () => {
? "Disable Docker integration" ? "Disable Docker integration"
: "Enable Docker integration" : "Enable Docker integration"
} }
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${ className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
integrationsData?.data?.integrations?.docker integrationsData?.data?.integrations?.docker
? "bg-primary-600 dark:bg-primary-500" ? "bg-primary-600 dark:bg-primary-500"
: "bg-secondary-200 dark:bg-secondary-600" : "bg-secondary-200 dark:bg-secondary-600"

8
frontend/src/pages/Hosts.jsx
View File

@@ -1071,7 +1071,7 @@ const Hosts = () => {
const wsStatus = wsStatusMap[host.api_id]; const wsStatus = wsStatusMap[host.api_id];
if (!wsStatus) { if (!wsStatus) {
return ( return (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"> <span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
<div className="w-2 h-2 bg-gray-400 rounded-full mr-1.5"></div> <div className="w-2 h-2 bg-gray-400 rounded-full mr-1.5"></div>
Unknown Unknown
</span> </span>
@@ -1079,7 +1079,7 @@ const Hosts = () => {
} }
return ( return (
<span <span
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
wsStatus.connected wsStatus.connected
? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200" : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
@@ -1110,12 +1110,12 @@ const Hosts = () => {
return ( return (
<div className="flex justify-center"> <div className="flex justify-center">
{host.needs_reboot ? ( {host.needs_reboot ? (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"> <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<RotateCcw className="h-3 w-3" /> <RotateCcw className="h-3 w-3" />
Required Required
</span> </span>
) : ( ) : (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
<CheckCircle className="h-3 w-3" /> <CheckCircle className="h-3 w-3" />
No No
</span> </span>

2
frontend/src/pages/PackageDetail.jsx
View File

@@ -426,7 +426,7 @@ const PackageDetail = () => {
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
{host.needsReboot ? ( {host.needsReboot ? (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"> <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<RotateCcw className="h-3 w-3" /> <RotateCcw className="h-3 w-3" />
Required Required
</span> </span>

8
frontend/src/pages/Profile.jsx
View File

@@ -206,7 +206,7 @@ const Profile = () => {
</p> </p>
<div className="mt-2"> <div className="mt-2">
<span <span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${ className={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium ${
user?.role === "admin" user?.role === "admin"
? "bg-primary-100 text-primary-800" ? "bg-primary-100 text-primary-800"
: user?.role === "host_manager" : user?.role === "host_manager"
@@ -400,7 +400,7 @@ const Profile = () => {
<button <button
type="button" type="button"
onClick={toggleTheme} onClick={toggleTheme}
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${ className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
isDark ? "bg-primary-600" : "bg-secondary-200" isDark ? "bg-primary-600" : "bg-secondary-200"
}`} }`}
role="switch" role="switch"
@@ -1345,12 +1345,12 @@ const SessionsTab = () => {
{session.device_info?.os} {session.device_info?.os}
</h4> </h4>
{session.is_current_session && ( {session.is_current_session && (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200"> <span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
Current Session Current Session
</span> </span>
)} )}
{session.tfa_remember_me && ( {session.tfa_remember_me && (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200"> <span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200">
Remembered Remembered
</span> </span>
)} )}

2
frontend/src/pages/RepositoryDetail.jsx
View File

@@ -610,7 +610,7 @@ const RepositoryDetail = () => {
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
{hostRepo.hosts.needs_reboot ? ( {hostRepo.hosts.needs_reboot ? (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"> <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<RotateCcw className="h-3 w-3" /> <RotateCcw className="h-3 w-3" />
Required Required
</span> </span>

2
frontend/src/pages/Settings.jsx
View File

@@ -917,7 +917,7 @@ const Settings = () => {
key={m} key={m}
type="button" type="button"
onClick={() => handleInputChange("updateInterval", m)} onClick={() => handleInputChange("updateInterval", m)}
className={`px-3 py-1.5 rounded-full text-xs font-medium border ${ className={`px-3 py-1.5 rounded-md text-xs font-medium border ${
formData.updateInterval === m formData.updateInterval === m
? "bg-primary-600 text-white border-primary-600" ? "bg-primary-600 text-white border-primary-600"
: "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600" : "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600"

2
frontend/src/pages/settings/AlertChannels.jsx
View File

@@ -32,7 +32,7 @@ const AlertChannels = () => {
including email, Slack, Discord, and webhooks. including email, Slack, Discord, and webhooks.
</p> </p>
<div className="mt-3"> <div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200"> <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
In Development In Development
</span> </span>
</div> </div>

2
frontend/src/pages/settings/Notifications.jsx
View File

@@ -33,7 +33,7 @@ const Notifications = () => {
triggers. triggers.
</p> </p>
<div className="mt-3"> <div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200"> <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
In Development In Development
</span> </span>
</div> </div>

2
frontend/src/pages/settings/PatchManagement.jsx
View File

@@ -34,7 +34,7 @@ const PatchManagement = () => {
patch policies to give you granular control over updates. patch policies to give you granular control over updates.
</p> </p>
<div className="mt-3"> <div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200"> <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
In Development In Development
</span> </span>
</div> </div>

2
frontend/src/pages/settings/SettingsMetrics.jsx
View File

@@ -212,7 +212,7 @@ const SettingsMetrics = () => {
toggleMetricsMutation.mutate(!metricsSettings?.metrics_enabled) toggleMetricsMutation.mutate(!metricsSettings?.metrics_enabled)
} }
disabled={toggleMetricsMutation.isPending} disabled={toggleMetricsMutation.isPending}
className={`ml-4 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${ className={`ml-4 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
metricsSettings?.metrics_enabled metricsSettings?.metrics_enabled
? "bg-primary-600" ? "bg-primary-600"
: "bg-secondary-200 dark:bg-secondary-700" : "bg-secondary-200 dark:bg-secondary-700"