add editor wiring and styling updates

packages/design-system/molecules/editor-masthead/EditorMasthead.tsx

@@ -0,0 +1,43 @@
+import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
+import { Text } from '@roleypoly/design-system/atoms/typography';
+import { PresentableGuild } from '@roleypoly/types';
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from '../../atoms/breakpoints';
+
+type EditorMastheadProps = {
+  guild: PresentableGuild;
+  onSubmit: () => void;
+  onReset: () => void;
+  showSaveReset: boolean;
+};
+
+const MastheadContainer = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: start;
+  padding-bottom: 0.5em;
+  ${Text} {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 0.5em;
+  }
+
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const EditorMasthead = (props: EditorMastheadProps) => (
+  <MastheadContainer>
+    <Avatar
+      size={34}
+      hash={props.guild.guild.icon}
+      src={avatarUtils.avatarHash(props.guild.id, props.guild.guild.icon, 'icons')}
+    >
+      {avatarUtils.initialsFromName(props.guild.guild.name)}
+    </Avatar>
+    <Text>Server Editor</Text>
+  </MastheadContainer>
+);

packages/design-system/molecules/editor-masthead/index.ts

@@ -0,0 +1 @@
+export * from './EditorMasthead';

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ResetSubmit } from './ResetSubmit';
+import { InlineResetSubmit, ResetSubmit } from './ResetSubmit';
 
 export default {
-  title: 'Molecules',
+  title: 'Molecules/Reset and Submit',
   component: ResetSubmit,
 };
 
-export const ResetAndSubmit = (args) => <ResetSubmit {...args} />;
+export const normal = (args) => <ResetSubmit {...args} />;
+export const inline = (args) => <InlineResetSubmit {...args} />;

packages/design-system/molecules/reset-submit/ResetSubmit.styled.ts

@@ -1,19 +0,0 @@
-import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
-import styled from 'styled-components';
-
-export const Buttons = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-export const Left = styled.div`
-  flex: 0;
-  ${onSmallScreen`
-    flex: 1 1 100%; 
-    order: 2;
-  `}
-`;
-
-export const Right = styled.div`
-  flex: 1;
-`;

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>
+  );
+};