actions refiend

Author: rwieruch

.storybook/stories/Misc/actions.story.js

@@ -20,6 +20,13 @@ storiesOf('Misc/Actions', module)
     const data = { nodes };
 
     const theme = useTheme({
+      Row: `
+        &:hover {
+          .td:nth-of-type(5) button {
+            opacity: 1;
+          }
+        }
+      `,
       BaseCell: `
         &:nth-of-type(1), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5) {
           min-width: 10%;
@@ -35,6 +42,12 @@ storiesOf('Misc/Actions', module)
           }
         }
 
+        &:nth-of-type(5) {
+          button {
+            opacity: 0;
+          }
+        }
+
         &:nth-of-type(6) {
           flex: 1;
         }
@@ -82,15 +95,13 @@ storiesOf('Misc/Actions', module)
                     <div
                       style={{
                         display: 'flex',
-                        justifyContent: 'space-between',
                         alignItems: 'center',
                       }}
                     >
-                      <span>{item.type}</span>
+                      <span style={{ marginRight: '4px' }}>{item.type}</span>
                       <button>B</button>
                     </div>
                   </Cell>
-                  <Cell>{item.isComplete.toString()}</Cell>
                   <Cell>
                     <div
                       style={{
@@ -99,10 +110,22 @@ storiesOf('Misc/Actions', module)
                         alignItems: 'center',
                       }}
                     >
-                      <span>{item.nodes?.length}</span>
+                      <span>{item.isComplete.toString()}</span>
                       <button>C</button>
                     </div>
                   </Cell>
+                  <Cell>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <span>{item.nodes?.length}</span>
+                      <button>D</button>
+                    </div>
+                  </Cell>
                 </Row>
               ))}
             </Body>