Feat/editor category pass2 (#290)

* feat(design-system): add editor skeletons

* use css media queries rather than JS media queries

* init remake

* feat: add basis of toggle atom

* finish toggle

* use pointer cursor with toggle

* sync

* feat: add server message in editor

* cleanup storybook

* add short editor item and data model for categories

* chore: fix build by moving jest version downward

* chore: remove old category editor

* chore: fix EditorCategoryShort index

* add editor wiring and styling updates

* fix linting issues

packages/design-system/molecules/reset-submit/ResetSubmit.tsx

@@ -2,7 +2,7 @@ import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
 import { Button } from '@roleypoly/design-system/atoms/button';
 import * as React from 'react';
 import { MdRestore } from 'react-icons/md';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 type Props = {
   onSubmit: () => void;
@@ -22,8 +22,14 @@ const Left = styled.div`
   `}
 `;
 
-const Right = styled.div`
+const Right = styled.div<{ inline?: boolean }>`
   flex: 1;
+
+  ${(props) =>
+    props.inline &&
+    css`
+      padding-left: 0.2em;
+    `}
 `;
 
 export const ResetSubmit = (props: Props) => {
@@ -40,3 +46,20 @@ export const ResetSubmit = (props: Props) => {
     </Buttons>
   );
 };
+
+export const InlineResetSubmit = (props: Props) => {
+  return (
+    <Buttons>
+      <Left>
+        <Button color="muted" size="small" icon={<MdRestore />} onClick={props.onReset}>
+          Reset
+        </Button>
+      </Left>
+      <Right inline>
+        <Button onClick={props.onSubmit} size="small">
+          Submit
+        </Button>
+      </Right>
+    </Buttons>
+  );
+};