Vertically center elements in TodoFooters

microsoft · Mar 5, 2019 · 5ce0dba · 5ce0dba
1 parent 122ce81
commit 5ce0dba
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/step2-03/demo/src/components/TodoFooter.tsx b/step2-03/demo/src/components/TodoFooter.tsx
@@ -11,7 +11,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
 
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>

diff --git a/step2-03/exercise/src/components/TodoFooter.tsx b/step2-03/exercise/src/components/TodoFooter.tsx
@@ -14,7 +14,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   // - try it with an object: styles={{ ... }}
   // - try it with a function: styles={props => ({ ... })}
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>

diff --git a/step2-04/demo/src/components/TodoFooter.tsx b/step2-04/demo/src/components/TodoFooter.tsx
@@ -7,7 +7,7 @@ export const TodoFooter = () => {
   const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length;
 
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>

diff --git a/step2-04/exercise/src/components/TodoFooter.tsx b/step2-04/exercise/src/components/TodoFooter.tsx
@@ -11,7 +11,7 @@ export const TodoFooter = () => {
   const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>

diff --git a/step2-06/demo/src/components/TodoFooter.tsx b/step2-06/demo/src/components/TodoFooter.tsx
@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>

diff --git a/step2-06/exercise/src/components/TodoFooter.tsx b/step2-06/exercise/src/components/TodoFooter.tsx
@@ -17,7 +17,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
   return (
-    <Stack horizontal horizontalAlign="space-between">
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>