sync

packages/design-system/atoms/toggle/Toggle.styled.tsx

@@ -19,7 +19,7 @@ export const ToggleState = styled.div`
 
 export const ToggleSwitch = styled.div<{ state: boolean }>`
   display: inline-block;
-  background-color: ${(props) => (props.state ? palette.green200 : palette.taupe100)};
+  background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
   height: 1.3em;
   width: 2.6em;
   border-radius: 1.3em;
@@ -28,6 +28,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
   top: 0.23em;
   transition: background-color ${transitions.in2in}s ease-in-out;
   cursor: pointer;
+  margin-right: 0.5em;
 
   ${ToggleState} {
     ${(props) =>

packages/design-system/atoms/toggle/Toggle.tsx

@@ -12,9 +12,9 @@ export const Toggle = (props: ToggleProps) => (
       props.onChange?.(!props.state);
     }}
   >
-    {props.children}{' '}
     <ToggleSwitch state={props.state}>
       <ToggleState />
     </ToggleSwitch>
+    {props.children}
   </div>
 );

packages/design-system/molecules/editor-category-old/EditorCategory.stories.tsx

@@ -3,7 +3,7 @@ import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyD
 import { EditorCategory } from './EditorCategory';
 
 export default {
-  title: 'Molecules/Editor/Category',
+  title: 'Molecules/Editor/Category (Old)',
 };
 
 export const CategoryEditor = () => {

packages/design-system/molecules/editor-category/EditorCategory.stories.tsx

@@ -3,7 +3,7 @@ import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyD
 import { EditorCategory } from './EditorCategory';
 
 export default {
-  title: 'Molecules/Editor/Category (Old)',
+  title: 'Molecules/Editor/Category',
 };
 
 export const CategoryEditor = () => {

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -1,9 +1,9 @@
 import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
-import { HorizontalSwitch } from '@roleypoly/design-system/atoms/horizontal-switch';
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { Role } from '@roleypoly/design-system/atoms/role';
 import { Space } from '@roleypoly/design-system/atoms/space';
 import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { Toggle } from '@roleypoly/design-system/atoms/toggle';
 import { Text } from '@roleypoly/design-system/atoms/typography';
 import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
 import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
@@ -74,24 +74,22 @@ export const EditorCategory = (props: Props) => {
 
       <Space />
 
-      <Text>Selection Type</Text>
       <div>
-        <HorizontalSwitch
-          items={['Multiple', 'Single']}
-          value={typeEnumToSwitch(props.category.type)}
-          onChange={onUpdate('type', switchToTypeEnum)}
-        />
+        <Toggle
+          state={props.category.type === CategoryType.Multi}
+          onChange={onUpdate('type', (x) =>
+            x ? CategoryType.Multi : CategoryType.Single
+          )}
+        >
+          Allow users to pick multiple roles
+        </Toggle>
       </div>
 
       <Space />
-
-      <Text>Visiblity</Text>
       <div>
-        <HorizontalSwitch
-          items={['Visible', 'Hidden']}
-          value={props.category.hidden ? 'Hidden' : 'Visible'}
-          onChange={onUpdate('hidden', (a) => a === 'Hidden')}
-        />
+        <Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
+          Hide category from users
+        </Toggle>
       </div>
 
       <Space />