{Icon}
{title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
{message}
{onRetry && (
diff --git a/src/components/Placeholder/placeholder.css b/src/components/Placeholder/placeholder.css
index d954518..9871de2 100644
--- a/src/components/Placeholder/placeholder.css
+++ b/src/components/Placeholder/placeholder.css
@@ -1,5 +1,6 @@
.placeholder {
text-align: center;
+ margin: auto;
}
.placeholder-icon {
@@ -12,6 +13,10 @@
display: inline-block;
}
+.placeholder-subtitle {
+ margin-bottom: 0.25rem;
+}
+
.placeholder-button {
margin: 0.75rem auto 0;
}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index e46ead7..653e31a 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -55,7 +55,7 @@ export function Select({
onMouseEnter,
onMouseLeave,
style,
- className,
+ className = "",
defaultValue,
value,
}: Props) {
diff --git a/src/components/SimpleText/SimpleText.tsx b/src/components/SimpleText/SimpleText.tsx
index 9d8cd11..813b832 100644
--- a/src/components/SimpleText/SimpleText.tsx
+++ b/src/components/SimpleText/SimpleText.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
import "./simpleText.css";
interface CustomStyleCSS extends CSSProperties {
@@ -17,7 +17,7 @@ type Props = {
className?: string;
- children: string;
+ children: string | ReactNode;
/**
* Apply custom css variables.
diff --git a/src/components/SpaceAllocation/spaceAllocation.css b/src/components/SpaceAllocation/spaceAllocation.css
index 5027b40..88d6ba1 100644
--- a/src/components/SpaceAllocation/spaceAllocation.css
+++ b/src/components/SpaceAllocation/spaceAllocation.css
@@ -33,9 +33,30 @@
background-color: var(--codex-color);
}
+.nodeSpaceAllocation-quota-3 {
+ background-color: #cd853f;
+}
+
+.nodeSpaceAllocation-quota-4 {
+ background-color: #d2b48c;
+}
+
+.nodeSpaceAllocation-quota-5 {
+ background-color: #ffdab9;
+}
+
+.nodeSpaceAllocation-quota-6 {
+ background-color: #ffb74d;
+}
+
+.nodeSpaceAllocation-quota-7 {
+ background-color: #9c27b0;
+}
+
.nodeSpaceAllocation-legend {
display: flex;
gap: 0.75rem;
+ flex-wrap: wrap;
}
.nodeSpaceAllocation-legendItem {
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index 21347ff..fa67313 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -71,7 +71,7 @@ export function Stepper({
state,
style,
dispatch,
- className,
+ className = "",
backLabel = "Back",
nextLabel = "Next",
duration = 500,
diff --git a/src/components/Stepper/useStepperReducer.tsx b/src/components/Stepper/useStepperReducer.tsx
index c273a5a..16121bd 100644
--- a/src/components/Stepper/useStepperReducer.tsx
+++ b/src/components/Stepper/useStepperReducer.tsx
@@ -37,6 +37,10 @@ export type StepperAction =
| {
type: "toggle-next";
isNextEnable: boolean;
+ }
+ | {
+ type: "toggle-back";
+ isBackEnable: boolean;
};
export type StepperBodyProps = {
@@ -48,73 +52,57 @@ export type StepperBodyProps = {
* The storage key allows to save the step when the user
* move from a step to another.
*/
-const reducer =
- (steps: number) => (state: StepperState, action: StepperAction) => {
- switch (action.type) {
- case "close": {
- return {
- ...state,
- step: 0,
- isNextDisable: true,
- progress: false,
- open: false,
- isBackEnable: true,
- };
- }
-
- case "open": {
- return {
- ...state,
- step: 0,
- isNextDisable: true,
- progress: false,
- open: true,
- isBackEnable: true,
- };
- }
-
- case "loading": {
- if (action.step >= steps) {
- return {
- ...state,
- step: 0,
- isNextDisable: true,
- progress: false,
- open: false,
- isBackEnable: true,
- };
- }
-
- // WebStorage.set(storageKey, action.step);
-
- return {
- ...state,
- step: action.step,
- isNextDisable: true,
- progress: true,
- isBackEnable: action.step != steps - 1,
- };
- }
-
- case "next": {
- return {
- ...state,
- progress: false,
- };
- }
-
- case "toggle-next": {
- return {
- ...state,
- isNextEnable: action.isNextEnable,
- };
- }
+const reducer = () => (state: StepperState, action: StepperAction) => {
+ switch (action.type) {
+ case "close": {
+ return {
+ ...state,
+ open: false,
+ };
}
- };
-export function useStepperReducer(steps: number) {
+ case "open": {
+ return {
+ ...state,
+ open: true,
+ };
+ }
+
+ case "loading": {
+ return {
+ ...state,
+ step: action.step,
+ progress: true,
+ };
+ }
+
+ case "next": {
+ return {
+ ...state,
+ progress: false,
+ step: action.step,
+ };
+ }
+
+ case "toggle-next": {
+ return {
+ ...state,
+ isNextEnable: action.isNextEnable,
+ };
+ }
+
+ case "toggle-back": {
+ return {
+ ...state,
+ isBackEnable: action.isBackEnable,
+ };
+ }
+ }
+};
+
+export function useStepperReducer() {
const [state, dispatch] = useReducer
>(
- reducer(steps),
+ reducer(),
{
step: 0,
isNextEnable: false,
diff --git a/src/components/Table/Table.css b/src/components/Table/Table.css
index e26e705..a423c87 100644
--- a/src/components/Table/Table.css
+++ b/src/components/Table/Table.css
@@ -39,6 +39,11 @@
.table-tbodyTr {
border-bottom: 1px solid var(--codex-border-color);
+ transition: background-color 0.35s;
+}
+
+.table-tbodyTr:hover {
+ background-color: var(--codex-background-light);
}
.table-tbodyTd {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 4ca3071..2272fd3 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -18,7 +18,7 @@ type Props = {
className?: string;
};
-export function Table({ headers, cells, className }: Props) {
+export function Table({ headers, cells, className = "" }: Props) {
return (
@@ -34,15 +34,11 @@ export function Table({ headers, cells, className }: Props) {
{cells.map((row, index) => (
- {headers.map((header, idx) => {
- const cell = row[idx];
-
- return (
- |
- {cell}
- |
- );
- })}
+ {headers.map((header, idx) => (
+
+ {row[idx]}
+ |
+ ))}
))}