diff --git a/webui/react/src/components/TaskActionDropdown.tsx b/webui/react/src/components/TaskActionDropdown.tsx index d79cc8832d4..2cbc2253897 100644 --- a/webui/react/src/components/TaskActionDropdown.tsx +++ b/webui/react/src/components/TaskActionDropdown.tsx @@ -51,12 +51,12 @@ const TaskActionDropdown: React.FC = ({ task }: Props) => { params.domEvent.stopPropagation(); try { switch (params.key) { // Cases should match menu items. - case 'kill': - await killTask(task); - if (task.type === TaskType.Experiment) { - // We don't provide immediate updates for command types yet. - await updateExperimentLocally(exp => ({ ...exp, state: RunState.StoppingCanceled })); - } + case 'activate': + await setExperimentState({ + experimentId: parseInt(task.id), + state: RunState.Active, + }); + await updateExperimentLocally(exp => ({ ...exp, state: RunState.Active })); break; case 'archive': await archiveExperiment(parseInt(task.id), !task.archived); @@ -69,6 +69,13 @@ const TaskActionDropdown: React.FC = ({ task }: Props) => { }); await updateExperimentLocally(exp => ({ ...exp, state: RunState.StoppingCanceled })); break; + case 'kill': + await killTask(task); + if (task.type === TaskType.Experiment) { + // We don't provide immediate updates for command types yet. + await updateExperimentLocally(exp => ({ ...exp, state: RunState.StoppingCanceled })); + } + break; case 'pause': await setExperimentState({ experimentId: parseInt(task.id), @@ -76,13 +83,6 @@ const TaskActionDropdown: React.FC = ({ task }: Props) => { }); await updateExperimentLocally(exp => ({ ...exp, state: RunState.Paused })); break; - case 'activate': - await setExperimentState({ - experimentId: parseInt(task.id), - state: RunState.Active, - }); - await updateExperimentLocally(exp => ({ ...exp, state: RunState.Active })); - break; } } catch (e) { handleError({ @@ -100,11 +100,11 @@ const TaskActionDropdown: React.FC = ({ task }: Props) => { const menu = ( - {isKillable && Kill} - {isArchivable && Archive} - {isPausable && Pause} {isResumable && Activate} + {isPausable && Pause} + {isArchivable && Archive} {isCancelable && Cancel} + {isKillable && Kill} ); diff --git a/webui/react/src/components/TaskCard.module.scss b/webui/react/src/components/TaskCard.module.scss index 368f8b466bf..86bb52336b9 100644 --- a/webui/react/src/components/TaskCard.module.scss +++ b/webui/react/src/components/TaskCard.module.scss @@ -6,6 +6,7 @@ border-width: var(--theme-sizes-border-width); color: var(--theme-colors-monochrome-5); display: block; + overflow: hidden; overflow-wrap: break-word; padding: var(--theme-sizes-layout-big); padding-right: 0; diff --git a/webui/react/src/styles/antd.scss b/webui/react/src/styles/antd.scss index cb97b10e376..8431b06de06 100644 --- a/webui/react/src/styles/antd.scss +++ b/webui/react/src/styles/antd.scss @@ -1,4 +1,11 @@ html { + /* Breadcrumb */ + + .ant-breadcrumb { + align-items: center; + display: flex; + } + /* Button */ .ant-btn[disabled], @@ -13,6 +20,14 @@ html { justify-content: center; } + /* Dropdown */ + + .ant-dropdown-menu { + border: solid var(--theme-sizes-border-width) var(--theme-colors-monochrome-12); + border-radius: var(--theme-sizes-border-radius); + box-shadow: var(--theme-shadow); + } + /* Form */ .ant-form-item-explain { @@ -54,12 +69,10 @@ html { .ant-select.ant-select-open > .ant-select-arrow { transform: rotate(180deg); } - - /* Breadcrumb */ - - .ant-breadcrumb { - align-items: center; - display: flex; + .ant-select-dropdown { + border: solid var(--theme-sizes-border-width) var(--theme-colors-monochrome-12); + border-radius: var(--theme-sizes-border-radius); + box-shadow: var(--theme-shadow); } /* Space */ diff --git a/webui/react/src/themes.ts b/webui/react/src/themes.ts index d194a9ec68d..1dc6adce0f4 100644 --- a/webui/react/src/themes.ts +++ b/webui/react/src/themes.ts @@ -101,7 +101,7 @@ export const lightTheme: Theme = { family: 'Objektiv Mk3', }, outline: '0 0 0.4rem 0 #009bde', - shadow: '0.2rem 0.2rem 0.4rem 0 #cccccc', + shadow: '0.2rem 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.25)', sizes: { border: { radius: '0.4rem',