style: fix task card, menu and dropdown styles to be uniform [DET-3286]…

… (#723)
determined-ai · Jun 17, 2020 · bdf0036 · bdf0036
1 parent 112ed39
commit bdf0036
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/webui/react/src/components/TaskActionDropdown.tsx b/webui/react/src/components/TaskActionDropdown.tsx
@@ -51,12 +51,12 @@ const TaskActionDropdown: React.FC<Props> = ({ 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,20 +69,20 @@ const TaskActionDropdown: React.FC<Props> = ({ 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),
             state: RunState.Paused,
           });
           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<Props> = ({ task }: Props) => {
 
   const menu = (
     <Menu onClick={handleMenuClick}>
-      {isKillable && <Menu.Item key="kill">Kill</Menu.Item>}
-      {isArchivable && <Menu.Item key="archive">Archive</Menu.Item>}
-      {isPausable && <Menu.Item key="pause">Pause</Menu.Item>}
       {isResumable && <Menu.Item key="activate">Activate</Menu.Item>}
+      {isPausable && <Menu.Item key="pause">Pause</Menu.Item>}
+      {isArchivable && <Menu.Item key="archive">Archive</Menu.Item>}
       {isCancelable && <Menu.Item key="cancel">Cancel</Menu.Item>}
+      {isKillable && <Menu.Item key="kill">Kill</Menu.Item>}
     </Menu>
   );
 

diff --git 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
@@ -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
@@ -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',