diff --git a/packages/design-system/atoms/breakpoints/BreakpointText.tsx b/packages/design-system/atoms/breakpoints/BreakpointText.tsx
new file mode 100644
index 0000000..a04a01b
--- /dev/null
+++ b/packages/design-system/atoms/breakpoints/BreakpointText.tsx
@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from './Breakpoints';
+
+const ShowOnSmall = styled.span`
+ display: none;
+ ${onSmallScreen(css`
+ display: initial;
+ `)}
+`;
+
+const ShowOnLarge = styled.span`
+ display: initial;
+ ${onSmallScreen(css`
+ display: none;
+ `)}
+`;
+
+export const BreakpointText = (props: { small: string; large: string }) => {
+ const { small, large } = props;
+ return (
+ <>
+ {small}
+ {large}
+ >
+ );
+};
diff --git a/packages/design-system/atoms/breakpoints/index.ts b/packages/design-system/atoms/breakpoints/index.ts
index d72bd04..fea0bcd 100644
--- a/packages/design-system/atoms/breakpoints/index.ts
+++ b/packages/design-system/atoms/breakpoints/index.ts
@@ -1,3 +1,4 @@
export * from './BreakpointProvider';
export * from './Breakpoints';
+export * from './BreakpointText';
export * from './Context';
diff --git a/packages/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts
index 26d3247..49819ea 100644
--- a/packages/design-system/atoms/button/Button.styled.ts
+++ b/packages/design-system/atoms/button/Button.styled.ts
@@ -67,6 +67,13 @@ const colors = {
background-color: ${palette.taupe200};
}
`,
+ silent: css`
+ background: none;
+ border-color: transparent;
+ :hover {
+ background-color: ${palette.taupe200};
+ }
+ `,
};
const sizes = {
diff --git a/packages/design-system/organisms/editor-shell/EditorShell.tsx b/packages/design-system/organisms/editor-shell/EditorShell.tsx
index 67d8c2c..231a2e7 100644
--- a/packages/design-system/organisms/editor-shell/EditorShell.tsx
+++ b/packages/design-system/organisms/editor-shell/EditorShell.tsx
@@ -1,10 +1,16 @@
import { Space } from '@roleypoly/design-system/atoms/space';
-import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
-import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead';
-import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
-import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
-import { Category, PresentableGuild } from '@roleypoly/types';
+import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
+import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
+import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
+import {
+ CategoryContainer,
+ Container,
+ MessageBox,
+} from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
+import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
import deepEqual from 'deep-equal';
+import { sortBy } from 'lodash';
import React from 'react';
export type EditorShellProps = {
@@ -43,39 +49,39 @@ export const EditorShell = (props: EditorShellProps) => {
);
return (
-
-
-
props.onGuildChange?.(guild)}
- showSaveReset={hasChanges}
- />
- }
- >
-
- {() => (
-
- )}
-
-
- {() => (
-
- )}
-
- {() => hi2!
}
-
-
+ <>
+
+
+
+
+
+
+
+ {props.guild.data.message}
+
+
+
+
+ {sortBy(props.guild.data.categories, 'position').map((category, idx) => (
+
+ props.guild.roles.find((r) => r.id === role))
+ .filter((r) => r !== undefined) as Role[]
+ }
+ onChange={() => () => {}}
+ wikiMode={false}
+ type={category.type === CategoryType.Single ? 'single' : 'multi'}
+ />
+
+ ))}
+
+
+ >
);
};
diff --git a/packages/design-system/organisms/masthead/Masthead.stories.tsx b/packages/design-system/organisms/masthead/Masthead.stories.tsx
index 146cd3c..025ff7d 100644
--- a/packages/design-system/organisms/masthead/Masthead.stories.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
import { Authed } from './Authed';
import { Guest } from './Guest';
+import { SecondaryEditing } from './Secondary';
import { Skeleton } from './Skeleton';
export default {
@@ -12,6 +13,18 @@ export const hasGuilds = () => (
);
+export const withSecondary = () => (
+ <>
+
+
+ >
+);
+
export const noGuilds = () => (
);
diff --git a/packages/design-system/organisms/masthead/Masthead.styled.tsx b/packages/design-system/organisms/masthead/Masthead.styled.tsx
index 1304081..02bb321 100644
--- a/packages/design-system/organisms/masthead/Masthead.styled.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.styled.tsx
@@ -91,3 +91,29 @@ export const GuildPopoverHead = styled.div`
`)}
}
`;
+
+export const SecondaryBase = styled(MastheadBase)`
+ top: 50px;
+ background-color: ${palette.taupe300};
+ z-index: 99;
+ padding: 0 15px;
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+`;
+
+export const IconHolder = styled.div`
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 2px;
+ border: 2px solid ${palette.taupe200};
+ background-color: ${palette.taupe100};
+ margin-right: 1em;
+`;
+
+export const TextHolder = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
diff --git a/packages/design-system/organisms/masthead/Secondary.tsx b/packages/design-system/organisms/masthead/Secondary.tsx
new file mode 100644
index 0000000..d113e06
--- /dev/null
+++ b/packages/design-system/organisms/masthead/Secondary.tsx
@@ -0,0 +1,44 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { GuildSlug } from '@roleypoly/types';
+import { GoCheck, GoPencil } from 'react-icons/go';
+import {
+ IconHolder,
+ MastheadAlignment,
+ MastheadLeft,
+ MastheadRight,
+ SecondaryBase,
+ TextHolder,
+} from './Masthead.styled';
+
+type SecondaryEditingProps = {
+ guild: GuildSlug;
+ showReset: boolean;
+};
+
+export const SecondaryEditing = (props: SecondaryEditingProps) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/design-system/organisms/masthead/index.ts b/packages/design-system/organisms/masthead/index.ts
index 2fcce1b..373bde8 100644
--- a/packages/design-system/organisms/masthead/index.ts
+++ b/packages/design-system/organisms/masthead/index.ts
@@ -1,3 +1,4 @@
export * from './Authed';
export * from './Guest';
+export * from './Secondary';
export * from './Skeleton';