fix: cad project card feedback

chanzuckerberg · Jun 9, 2022 · b085787 · b085787
1 parent b4a4695
commit b085787
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/.storybook/recipes/ProjectCard/ProjectCard.module.css b/.storybook/recipes/ProjectCard/ProjectCard.module.css
@@ -12,6 +12,10 @@
   transition: all var(--eds-anim-fade-quick) var(--eds-anim-fade-quick);
 }
 
+.project-card__header.project-card__header {
+  margin-right: var(--eds-size-1);
+}
+
 .project-card__body {
   flex-direction: row;
   gap: var(--eds-);
@@ -24,6 +28,15 @@
   justify-content: center;
 }
 
+/* .project-card__title {
+  min-height: var(--eds-size-6);
+} */
+
+.project-card__menu-button {
+  padding-top: var(--eds-size-2);
+  padding-bottom: var(--eds-size-2);
+}
+
 .project-card__meta {
   @mixin eds-theme-typography-body-text-xs;
   color: var(--eds-theme-color-text-neutral-subtle);

diff --git a/.storybook/recipes/ProjectCard/ProjectCard.tsx b/.storybook/recipes/ProjectCard/ProjectCard.tsx
@@ -72,7 +72,7 @@ export const ProjectCard = ({
       orientation="horizontal"
       {...other}
     >
-      <CardHeader>
+      <CardHeader className={styles['project-card__header']}>
         <NumberIcon
           aria-label={numberAriaLabel}
           className={styles['project-card__number']}

diff --git a/src/components/ButtonDropdown/ButtonDropdown.module.css b/src/components/ButtonDropdown/ButtonDropdown.module.css
@@ -8,7 +8,8 @@
  * 1) Combination of a trigger and a dropdownmenu
  */
 .button-dropdown {
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   position: relative;
 }
 

diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -42,12 +42,6 @@ a.card {
 .card--raised {
   box-shadow: var(--eds-box-shadow-md);
   border-color: var(--eds-theme-color-background-neutral-default);
-  transition: border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-  &:hover,
-  &:focus {
-    border-color: var(--eds-theme-color-border-neutral-subtle);
-  }
 }
 
 /**

diff --git a/src/components/DragDrop/DragDrop.module.css b/src/components/DragDrop/DragDrop.module.css
@@ -127,19 +127,24 @@
   position: relative;
   margin-bottom: var(--eds-size-1); /* 3 */
   background-color: var(--eds-color-neutral-100);
-  border-radius: var(--eds-border-radius-md);
+  border-radius: var(--eds-border-radius-lg);
   box-shadow: var(--eds-box-shadow-sm);
+  border: var(--eds-theme-border-width) solid transparent;
+  transition: border-color var(--eds-anim-fade-quick) var(--eds-anim-ease);
 
   &:last-child {
     margin-bottom: 0;
   }
 
+  &:hover {
+    border-color: var(--eds-theme-color-border-neutral-subtle);
+  }
+
   /**
   * 1) The unstyled variant removes all styling from items.
   */
   .drag-drop--unstyled & {
     background-color: unset;
-    border-radius: unset;
     box-shadow: unset;
   }
 }
@@ -173,6 +178,7 @@
   height: calc(100% - 2px);
   padding: var(--eds-size-1);
   z-index: var(--eds-z-index-500);
+  border-radius: var(--eds-border-radius-lg);
   background: var(--eds-theme-color-background-neutral-default);
   transition: opacity var(--eds-anim-fade-quick) var(--eds-anim-ease);