diff --git a/kinode/packages/app_store/ui/src/index.css b/kinode/packages/app_store/ui/src/index.css index affa625f..0ba6cc81 100644 --- a/kinode/packages/app_store/ui/src/index.css +++ b/kinode/packages/app_store/ui/src/index.css @@ -329,6 +329,7 @@ td { padding: 1rem; background: light-dark(var(--bg-light), var(--bg-dark)); margin: 0 1vw; + border-radius: var(--border-radius); } .app-info { @@ -996,10 +997,6 @@ td { border: 1px solid transparent; } -.update-item.error { - border-color: var(--red); -} - .update-header { display: flex; justify-content: space-between; @@ -1020,269 +1017,12 @@ td { font-weight: 500; } -.error-badge { - color: var(--red); -} - -.update-summary { - display: flex; - align-items: center; - gap: 0.75rem; - margin-left: 0.75rem; - font-size: 0.9rem; -} - -.error-count { - color: var(--red); - font-weight: 500; -} - -.manifest-badge { - color: var(--orange); - font-weight: 500; -} - .update-actions { display: flex; gap: 0.5rem; } -.action-button { - display: flex; - align-items: center; - gap: 0.5rem; - background: none; - border: none; - padding: 0.5rem 0.75rem; - border-radius: var(--border-radius); - cursor: pointer; - color: var(--gray); - transition: all 0.2s ease; - font-size: 0.9rem; -} - -.action-button.retry { - border: 1px solid var(--blue); - color: var(--blue); -} - -.action-button.retry:hover { - background-color: var(--blue); - color: white; -} - -.action-button.clear { - color: var(--red); -} - -.action-button.clear:hover { - background-color: rgba(229, 62, 62, 0.1); -} - -.update-details { - padding: 1rem 1rem 1rem 2.75rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); - background-color: rgba(0, 0, 0, 0.1); -} - -.version-info { - color: var(--gray); - font-size: 0.9rem; - margin-bottom: 0.75rem; -} - -.manifest-info { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--orange); - font-size: 0.9rem; - margin-bottom: 0.75rem; -} - -.error-list { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.error-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - color: var(--red); - font-size: 0.9rem; - padding: 0.5rem; - background-color: rgba(229, 62, 62, 0.1); - border-radius: var(--border-radius); -} - -.error-icon { - flex-shrink: 0; - margin-top: 0.2rem; -} - -/* Updates Required Section */ -.updates-required-section { - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--border-radius); - padding: 1.5rem; - margin-bottom: 2rem; -} - -.updates-required-section h2 { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--red); - margin-bottom: 1rem; -} - -.updates-required-section .warning-icon { - color: var(--red); -} - -.update-items { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.update-item { - background: var(--background); - border: 1px solid var(--border); - border-radius: var(--border-radius); - padding: 1rem; -} - -.update-item.failed { - border-left: 4px solid var(--red); -} - -.update-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -.package-name { - font-weight: 600; - font-size: 1.1rem; -} - -.version { - color: var(--text-secondary); - font-size: 0.9rem; -} - -.error-message { - background: var(--surface); - padding: 0.75rem; - border-radius: var(--border-radius); - margin: 0.5rem 0; - color: var(--text-secondary); - display: flex; - align-items: center; - gap: 1rem; -} - -.action-buttons { - display: flex; - gap: 0.5rem; - margin-top: 1rem; -} - -.retry-btn, -.review-caps-btn, -.details-btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: var(--border-radius); - font-size: 0.9rem; - cursor: pointer; - transition: all 0.2s; -} - -.retry-btn, -.review-caps-btn { - background: var(--orange); - color: var(--text-light); -} - -.details-btn { - background: transparent; - border: 1px solid var(--border); - color: var(--text); -} - -.retry-btn:hover, -.review-caps-btn:hover { - background: var(--orange-dark); -} - -.details-btn:hover { - background: var(--surface); -} - -.timestamp { - margin-top: 0.5rem; - font-size: 0.8rem; - color: var(--text-secondary); -} - -/* Updates section */ -.updates-section { - margin-bottom: 2rem; -} - -.section-title { - color: var(--orange); - font-size: 1.25rem; - margin-bottom: 1rem; -} - -.updates-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.update-item { - background-color: light-dark(var(--surface-light), var(--surface-dark)); - border-radius: var(--border-radius); - overflow: hidden; -} - -.update-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75rem 1rem; - cursor: pointer; - transition: background-color 0.2s; -} - -.update-header:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -.update-title { - display: flex; - align-items: center; - gap: 0.5rem; - font-weight: 500; -} - -.update-actions { - display: flex; - gap: 0.5rem; -} - -.action-button { +.update-actions .action-button { background: none; border: none; cursor: pointer; @@ -1292,11 +1032,11 @@ td { align-items: center; } -.action-button.retry:hover { +.update-actions .action-button.retry:hover { color: var(--blue); } -.action-button.clear:hover { +.update-actions .action-button.clear:hover { color: var(--red); } @@ -1421,13 +1161,11 @@ td { color: light-dark(var(--text-secondary), var(--text)); } - - .file-explorer { border: 1px solid light-dark(var(--gray), var(--surface-dark)); - border-radius: 0.5rem; - overflow: hidden; - background-color: light-dark(var(--surface-light), var(--surface-dark)); + padding: 1rem; + border-radius: var(--border-radius); + background: light-dark(var(--surface-light), var(--surface-dark)); } .file-explorer h3 { @@ -1440,6 +1178,8 @@ td { .downloads-table { width: 100%; + border-radius: var(--border-radius); + overflow: hidden; } .downloads-table th { @@ -1462,4 +1202,11 @@ td { .downloads-table tr.directory:hover { background-color: light-dark(var(--surface-light), var(--surface-dark)); cursor: pointer; +} + +.updates-section { + background: light-dark(var(--surface-light), var(--surface-dark)); + padding: 1rem; + margin-bottom: 1rem; + border-radius: var(--border-radius); } \ No newline at end of file