diff --git a/packages/design-system/atoms/toggle/Toggle.styled.tsx b/packages/design-system/atoms/toggle/Toggle.styled.tsx index d4df415..8342f58 100644 --- a/packages/design-system/atoms/toggle/Toggle.styled.tsx +++ b/packages/design-system/atoms/toggle/Toggle.styled.tsx @@ -20,9 +20,9 @@ export const ToggleState = styled.div` export const ToggleSwitch = styled.div<{ state: boolean }>` display: inline-block; background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')}; - height: 1.3em; - width: 2.6em; - border-radius: 1.3em; + height: 1.375rem; + width: 2.675rem; + border-radius: 1.375rem; position: relative; border: 1px solid rgba(0, 0, 0, 0.1); top: 0.23em; diff --git a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts index 95fcee5..4613d61 100644 --- a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts +++ b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints'; +import styled, { css } from 'styled-components'; export const Head = styled.div` margin: 7px 5px; @@ -18,3 +19,18 @@ export const HeadSub = styled.div` flex-shrink: 0; margin-top: -4px; `; + +export const Box = styled.div` + display: flex; + align-items: top; + justify-content: space-between; + flex-wrap: wrap; +`; + +export const Section = styled.div<{ big?: boolean }>` + padding: 7px 5px; + flex: 1 2 ${(props) => (props.big ? '100%' : '50%')}; + ${onSmallScreen(css` + flex-basis: 100%; + `)} +`; diff --git a/packages/design-system/molecules/editor-category/EditorCategory.tsx b/packages/design-system/molecules/editor-category/EditorCategory.tsx index 5d8d57f..b1b6b85 100644 --- a/packages/design-system/molecules/editor-category/EditorCategory.tsx +++ b/packages/design-system/molecules/editor-category/EditorCategory.tsx @@ -1,50 +1,60 @@ import { TextInput } from '@roleypoly/design-system/atoms/text-input'; +import { Toggle } from '@roleypoly/design-system/atoms/toggle'; import { Text } from '@roleypoly/design-system/atoms/typography'; -import { Category as CategoryT, Role as RoleT } from '@roleypoly/types'; +import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types'; import * as React from 'react'; import ReactTooltip from 'react-tooltip'; -import styled from 'styled-components'; -import { Head, HeadTitle } from './EditorCategory.styled'; +import { Box, Section } from './EditorCategory.styled'; export type CategoryProps = { title: string; roles: RoleT[]; category: CategoryT; - selectedRoles: string[]; onChange: (updatedCategory: CategoryT) => void; - type: 'single' | 'multi'; }; -const Category = styled.div` - display: flex; - flex-wrap: wrap; -`; - -const Container = styled.div` - overflow: hidden; - padding: 5px; -`; - export const EditorCategory = (props: CategoryProps) => { const updateValue = (key: T, value: CategoryT[T]) => { props.onChange({ ...props.category, [key]: value }); }; return ( - <> - - -
- Category Name -
- updateValue('name', event.target.value)} - /> - - - + +
+
+ Category Name +
+ updateValue('name', event.target.value)} + /> +
+ +
+
+ Options +
+
+ updateValue('hidden', value)} + > + Show this category to members + + + updateValue('type', value ? CategoryType.Multi : CategoryType.Single) + } + > + Let members pick more than one role + +
+
+ +
aa
+ - + ); }; diff --git a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx index 08595ed..5271852 100644 --- a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx +++ b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx @@ -83,17 +83,14 @@ export const ServerCategoryEditor = (props: Props) => { {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => ( props.guild.roles.find((r) => r.id === role)) .filter((r) => r !== undefined) as Role[] } onChange={updateSingleCategory} - type={category.type === CategoryType.Single ? 'single' : 'multi'} /> ))}