compiled clean

src/components/PermissionChooser.module.css

@@ -0,0 +1,23 @@
+.grid {
+    display: 'grid';
+    grid-template-columns: minmax(5rem, 0.5fr) minmax(10rem, 2fr) minmax(20rem, 1fr);
+    align-items: center;
+    column-gap: var(--mantine-spacing-md);
+    row-gap: var(--mantine-spacing-xs);
+}
+
+.fullRow {
+    grid-column-start: 1;
+    grid-column-end: 4;
+}
+
+.chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 200ms ease;
+
+    &[data-rotate="true"] {
+        transform: rotate(180deg);
+    }
+}

src/components/PermissionChooser.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import { Box, Button, Collapse, Group, Radio, SegmentedControl, Select, Stack, Text, TextInput } from '@mantine/core';
 import uniqueId from 'lodash/uniqueId';
-import { DefaultProps } from '@mantine/styles';
-import { Box, Button, ChevronIcon, Collapse, Text, Group, Radio, Stack, TextInput, SegmentedControl, Select } from '@mantine/core';
-import { EPermission, Permission, UserUtils, userSession } from '../security';
+import * as React from 'react';
 import { i18n } from '../i18n';
-import useStyles from './PermissionChooser.styles';
+import { EPermission, Permission, UserUtils, userSession } from '../security';
+import classes from './PermissionChooser.module.css';
 
 function PermissionsEntry({
   permission,
@@ -85,7 +84,7 @@ function PermissionsEntry({
   );
 }
 
-interface PermissionChooserProps extends DefaultProps {
+interface PermissionChooserProps extends React.ComponentPropsWithoutRef<'div'> {
   permission: Permission;
   buddies: string[];
   group: string;
@@ -102,11 +101,9 @@ export const PermissionChooser = React.forwardRef<HTMLDivElement, React.Componen
     const roles = user ? user.roles : UserUtils.ANONYMOUS_USER.roles;
     const [advancedOpen, setAdvancedOpen] = React.useState<boolean>(false);
 
-    const { classes } = useStyles();
-
     return (
       <Stack ref={ref} {...others}>
-        <Group sx={{ justifyContent: 'space-between' }}>
+        <Group justify="space-between">
           <Radio.Group
             value={permission.others.has(EPermission.READ) ? 'public' : 'private'}
             onChange={(value) => {
@@ -148,9 +145,9 @@ export const PermissionChooser = React.forwardRef<HTMLDivElement, React.Componen
 
           <Button
             variant="subtle"
-            rightIcon={
+            rightSection={
               <span className={classes.chevron} data-rotate={advancedOpen}>
-                <ChevronIcon />
+                {/* @TODO Moritz <ChevronIcon /> */}
               </span>
             }
             size="xs"
@@ -192,7 +189,7 @@ export const PermissionChooser = React.forwardRef<HTMLDivElement, React.Componen
             <TextInput
               id={`permission_buddies_name_${id}`}
               name="permission_buddies_name"
-              sx={{ display: 'inline-block' }}
+              style={{ display: 'inline-block' }}
               placeholder={i18n.t('visyn:permission.buddiesPlaceholder')}
               value={buddies.join(';')}
               onChange={(e) => setBuddies(e.currentTarget.value.split(';'))}

src/ranking/EagerVisynRanking.module.css

@@ -0,0 +1,9 @@
+.eagerRanking {
+    flex: 1;
+    width: 100%;
+    display: block;
+    :global(.lu-side-panel-main) {
+        flex-basis: 0;
+        overflow-y: auto;
+    }
+}

src/ranking/EagerVisynRanking.tsx

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import { Box, BoxProps } from '@mantine/core';
 import LineUp, { buildRanking } from 'lineupjs';
 import isEqual from 'lodash/isEqual';
-import { Box, BoxProps } from '@mantine/core';
+import * as React from 'react';
 import { useSyncedRef } from '../hooks/useSyncedRef';
 import { registerSMILESColumn } from './smiles/utils';
 
 import '../scss/vendors/_lineup.scss';
-import { DatavisynTaggle } from './overrides/DatavisynTaggle';
+import classes from './EagerVisynRanking.module.css';
 import { DatavisynLineUpBuilder } from './overrides/DatavisynLineUpBuilder';
+import { DatavisynTaggle } from './overrides/DatavisynTaggle';
 
 export const defaultBuilder = ({
   data,
@@ -119,21 +120,5 @@ export function EagerVisynRanking<T extends Record<string, unknown>>({
     }
   }, [selection, lineupRef.current?.ranking, lineupRef]);
 
-  return (
-    <Box
-      ref={divRef}
-      sx={{
-        flex: 1,
-        width: '100%',
-        display: 'block',
-        // Make the side panel scrollable
-        '.lu-side-panel-main': {
-          // Probably should move to _ranking.scss?
-          flexBasis: 0,
-          overflowY: 'auto',
-        },
-      }}
-      {...(innerProps || {})}
-    />
-  );
+  return <Box ref={divRef} className={classes.eagerRanking} {...(innerProps || {})} />;
 }