= ({ - template, - ...avatarProps -}) => { - return template.icon ? ( - - ) : ( - {template.display_name || template.name} - ); -}; diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx index 5c9cedd4cea56..73cdc19295b97 100644 --- a/site/src/components/Timeline/TimelineEntry.tsx +++ b/site/src/components/Timeline/TimelineEntry.tsx @@ -1,5 +1,7 @@ +import type { Interpolation } from "@emotion/react"; import TableRow, { type TableRowProps } from "@mui/material/TableRow"; import { forwardRef } from "react"; +import type { Theme } from "theme"; interface TimelineEntryProps extends TableRowProps { clickable?: boolean; @@ -12,39 +14,44 @@ export const TimelineEntry = forwardRef< return ( [ - { - "&:focus": { - outlineStyle: "solid", - outlineOffset: -1, - outlineWidth: 2, - outlineColor: theme.palette.primary.main, - }, - "& td": { - position: "relative", - overflow: "hidden", - }, - "& td:before": { - position: "absolute", - left: 49, // 50px - (width / 2) - display: "block", - content: "''", - height: "100%", - width: 2, - background: theme.palette.divider, - }, - }, - clickable && { - cursor: "pointer", - - "&:hover": { - backgroundColor: theme.palette.action.hover, - }, - }, - ]} + css={[styles.row, clickable ? styles.clickable : null]} {...props} > {children} ); }); + +const styles = { + row: (theme) => ({ + "--side-padding": "32px", + "&:focus": { + outlineStyle: "solid", + outlineOffset: -1, + outlineWidth: 2, + outlineColor: theme.palette.primary.main, + }, + "& td": { + position: "relative", + overflow: "hidden", + }, + "& td:before": { + "--line-width": "2px", + position: "absolute", + left: "calc((var(--side-padding) + var(--avatar-default)/2) - var(--line-width) / 2)", + display: "block", + content: "''", + height: "100%", + width: "var(--line-width)", + background: theme.palette.divider, + }, + }), + + clickable: (theme) => ({ + cursor: "pointer", + + "&:hover": { + backgroundColor: theme.palette.action.hover, + }, + }), +} satisfies Record>; diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index cf9c9ea6ecc0b..f5bfd109c4a5c 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -6,8 +6,8 @@ import { getErrorMessage } from "api/errors"; import { organizationMembers } from "api/queries/organizations"; import { users } from "api/queries/users"; import type { OrganizationMemberWithUserData, User } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, @@ -170,9 +170,11 @@ const InnerAutocomplete = ({ ...params.InputProps, onChange: debouncedInputOnChange, startAdornment: value && ( - - {value.username} - + ), endAdornment: ( <> diff --git a/site/src/components/UserAvatar/UserAvatar.stories.tsx b/site/src/components/UserAvatar/UserAvatar.stories.tsx deleted file mode 100644 index 367dcc2efe7c1..0000000000000 --- a/site/src/components/UserAvatar/UserAvatar.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { UserAvatar } from "./UserAvatar"; - -const meta: Meta = { - title: "components/UserAvatar", - component: UserAvatar, -}; - -export default meta; -type Story = StoryObj; - -export const Jon: Story = { - args: { - username: "sreya", - avatarURL: "https://github.com/sreya.png", - }, -}; - -export const Jonjon: Story = { - args: { - username: "ジョンジョン", - avatarURL: "https://github.com/sreya.png", - }, -}; diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx deleted file mode 100644 index 5244dc6de20e0..0000000000000 --- a/site/src/components/UserAvatar/UserAvatar.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; -import type { FC } from "react"; - -export type UserAvatarProps = { - username: string; - avatarURL?: string; -} & AvatarProps; - -export const UserAvatar: FC = ({ - username, - avatarURL, - ...avatarProps -}) => { - return ( - - {username} - - ); -}; diff --git a/site/src/components/deprecated/Avatar/Avatar.stories.tsx b/site/src/components/deprecated/Avatar/Avatar.stories.tsx deleted file mode 100644 index c06390c450d89..0000000000000 --- a/site/src/components/deprecated/Avatar/Avatar.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import PauseIcon from "@mui/icons-material/PauseOutlined"; -import type { Meta, StoryObj } from "@storybook/react"; -import { Avatar, AvatarIcon } from "./Avatar"; - -const meta: Meta = { - title: "components/DeprecatedAvatar", - component: Avatar, -}; - -export default meta; -type Story = StoryObj; - -export const WithLetter: Story = { - args: { - children: "Coder", - }, -}; - -export const WithLetterXL = { - args: { - children: "Coder", - size: "xl", - }, -}; - -export const WithImage = { - args: { - src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", - }, -}; - -export const WithImageXL = { - args: { - src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", - size: "xl", - }, -}; - -export const WithMuiIcon = { - args: { - background: true, - children: , - }, -}; - -export const WithMuiIconXL = { - args: { - background: true, - children: , - size: "xl", - }, -}; - -export const WithAvatarIcon = { - args: { - background: true, - children: , - }, -}; diff --git a/site/src/components/deprecated/Avatar/Avatar.tsx b/site/src/components/deprecated/Avatar/Avatar.tsx deleted file mode 100644 index 1fcd6208655d2..0000000000000 --- a/site/src/components/deprecated/Avatar/Avatar.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { type Interpolation, type Theme, css, useTheme } from "@emotion/react"; -import MuiAvatar, { - type AvatarProps as MuiAvatarProps, - // biome-ignore lint/nursery/noRestrictedImports: Used as base component -} from "@mui/material/Avatar"; -import { visuallyHidden } from "@mui/utils"; -import { type FC, useId } from "react"; -import { getExternalImageStylesFromUrl } from "theme/externalImages"; - -export type AvatarProps = MuiAvatarProps & { - size?: "xs" | "sm" | "md" | "xl"; - background?: boolean; - fitImage?: boolean; -}; - -const sizeStyles = { - xs: { - width: 16, - height: 16, - fontSize: 8, - fontWeight: 700, - }, - sm: { - width: 24, - height: 24, - fontSize: 12, - fontWeight: 600, - }, - md: {}, - xl: { - width: 48, - height: 48, - fontSize: 24, - }, -} satisfies Record>; - -const fitImageStyles = css` - & .MuiAvatar-img { - object-fit: contain; - } -`; - -/** - * @deprecated Use `Avatar` from `@components/Avatar` instead. - */ -export const Avatar: FC = ({ - size = "md", - fitImage, - children, - background, - ...muiProps -}) => { - const fromName = !muiProps.src && typeof children === "string"; - - return ( - ({ - background: - background || fromName ? theme.palette.divider : undefined, - color: theme.palette.text.primary, - }), - ]} - > - {typeof children === "string" ? firstLetter(children) : children} - - ); -}; - -/** - * @deprecated Use `Avatar` from `@components/Avatar` instead. - */ -export const ExternalAvatar: FC = (props) => { - const theme = useTheme(); - - return ( - - ); -}; - -type AvatarIconProps = { - src: string; - alt: string; -}; - -/** - * Use it to make an img element behaves like a MaterialUI Icon component - * - * @deprecated Use `AvatarIcon` from `@components/Avatar` instead. - */ -export const AvatarIcon: FC = ({ src, alt }) => { - const hookId = useId(); - const avatarId = `${hookId}-avatar`; - - // We use a `visuallyHidden` element instead of setting `alt` to avoid - // splatting the text out on the screen if the image fails to load. - return ( - <> -

- {alt} -

- - ); -}; - -const firstLetter = (str: string): string => { - if (str.length > 0) { - return str[0].toLocaleUpperCase(); - } - - return ""; -}; diff --git a/site/src/index.css b/site/src/index.css index 1353b200745c0..c97e827b98a0f 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -31,6 +31,10 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; + + --avatar-lg: 2.5rem; + --avatar-default: 1.5rem; + --avatar-sm: 1.125rem; } .dark { --content-primary: 0, 0%, 98%; diff --git a/site/src/components/BuildAvatar/BuildAvatar.stories.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx similarity index 91% rename from site/src/components/BuildAvatar/BuildAvatar.stories.tsx rename to site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx index 75cedf10ba5c5..ef7f1c49cc7d4 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.stories.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx @@ -13,27 +13,21 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const XSSize: Story = { - args: { - size: "xs", - }, -}; - -export const SMSize: Story = { +export const SmSize: Story = { args: { size: "sm", }, }; -export const MDSize: Story = { +export const MdSize: Story = { args: { size: "md", }, }; -export const XLSize: Story = { +export const LgSize: Story = { args: { - size: "xl", + size: "lg", }, }; diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx new file mode 100644 index 0000000000000..e1be56e995b3f --- /dev/null +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx @@ -0,0 +1,30 @@ +import { useTheme } from "@emotion/react"; +import type { WorkspaceBuild } from "api/typesGenerated"; +import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; +import { BuildIcon } from "components/BuildIcon/BuildIcon"; +import { useClassName } from "hooks/useClassName"; +import type { FC } from "react"; +import { getDisplayWorkspaceBuildStatus } from "utils/workspace"; + +export interface BuildAvatarProps { + build: WorkspaceBuild; + size?: AvatarProps["size"]; +} + +export const BuildAvatar: FC = ({ build, size }) => { + const theme = useTheme(); + const { type } = getDisplayWorkspaceBuildStatus(theme, build); + const iconColor = useClassName( + (css, theme) => css({ color: theme.roles[type].fill.solid }), + [type], + ); + + return ( + + + + ); +}; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index caa01ecce0aa6..6fb7428bb0dc1 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -1,15 +1,15 @@ import { type Interpolation, type Theme, css, useTheme } from "@emotion/react"; import Badge from "@mui/material/Badge"; import type * as TypesGen from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { Popover, PopoverContent, PopoverTrigger, } from "components/deprecated/Popover/Popover"; import { type FC, useState } from "react"; -import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants"; +import { navHeight } from "theme/constants"; import { UserDropdownContent } from "./UserDropdownContent"; export interface UserDropdownProps { @@ -34,10 +34,10 @@ export const UserDropdown: FC = ({ }> - - {template.icon !== "" ? ( - - ) : ( - {template.name} - )} + +

diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 921dd9d173557..13687e4e45fcb 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { Template, TemplateExample } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export interface SelectedTemplateProps { @@ -10,19 +10,13 @@ export interface SelectedTemplateProps { export const SelectedTemplate: FC = ({ template }) => { return ( - - + - {template.name} - + fallback={template.name} + /> diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 47d19f48d68eb..8f47c288a840c 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -10,11 +10,10 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import type { FC } from "react"; import { Link, useNavigate } from "react-router-dom"; @@ -98,14 +97,10 @@ const OAuth2AppRow: FC = ({ app }) => { return ( - - ) - } - /> + + + {app.name} + diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index d6e19665cdf92..5ff3b5a626b93 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -8,10 +8,10 @@ import Tooltip from "@mui/material/Tooltip"; import type { ApiErrorResponse } from "api/errors"; import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated"; import { Alert, AlertDetail } from "components/Alert/Alert"; +import { Avatar } from "components/Avatar/Avatar"; import { CopyButton } from "components/CopyButton/CopyButton"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Welcome } from "components/Welcome/Welcome"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC, ReactNode } from "react"; export interface ExternalAuthPageViewProps { @@ -76,7 +76,10 @@ const ExternalAuthPageView: FC = ({

{externalAuth.installations.length > 0 && ( -

{externalAuth.installations.map((install) => { if (!install.account) { return; @@ -88,9 +91,10 @@ const ExternalAuthPageView: FC = ({ target="_blank" rel="noreferrer" > - - {install.account.login} - + ); diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 1244118aa3840..4af3ce30389fa 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -20,7 +20,8 @@ import { } from "api/queries/groups"; import type { Group, ReducedUser, User } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; @@ -45,7 +46,6 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -288,12 +288,7 @@ const GroupMemberRow: FC = ({ - } + avatar={} title={member.username} subtitle={member.email} /> diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 8c9f1f8e46601..6188cc09428b9 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -11,17 +11,16 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { Group } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { Paywall } from "components/Paywall/Paywall"; import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; import { docs } from "utils/docs"; @@ -117,9 +116,9 @@ export const GroupsPageView: FC = ({ } title={group.display_name || group.name} @@ -132,13 +131,13 @@ export const GroupsPageView: FC = ({ {group.members.map((member) => ( - ))} diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx index 42251f5d5965f..6c226a1dba9ff 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx @@ -24,7 +24,8 @@ import type { ReducedUser, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; @@ -44,7 +45,6 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -302,12 +302,7 @@ const GroupMemberRow: FC = ({ - } + avatar={} title={member.username} subtitle={member.email} /> diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx index 65e565d75133e..fe109d0ea5718 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx @@ -11,17 +11,16 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { Group } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { Paywall } from "components/Paywall/Paywall"; import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useClickableTableRow } from "hooks"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; @@ -124,9 +123,9 @@ const GroupRow: FC = ({ group }) => { } title={group.display_name || group.name} @@ -139,13 +138,13 @@ const GroupRow: FC = ({ group }) => { {group.members.map((member) => ( - ))} diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index 36002c605e04b..1cc009e1f4de7 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -16,7 +16,8 @@ import type { User, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { MoreMenu, @@ -28,7 +29,6 @@ import { import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; @@ -107,9 +107,9 @@ export const OrganizationMembersPageView: FC< } title={member.name || member.username} diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx index 3c37499f34375..c12b3c13a416c 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx @@ -1,11 +1,11 @@ import type { Organization } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { PageHeader, PageHeaderSubtitle, PageHeaderTitle, } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import type { FC } from "react"; interface OrganizationSummaryPageViewProps { @@ -23,13 +23,14 @@ export const OrganizationSummaryPageView: FC< paddingTop: 0, }} > - - + +

{organization.display_name || organization.name} diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index f205194a1aded..097b8fce513e7 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -26,6 +26,7 @@ import { ActiveUserChart, ActiveUsersTitle, } from "components/ActiveUserChart/ActiveUserChart"; +import { Avatar } from "components/Avatar/Avatar"; import { HelpTooltip, HelpTooltipContent, @@ -35,7 +36,6 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { Loader } from "components/Loader/Loader"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { addHours, addWeeks, @@ -316,10 +316,7 @@ const UsersLatencyPanel: FC = ({ }} >

- +

{row.username}

= ({ }} >

- +

{row.username}

= ({ } > - - {hasIcon ? ( - - ) : ( - {template.name} - )} + +

diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index f2cf6bd695fe2..bd8e7e846a011 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -2,11 +2,11 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import Button from "@mui/material/Button"; import TableCell from "@mui/material/TableCell"; import type { TemplateVersion } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; @@ -49,9 +49,9 @@ export const VersionRow: FC = ({ justifyContent="space-between" > - = ({ template }) => { + } title={template.display_name || template.name} linkTo={getLink( diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index a69f7657c8bbd..33f1b227e0af2 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -17,10 +17,10 @@ import type { TemplateRole, TemplateUser, } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { MoreMenu, MoreMenuContent, @@ -257,9 +257,9 @@ export const TemplatePermissionsPageView: FC< } title={group.display_name || group.name} diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx index 07c0c58969848..7b0f643eac39f 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx @@ -4,7 +4,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import TextField from "@mui/material/TextField"; import { templaceACLAvailable } from "api/queries/templates"; import type { Group, ReducedUser } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, type FC, useState } from "react"; import { useQuery } from "react-query"; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx index bb9bbb7c72732..fe02ff909d169 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx @@ -217,7 +217,10 @@ export const TemplateVersionEditor: FC = ({

- + ({ label: org.display_name || org.name, value: org.name, startIcon: ( - + ), }); diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 34667c437ceee..d936abb781b90 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -12,8 +12,9 @@ import TableRow from "@mui/material/TableRow"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; import type { useFilter } from "components/Filter/Filter"; import { @@ -36,7 +37,6 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; @@ -110,16 +110,14 @@ const TemplateRow: FC = ({ showOrganizations, template }) => { > 0 - ? template.display_name - : template.name - } + title={template.display_name || template.name} subtitle={template.description} avatar={ - hasIcon && ( - - ) + } /> diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx index 23df9fa7f3e36..49c30523519a1 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx @@ -3,7 +3,7 @@ import Grid from "@mui/material/Grid"; import { isApiError } from "api/errors"; import type { Group } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarCard } from "components/AvatarCard/AvatarCard"; +import { AvatarCard } from "components/Avatar/AvatarCard"; import { Loader } from "components/Loader/Loader"; import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; @@ -53,9 +53,7 @@ export const AccountUserGroups: FC = ({ {groups.map((group) => ( = ({ ? externalAuth.authenticated : (link?.authenticated ?? false); - let avatar = app.display_icon ? ( - - ) : ( - {name} - ); - - // If the link is authenticated and has a refresh token, show that it will automatically - // attempt to authenticate when the token expires. - if (link?.has_refresh_token && authenticated) { - avatar = ( - - - - } - > - {avatar} - - ); - } - return ( - - {link?.validate_error && ( - <> - + + {name} + {/* + * If the link is authenticated and has a refresh token, show that it will automatically + * attempt to authenticate when the token expires. + */} + {link?.has_refresh_token && authenticated && ( + - Error:{" "} + + + )} + + {link?.validate_error && ( + + + Error:{" "} + + {link?.validate_error} - {link?.validate_error} - - )} + )} + = ({ app, revoke }) => { return ( - - ) - } - /> + + + {app.name} + diff --git a/site/src/pages/UserSettingsPage/Sidebar.tsx b/site/src/pages/UserSettingsPage/Sidebar.tsx index 196f34d5ce0e1..5cc8c54dcbda9 100644 --- a/site/src/pages/UserSettingsPage/Sidebar.tsx +++ b/site/src/pages/UserSettingsPage/Sidebar.tsx @@ -6,6 +6,7 @@ import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined"; import AccountIcon from "@mui/icons-material/Person"; import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"; import type { User } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; import { GitIcon } from "components/Icons/GitIcon"; import { @@ -13,7 +14,6 @@ import { SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; @@ -29,9 +29,7 @@ export const Sidebar: FC = ({ user }) => { return ( - } + avatar={} title={user.username} subtitle={user.email} /> diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 0005e1fe28a68..7da859a1e0b91 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,14 +2,14 @@ import { useTheme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { HealthyBadge, NotHealthyBadge, NotReachableBadge, NotRegisteredBadge, } from "components/Badges/Badges"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { ProxyLatencyReport } from "contexts/useProxyLatency"; import type { FC, ReactNode } from "react"; import { getLatencyColor } from "utils/latency"; @@ -40,31 +40,23 @@ export const ProxyRow: FC = ({ proxy, latency }) => { return ( <> - + 0 - ? proxy.display_name - : proxy.name - } + src={proxy.icon_url} + title={proxy.display_name || proxy.name} + subtitle={proxy.path_app_url} avatar={ - proxy.icon_url !== "" && ( - - ) + } /> - - {proxy.path_app_url} - - - {statusBadge} + +

{statusBadge}

= ({ title, messages }) => { css={{ borderBottom: `1px solid ${theme.palette.divider}`, backgroundColor: theme.palette.background.default, - padding: "16px 24px", + padding: "16px 64px", }} >

= ({ - Proxy - URL - Status + Proxy + + Status + Latency diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index 03d8bebcd2dbf..00f135abb2bdc 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -4,9 +4,9 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import TableCell from "@mui/material/TableCell"; import type { Group } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Popover, PopoverContent, @@ -99,9 +99,12 @@ export const UserGroupsCell: FC = ({ userGroups }) => { alignItems: "center", }} > - - {groupName} - + = ({ return ( - - + +

Build #{build.build_number} {build.initiator_name} diff --git a/site/src/pages/WorkspacePage/BuildRow.tsx b/site/src/pages/WorkspacePage/BuildRow.tsx index 8b4e9e5a564d1..366ff4b04d8f8 100644 --- a/site/src/pages/WorkspacePage/BuildRow.tsx +++ b/site/src/pages/WorkspacePage/BuildRow.tsx @@ -1,10 +1,10 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import type { WorkspaceBuild } from "api/typesGenerated"; -import { BuildAvatar } from "components/BuildAvatar/BuildAvatar"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { useClickable } from "hooks/useClickable"; +import { BuildAvatar } from "modules/builds/BuildAvatar/BuildAvatar"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; import { diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index cd12862097f45..453baca597a2c 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,14 +6,14 @@ import CircularProgress from "@mui/material/CircularProgress"; import TextField from "@mui/material/TextField"; import type { Template, TemplateVersion } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import type { DialogProps } from "components/Dialogs/Dialog"; import { FormFields } from "components/Form/Form"; import { Loader } from "components/Loader/Loader"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage"; import { type FC, useRef, useState } from "react"; import { createDayString } from "utils/createDayString"; @@ -88,9 +88,10 @@ export const ChangeVersionDialog: FC = ({

- {option.name} - + } title={ = ({ - + {ownerName} @@ -319,7 +313,7 @@ const OrganizationBreadcrumb: FC = ({ - + {orgName} @@ -345,12 +339,7 @@ const OrganizationBreadcrumb: FC = ({ subtitle="Organization" avatar={ orgIconUrl && ( - + ) } imgFallbackText={orgName} @@ -381,7 +370,7 @@ const WorkspaceBreadcrumb: FC = ({ - + {workspaceName} @@ -412,11 +401,10 @@ const WorkspaceBreadcrumb: FC = ({ } avatar={ - } imgFallbackText={templateDisplayName} @@ -440,6 +428,7 @@ const styles = { breadcrumbSegment: { display: "flex", + alignItems: "center", flexFlow: "row nowrap", gap: "8px", maxWidth: "160px", diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index b89e6f5b7d887..604fc2ed70d23 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -2,12 +2,12 @@ import ParameterIcon from "@mui/icons-material/CodeOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Workspace } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; interface SidebarProps { @@ -20,7 +20,11 @@ export const Sidebar: FC = ({ username, workspace }) => { + } title={workspace.name} linkTo={`/@${username}/${workspace.name}`} diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index d97ff9e2a7551..504a8e156ce5f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -3,11 +3,11 @@ import OpenIcon from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import type { Template } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; import { SearchEmpty, searchStyles } from "components/Search/Search"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Popover, PopoverContent, @@ -21,8 +21,6 @@ import { type LinkProps as RouterLinkProps, } from "react-router-dom"; -const ICON_SIZE = 18; - type TemplatesQuery = UseQueryResult; interface WorkspacesButtonProps { @@ -141,18 +139,10 @@ const WorkspaceResultsRow: FC = ({ template }) => { }} > - {template.display_name || "-"} - + fallback={template.display_name || template.name} + />

({ diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index dcf96ec5c0d8b..80b5602ba2c4c 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -1,8 +1,8 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; import Button from "@mui/material/Button"; import type { Template } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { Link } from "react-router-dom"; @@ -122,14 +122,7 @@ export const WorkspacesEmpty: FC = ({ })} >

- - {t.name} - +

diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 2ca1b28ca1632..d3ed0d650e9a6 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,15 +11,15 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { Avatar } from "components/Avatar/Avatar"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Stack } from "components/Stack/Stack"; import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import { useDashboard } from "modules/dashboard/useDashboard"; import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge"; @@ -186,15 +186,11 @@ export const WorkspacesTable: FC = ({

} avatar={ - - {workspace.name} - + fallback={workspace.name} + /> } />

diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 7a2d79c606e1f..52e655914cec5 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -1,5 +1,6 @@ import { API } from "api/api"; -import type { WorkspaceStatus } from "api/typesGenerated"; +import type { Template, WorkspaceStatus } from "api/typesGenerated"; +import { Avatar } from "components/Avatar/Avatar"; import { SelectFilter, type SelectFilterOption, @@ -10,7 +11,6 @@ import { useFilterMenu, } from "components/Filter/menu"; import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; -import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar"; import type { FC } from "react"; import { getDisplayWorkspaceStatus } from "utils/workspace"; @@ -30,7 +30,7 @@ export const useTemplateFilterMenu = ({ return { label: template.display_name || template.name, value: template.name, - startIcon: , + startIcon: , } satisfies SelectFilterOption; } return null; @@ -46,12 +46,23 @@ export const useTemplateFilterMenu = ({ return filteredTemplates.map((template) => ({ label: template.display_name || template.name, value: template.name, - startIcon: , + startIcon: , })); }, }); }; +const TemplateAvatar: FC<{ template: Template }> = ({ template }) => { + return ( + + ); +}; + export type TemplateFilterMenu = ReturnType; type TemplateMenuProps = Readonly<{ pFad - Phonifier reborn

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.