Tailwind theme reorganized

dashboard/src/components/ClustersList.tsx

@@ -86,7 +86,7 @@ function ClustersList({
  }
 
  return (
- <div className="bg-white flex flex-col p-2 rounded custom-shadow text-[#3d4048] w-48 m-5 h-fit pb-4 custom-">
+ <div className="bg-white flex flex-col p-2 rounded custom-shadow text-cluster-list w-48 m-5 h-fit pb-4 custom-">
  {!clusterMode ? (
  <>
  <label className="font-bold">Clusters</label>

dashboard/src/components/InstalledPackages/HealthStatus.tsx

@@ -23,10 +23,10 @@ const HealthStatus = ({ statusData }: Props) => {
  <span
  className={`inline-block ${
  cond.status === "Healthy"
- ? "bg-[#00c2ab]"
+ ? "bg-success"
  : cond.status === "Progressing"
- ? "bg-[#ffa800]"
- : "bg-[#ff0072]"
+ ? "bg-warning"
+ : "bg-danger"
  } w-2.5 h-2.5 rounded-sm`}
  ></span>
  </Tooltip>

dashboard/src/components/InstalledPackages/InstalledPackageCard.tsx

@@ -69,9 +69,9 @@ export default function InstalledPackageCard({
 
  const statusColor = getStatusColor(release.status as DeploymentStatus)
  const borderLeftColor: { [key: string]: string } = {
- [DeploymentStatus.DEPLOYED]: "border-l-[#1BE99A]",
+ [DeploymentStatus.DEPLOYED]: "border-l-border-deployed",
  [DeploymentStatus.FAILED]: "border-l-text-danger",
- [DeploymentStatus.PENDING]: "border-l-[#5AB0FF]",
+ [DeploymentStatus.PENDING]: "border-l-border",
  }
 
  return (
@@ -122,11 +122,11 @@ export default function InstalledPackageCard({
  <Spinner size={4} />
  )}
  </div>
- <div className="col-span-2 text-[#707583] flex flex-col items">
+ <div className="col-span-2 text-muted flex flex-col items">
  <span>CHART VERSION</span>
  {(canUpgrade || installRepoSuggestion) && (
  <div
- className="text-[#0d6efd] flex flex-row items-center gap-1 font-bold"
+ className="text-upgradable flex flex-row items-center gap-1 font-bold"
  title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
  >
  {canUpgrade && !installRepoSuggestion ? (
@@ -143,9 +143,9 @@ export default function InstalledPackageCard({
  </div>
  )}
  </div>
- <div className="col-span-1 text-[#707583]">REVISION</div>
- <div className="col-span-1 text-[#707583]">NAMESPACE</div>
- <div className="col-span-1 text-[#707583]">UPDATED</div>
+ <div className="col-span-1 text-muted">REVISION</div>
+ <div className="col-span-1 text-muted">NAMESPACE</div>
+ <div className="col-span-1 text-muted">UPDATED</div>
  </div>
  </div>
  </div>

dashboard/src/components/InstalledPackages/InstalledPackagesHeader.tsx

@@ -32,7 +32,7 @@ export default function InstalledPackagesHeader({
 
  <div className="w-1/3">
  <input
- className="border border-[#ced4da] rounded p-1 text-sm w-11/12"
+ className="border-installed-charts-filter  rounded p-1 text-sm w-11/12"
  placeholder="Filter..."
  type="text"
  onChange={(ev) => setFilterKey(ev.target.value)}

dashboard/src/components/Tabs.tsx

@@ -25,10 +25,10 @@ export default function Tabs({ tabs, selectedTab }: TabsProps) {
  {tabs.map((tab) => (
  <button
  key={tab.label}
- className={`cursor-pointer px-4 py-2 text-sm font-normal text-[#3B3D45] focus:outline-none"
+ className={`cursor-pointer px-4 py-2 text-sm font-normal text-tab-color focus:outline-none"
  ${
  selectedTab.value === tab.value &&
- "border-b-[3px] border-[#3B3D45]"
+ "border-b-[3px] border-tab-color"
  }
  `}
  onClick={() => moveTab(tab)}

dashboard/src/components/common/DropDown.tsx

@@ -86,7 +86,7 @@ function DropDown({ items }: DropDownProps) {
  isOpen: false,
  }))
  }}
- className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-[#E9ECEF] ${
+ className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-dropdown ${
  item.isDisabled
  ? "cursor-default hover:bg-transparent text-gray-400"
  : ""

dashboard/src/components/modal/AddRepositoryModal.tsx

@@ -81,7 +81,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
  bottomContent={
  <div className="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
  <button
- className="flex items-center text-white font-medium px-3 py-1.5 bg-[#1347FF] hover:bg-[#0b5ed7] focus:ring-4 focus:outline-none focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ className="flex items-center text-white font-medium px-3 py-1.5 bg-primary hover:bg-add-repo focus:ring-4 focus:outline-none focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
  onClick={addRepository}
  disabled={isLoading}
  >

dashboard/src/components/modal/InstallChartModal/ChartValues.tsx

@@ -17,7 +17,7 @@ export const ChartValues = ({
  Chart Value Reference:
  </label>
  <pre
- className="text-base bg-[#ECEFF2] p-2 rounded font-medium w-full max-h-[330px] block overflow-y-auto font-sf-mono"
+ className="text-base bg-chart-values p-2 rounded font-medium w-full max-h-[330px] block overflow-y-auto font-sf-mono"
  dangerouslySetInnerHTML={
  chartValues && !loading
  ? {

dashboard/src/components/repository/ChartViewer.tsx

@@ -20,7 +20,7 @@ function ChartViewer({ chart }: ChartViewerProps) {
  return (
  <>
  <div
- className="grid grid-cols-10 gap-3 hover:bg-[#f4f7fa] p-4 text-sm"
+ className="grid grid-cols-10 gap-3 hover:bg-body-background p-4 text-sm"
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
  >

dashboard/src/components/repository/RepositoriesList.tsx

@@ -30,7 +30,7 @@ function RepositoriesList({
 
  return (
  <>
- <div className="h-fit bg-white w-72 flex flex-col p-3 rounded custom-shadow text-[#3d4048] gap-3">
+ <div className="h-fit bg-white w-72 flex flex-col p-3 rounded custom-shadow text-dark gap-3">
  <label className="font-bold">Repositories</label>
  <div className="flex flex-col gap-1">
  {repositories?.map((repository) => (

dashboard/src/components/repository/RepositoryViewer.tsx

@@ -84,9 +84,9 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
 
  return (
  <div className="flex flex-col p-6 gap-3 bg-white custom-shadow border rounded-md">
- <span className="text-[#707583] font-bold text-xs">REPOSITORY</span>
+ <span className="text-muted font-bold text-xs">REPOSITORY</span>
  <div className="flex justify-between">
- <span className="text-[#3d4048] text-3xl font-semibold">
+ <span className="text-dark text-3xl font-semibold">
  {repository?.name}
  </span>
 
@@ -122,11 +122,11 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
  />
  </div>
  </div>
- <span className="text-[#3d4048] text-sm bg-[#D6EFFE] px-3 py-1 rounded-md self-start -mt-10">
+ <span className="text-dark text-sm bg-repository px-3 py-1 rounded-md self-start -mt-10">
  URL: <span className="font-bold">{repository?.url}</span>
  </span>
 
- <div className="bg-[#ECEFF2] grid grid-cols-10 text-xs font-bold p-2 px-4 mt-4 rounded-md">
+ <div className="bg-secondary grid grid-cols-10 text-xs font-bold p-2 px-4 mt-4 rounded-md">
  <span className="col-span-2">CHART NAME</span>
  <span className="col-span-6">DESCRIPTION</span>
  <span className="col-span-1 text-center">VERSION</span>

dashboard/src/components/revision/RevisionDetails.tsx

@@ -304,7 +304,7 @@ export default function RevisionDetails({
 
 function RevisionTag({ caption, text }: RevisionTagProps) {
  return (
- <span className="bg-[#d6effe] p-1 rounded px-2 text-sm">
+ <span className="bg-revision p-1 rounded px-2 text-sm">
  <span>{caption}:</span>
  <span className="font-bold"> {text}</span>
  </span>

dashboard/src/components/revision/RevisionDiff.tsx

@@ -134,7 +134,7 @@ function RevisionDiff({
 
  return (
  <div>
- <div className="flex mb-3 p-2 border border-[#DCDDDF] flex-row items-center justify-between w-full bg-white rounded">
+ <div className="flex mb-3 p-2 border border-revision flex-row items-center justify-between w-full bg-white rounded">
  <div className="flex items-center">
  <input
  checked={viewMode === "view"}

dashboard/src/components/revision/RevisionsList.tsx

@@ -43,16 +43,16 @@ export default function RevisionsList({
  key={release.revision}
  className={`flex flex-col border rounded-md mx-5 p-2 gap-4 cursor-pointer ${
  release.revision === selectedRevision
- ? "border-[#007bff] bg-white"
- : "border-[#DCDDDF] bg-[#F4F7FA]"
+ ? "border-revision-dark bg-white"
+ : "border-revision-light bg-body-background"
  }`}
  >
  <div className="flex row justify-between">
  <StatusLabel status={release.status} isRollback={isRollback} />
  <span className="font-bold">#{release.revision}</span>
  </div>
  <div
- className="self-end text-[#707583] text-xs flex flex-wrap gap-1"
+ className="self-end text-muted text-xs flex flex-wrap gap-1"
  style={{
  width: "100%",
  display: "flex",

dashboard/src/index.css

@@ -2,9 +2,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 body {
- color: #3d4048;
+ color: theme("colors.body");
  font-family: "Roboto", serif;
 }
 
@@ -53,6 +52,7 @@ code {
  font-family: SFMono-Regular, Menlo;
  font-size: 12.5px;
 }
+
 #portal {
  top: 0;
  width: 40%;

dashboard/src/layout/Header.tsx

@@ -50,7 +50,7 @@ export default function Header() {
  const getBtnStyle = (identifier: string) =>
  `text-md py-2.5 px-5 ${
  location.pathname.includes(`/${identifier}`)
- ? " text-[#1347FF] rounded-sm bg-[#EBEFFF]"
+ ? " text-primary rounded-sm bg-header-install"
  : ""
  }`
 
@@ -142,7 +142,7 @@ export default function Header() {
  <div className="flex flex-col">
  <a
  href="https://komodor.com/helm-dash/"
- className="text-[#0d6efd] font-bold"
+ className="text-link-color font-bold"
  target="_blank"
  rel="noopener noreferrer"
  >
@@ -151,7 +151,7 @@ export default function Header() {
  <BsBoxArrowUpRight className="w-[14px] h-[14px]" />
  </div>
  </a>
- <label className="text-[#707583]">
+ <label className="text-muted">
  Auth & RBAC, k8s events, troubleshooting and more
  </label>
  </div>

dashboard/src/pages/Revision.tsx

@@ -50,7 +50,7 @@ function Revision() {
  return (
  <div className="flex">
  <div className="flex flex-col gap-2 w-1/6 min-h-screen bg-[#E8EDF2] pb-4">
- <label className="mt-5 mx-5 text-sm text-[#3D4048] font-semibold">
+ <label className="mt-5 mx-5 text-sm text-dark font-semibold">
  Revisions
  </label>
  {isLoadingHistory ? (
@@ -63,7 +63,7 @@ function Revision() {
  )}
  </div>
 
- <div className="w-5/6 min-h-screen bg-[#F4F7FA] pb-4">
+ <div className="w-5/6 min-h-screen bg-body-background pb-4">
  {isLoadingHistory ? (
  <div className=" p-4">
  <Spinner />