Merge branch 'develop' into mweigl/vis_changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "4.1.2-SNAPSHOT",
+  "version": "5.0.1-SNAPSHOT",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -145,6 +145,7 @@
     "@mantine/hooks": "~6.0.19",
     "@mantine/modals": "~6.0.19",
     "@mantine/notifications": "~6.0.19",
+    "@mantine/styles": "~6.0.19",
     "@types/d3-hexbin": "^0.2.3",
     "@types/d3v7": "npm:@types/d3@^7.4.0",
     "@types/plotly.js-dist-min": "^2.3.0",

src/components/PermissionChooser.styles.ts

@@ -0,0 +1,26 @@
+import { createStyles } from '@mantine/core';
+
+export default createStyles((theme) => ({
+  grid: {
+    display: 'grid',
+    // minmax helps here to make it look good across resolutions ~450 - 1800
+    gridTemplateColumns: 'minmax(5rem, 0.5fr) minmax(10rem, 2fr) minmax(20rem, 1fr)',
+    alignItems: 'center',
+    columnGap: theme.spacing.md,
+    rowGap: theme.spacing.xs,
+  },
+  fullRow: {
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
+  },
+  chevron: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'transform 200ms ease',
+
+    '&[data-rotate="true"]': {
+      transform: 'rotate(180deg)',
+    },
+  },
+}));