Fix top margin on pill bubble to match other bubbles

code-dot-org · Apr 25, 2018 · a280547 · a280547
1 parent b8ad920
commit a280547
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/apps/src/templates/progress/ProgressBubbleSet.jsx b/apps/src/templates/progress/ProgressBubbleSet.jsx
@@ -31,8 +31,8 @@ const styles = {
     top: (DIAMOND_DOT_SIZE + 4 + 6 - 10) / 2,
   },
   backgroundPill: {
-    // pill has height of 18, border of 2, padding of 6
-    top: (18 + 4 + 12 - 10) / 2,
+    // pill has height of 18, border of 2, padding of 6, margin of 3
+    top: (18 + 4 + 12 + 6 - 10) / 2,
   },
   backgroundFirst: {
     left: 15

diff --git a/apps/src/templates/progress/ProgressBubbleSet.story.jsx b/apps/src/templates/progress/ProgressBubbleSet.story.jsx
@@ -66,5 +66,17 @@ export default storybook => {
           />
         )
       },
+      {
+        name:'only level is unplugged',
+        description: 'Should get a pill for unplugged',
+        story: () => (
+          <ProgressBubbleSet
+            levels={[
+              fakeLevel({ isUnplugged: true }),
+            ]}
+            disabled={false}
+          />
+        )
+      },
     ]);
 };
diff --git a/apps/src/templates/progress/ProgressPill.jsx b/apps/src/templates/progress/ProgressPill.jsx
@@ -24,6 +24,8 @@ const styles = {
     paddingBottom: 6,
     minWidth: 70,
     lineHeight: '18px',
+    marginTop: 3,
+    marginBottom: 3,
   },
   text: {
     display: 'inline-block',