diff --git a/ui/src/Pages/SettingsPage/ScannerSection.tsx b/ui/src/Pages/SettingsPage/ScannerSection.tsx index 7c643e27..cced4376 100644 --- a/ui/src/Pages/SettingsPage/ScannerSection.tsx +++ b/ui/src/Pages/SettingsPage/ScannerSection.tsx @@ -32,7 +32,6 @@ const ScannerSection = () => { )} - - - + + + ) } diff --git a/ui/src/Pages/SettingsPage/Users/EditUserRow.tsx b/ui/src/Pages/SettingsPage/Users/EditUserRow.tsx index b98edbd2..53409246 100644 --- a/ui/src/Pages/SettingsPage/Users/EditUserRow.tsx +++ b/ui/src/Pages/SettingsPage/Users/EditUserRow.tsx @@ -1,8 +1,11 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import { Button, Checkbox, Input, Table } from 'semantic-ui-react' import { EditRootPaths } from './EditUserRowRootPaths' import { UserRowChildProps } from './UserRow' +import { TableRow, TableCell } from '../../../primitives/Table' +import { TextField } from '../../../primitives/form/Input' +import { Button, ButtonGroup } from '../../../primitives/form/Input' +import Checkbox from '../../../primitives/form/Checkbox' const EditUserRow = ({ user, @@ -24,34 +27,34 @@ const EditUserRow = ({ } return ( - - - + + updateInput(e, 'username')} /> - - + + - - + + { + onChange={e => { setState(state => ({ ...state, - admin: data.checked || false, + admin: e.target.checked || false, })) }} /> - - - + + + - - - + + + ) } diff --git a/ui/src/Pages/SettingsPage/Users/EditUserRowRootPaths.tsx b/ui/src/Pages/SettingsPage/Users/EditUserRowRootPaths.tsx index 1dacddb0..3b68d438 100644 --- a/ui/src/Pages/SettingsPage/Users/EditUserRowRootPaths.tsx +++ b/ui/src/Pages/SettingsPage/Users/EditUserRowRootPaths.tsx @@ -1,7 +1,5 @@ import React, { useState } from 'react' import { gql, useMutation } from '@apollo/client' -import { Button, Icon, Input } from 'semantic-ui-react' -import styled from 'styled-components' import { USERS_QUERY } from './UsersTable' import { useTranslation } from 'react-i18next' import { USER_ADD_ROOT_PATH_MUTATION } from './AddUserRow' @@ -14,6 +12,7 @@ import { settingsUsersQuery_user_rootAlbums, } from './__generated__/settingsUsersQuery' import { userAddRootPath } from './__generated__/userAddRootPath' +import { Button, TextField } from '../../../primitives/form/Input' const USER_REMOVE_ALBUM_PATH_MUTATION = gql` mutation userRemoveAlbumPathMutation($userId: ID!, $albumId: ID!) { @@ -23,12 +22,6 @@ const USER_REMOVE_ALBUM_PATH_MUTATION = gql` } ` -const RootPathListItem = styled.li` - display: flex; - justify-content: space-between; - align-items: center; -` - type EditRootPathProps = { album: settingsUsersQuery_user_rootAlbums user: settingsUsersQuery_user @@ -48,10 +41,10 @@ const EditRootPath = ({ album, user }: EditRootPathProps) => { }) return ( - +
  • {album.filePath} - +
    • ) } -const NewRootPathInput = styled(Input)` - width: 100%; - margin-top: 24px; -` - type EditNewRootPathProps = { userID: string } @@ -93,39 +80,33 @@ const EditNewRootPath = ({ userID }: EditNewRootPathProps) => { ) return ( -
  • - + ) => setValue(e.target.value) } disabled={loading} - action={{ - positive: true, - icon: 'add', - content: t('general.action.add', 'Add'), - onClick: () => { - setValue('') - addRootPath({ - variables: { - id: userID, - rootPath: value, - }, - }) - }, - }} /> +
    • ) } -const RootPathList = styled.ul` - margin: 0; - padding: 0; - list-style: none; -` - type EditRootPathsProps = { user: settingsUsersQuery_user } @@ -136,9 +117,9 @@ export const EditRootPaths = ({ user }: EditRootPathsProps) => { )) return ( - + ) } diff --git a/ui/src/Pages/SettingsPage/Users/UsersTable.tsx b/ui/src/Pages/SettingsPage/Users/UsersTable.tsx index b905ecdb..06913d43 100644 --- a/ui/src/Pages/SettingsPage/Users/UsersTable.tsx +++ b/ui/src/Pages/SettingsPage/Users/UsersTable.tsx @@ -1,12 +1,21 @@ import React, { useState } from 'react' -import { Table, Loader, Button, Icon } from 'semantic-ui-react' +import { Loader, Icon } from 'semantic-ui-react' +import { + Table, + TableHeader, + TableHeaderCell, + TableRow, + TableBody, + TableFooter, +} from '../../../primitives/Table' import { useQuery, gql } from '@apollo/client' import UserRow from './UserRow' import AddUserRow from './AddUserRow' import { SectionTitle } from '../SettingsPage' import { useTranslation } from 'react-i18next' import { settingsUsersQuery } from './__generated__/settingsUsersQuery' +import { Button } from '../../../primitives/form/Input' export const USERS_QUERY = gql` query settingsUsersQuery { @@ -26,9 +35,8 @@ const UsersTable = () => { const { t } = useTranslation() const [showAddUser, setShowAddUser] = useState(false) - const { loading, error, data, refetch } = useQuery( - USERS_QUERY - ) + const { loading, error, data, refetch } = + useQuery(USERS_QUERY) if (error) { return
    {`Users table error: ${error.message}`}
    @@ -45,25 +53,28 @@ const UsersTable = () => {
    {t('settings.users.title', 'Users')} - - - - +
    + + + {t('settings.users.table.column_names.username', 'Username')} - - + + {t('settings.users.table.column_names.photo_path', 'Photo path')} - - - {t('settings.users.table.column_names.admin', 'Admin')} - - + + + {t( + 'settings.users.table.column_names.capabilities', + 'Capabilities' + )} + + {t('settings.users.table.column_names.action', 'Action')} - - - + + + - + {userRows} { refetch() }} /> - + - - - + + + - - - + + +
    ) diff --git a/ui/src/Pages/SettingsPage/Users/ViewUserRow.tsx b/ui/src/Pages/SettingsPage/Users/ViewUserRow.tsx index be15b4f6..377e3b62 100644 --- a/ui/src/Pages/SettingsPage/Users/ViewUserRow.tsx +++ b/ui/src/Pages/SettingsPage/Users/ViewUserRow.tsx @@ -1,16 +1,12 @@ import React from 'react' import { Trans, useTranslation } from 'react-i18next' -import { Button, Icon, Table, Modal } from 'semantic-ui-react' -import styled from 'styled-components' +import { Icon, Modal } from 'semantic-ui-react' +import Checkbox from '../../../primitives/form/Checkbox' +import { Button } from '../../../primitives/form/Input' +import { TableCell, TableRow } from '../../../primitives/Table' import ChangePasswordModal from './UserChangePassword' import { UserRowChildProps } from './UserRow' -const PathList = styled.ul` - margin: 0; - padding: 0 0 0 12px; - list-style: none; -` - const ViewUserRow = ({ user, // state, @@ -25,22 +21,22 @@ const ViewUserRow = ({ }: UserRowChildProps) => { const { t } = useTranslation() const paths = ( - +
      {user.rootAlbums.map(album => (
    • {album.filePath}
      • ))} - +
    ) return ( - - {user.username} - {paths} - - {user.admin ? : null} - - - + + {user.username} + {paths} + + + + +
    - - - +
    +     +     ) } diff --git a/ui/src/components/sidebar/Sharing.tsx b/ui/src/components/sidebar/Sharing.tsx index 6b5faf3c..e28e8a32 100644 --- a/ui/src/components/sidebar/Sharing.tsx +++ b/ui/src/components/sidebar/Sharing.tsx @@ -444,7 +444,7 @@ const SidebarShare = ({ ) + +export const ButtonGroup = styled.div.attrs({ className: 'flex gap-1' })`` diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 8aab9ac0..36c0a1e1 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -10,6 +10,20 @@ module.exports = { boxShadow: { separator: '0 0 4px 0 rgba(0, 0, 0, 0.1)', }, + colors: { + green: { + 50: '#f0ffee', + 100: '#dcffd8', + 200: '#b6fdb3', + 300: '#7cf587', + 400: '#56e263', + 500: '#4abf3c', + 600: '#30a23e', + 700: '#168332', + 800: '#006624', + 900: '#00541d', + }, + }, }, }, variants: {