diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx index 27021a06f8a..68f439a4761 100644 --- a/studio/components/interfaces/Auth/Users/Users.tsx +++ b/studio/components/interfaces/Auth/Users/Users.tsx @@ -53,7 +53,7 @@ const Users = () => { } return ( -
+
{ {inviteEnabled && }
-
-
+
+
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx index 64b3e5375c8..deefe6cd8ee 100644 --- a/studio/pages/_app.tsx +++ b/studio/pages/_app.tsx @@ -10,6 +10,7 @@ import 'styles/contextMenu.scss' import 'styles/react-data-grid-logs.scss' import 'styles/date-picker.scss' import 'styles/grid.scss' +import 'styles/users-table.scss' import dayjs from 'dayjs' import customParseFormat from 'dayjs/plugin/customParseFormat' diff --git a/studio/styles/users-table.scss b/studio/styles/users-table.scss new file mode 100644 index 00000000000..5bd24e6d6e5 --- /dev/null +++ b/studio/styles/users-table.scss @@ -0,0 +1,39 @@ +.users-table-container { + scrollbar-width: thin; + scrollbar-color: var(--colors-slate9) var(--colors-slate1); + + .dark & { + scrollbar-color: var(--colors-slate10) var(--colors-slate3o); + } + + ::-webkit-scrollbar { + background: var(--colors-slate2); + height: 3px; + width: 0px; + border-radius: 0; + + .dark & { + background: var(--colors-slate6); + } + } + + ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px var(--colors-slate6); + -webkit-border-radius: 5px; + border-radius: 5px; + + .dark & { + -webkit-box-shadow: inset 0 0 6px var(--colors-slate8); + } + } + + ::-webkit-scrollbar-thumb { + -webkit-border-radius: 5px; + border-radius: 5px; + background: var(--colors-slate9); + + .dark & { + -webkit-box-shadow: inset 0 0 6px var(--colors-slate12); + } + } +}