Skip to content

feat: add light theme #11266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Dec 20, 2023
Merged

feat: add light theme #11266

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0092d93
add light theme
aslilac Dec 18, 2023
ef3c623
🧹
aslilac Dec 18, 2023
d6717f3
Merge branch 'main' into light-theme
aslilac Dec 18, 2023
6833e6b
🧹
aslilac Dec 18, 2023
d86c20e
fix the editor
aslilac Dec 18, 2023
3eeb8d0
tweak story parameters
aslilac Dec 18, 2023
405d0f3
oh boy
aslilac Dec 18, 2023
d407ccf
✨
aslilac Dec 18, 2023
e81f23a
add some ignore attributes for chromatic
aslilac Dec 18, 2023
c22a879
next round
aslilac Dec 18, 2023
058991f
bunch of polish
aslilac Dec 19, 2023
6491117
add helm dependency update
matifali Dec 19, 2023
4cc558b
mark light as beta
aslilac Dec 19, 2023
0b4dc8d
fix some more issues
aslilac Dec 19, 2023
6314341
test
aslilac Dec 19, 2023
c07e571
Merge branch 'main' into light-theme
aslilac Dec 19, 2023
ee81c62
ok
aslilac Dec 19, 2023
4815604
whoops
aslilac Dec 19, 2023
c68faf0
revert `ExternalIcon` stuff
aslilac Dec 19, 2023
00c9f74
fix pagination
aslilac Dec 19, 2023
7121d45
ah
aslilac Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
revert ExternalIcon stuff
  • Loading branch information
@aslilac
aslilac committed Dec 19, 2023
commit c68faf0bbecd7ec0004e5d885e799d6ad46c81bd
8 changes: 6 additions & 2 deletions site/src/components/Resources/ResourceAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { type FC } from "react";
import type { WorkspaceResource } from "api/typesGenerated";
import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
import { Avatar, AvatarIcon } from "components/Avatar/Avatar";

const FALLBACK_ICON = "/icon/widgets.svg";

Expand Down Expand Up @@ -28,5 +28,9 @@ export type ResourceAvatarProps = { resource: WorkspaceResource };
export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
const avatarSrc = resource.icon || getIconPathResource(resource.type);

return <ExternalIcon src={avatarSrc} alt={resource.name} />;
return (
<Avatar background>
<AvatarIcon src={avatarSrc} alt={resource.name} />
</Avatar>
);
};
17 changes: 15 additions & 2 deletions site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { Stack } from "components/Stack/Stack";
import { Link } from "react-router-dom";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import type { TemplateExample } from "api/typesGenerated";
import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";

export interface StarterTemplatePageViewProps {
starterTemplate?: TemplateExample;
Expand Down Expand Up @@ -66,7 +65,21 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
}
>
<Stack direction="row" spacing={3} alignItems="center">
<ExternalIcon size={48} src={starterTemplate.icon} />
<div
css={{
height: 48,
width: 48,
display: "flex",
alignItems: "center",
justifyContent: "center",

"& img": {
width: "100%",
},
}}
>
<img src={starterTemplate.icon} alt="" />
</div>
<div>
<PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
<PageHeaderSubtitle condensed>
Expand Down
24 changes: 11 additions & 13 deletions site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ import type {
ExternalAuthLink,
} from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/AvatarData/AvatarData";
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
import { Stack } from "components/Stack/Stack";
import {
MoreMenu,
MoreMenuContent,
Expand All @@ -24,10 +25,7 @@ import {
ThreeDotsButton,
} from "components/MoreMenu/MoreMenu";
import { ExternalAuth } from "pages/CreateWorkspacePage/ExternalAuth";
import type { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";

const FALLBACK_ICON = "/icon/widgets.svg";
import { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";

export type ExternalAuthPageViewProps = {
isLoading: boolean;
Expand Down Expand Up @@ -131,13 +129,14 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
return (
<TableRow key={name}>
<TableCell>
<Stack direction="row" alignItems="center">
<ExternalIcon
title={app.display_name || app.id}
src={app.display_icon || FALLBACK_ICON}
/>
<span>{app.display_name}</span>
</Stack>
<AvatarData
title={app.display_name || app.id}
avatar={
app.display_icon && (
<Avatar src={app.display_icon} variant="square" fitImage />
)
}
/>
</TableCell>
<TableCell>
<ExternalAuth
Expand All @@ -150,7 +149,6 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
message={authenticated ? "Authenticated" : "Click to Login"}
externalAuthPollingState={externalAuthPollingState}
startPollingExternalAuth={startPollingExternalAuth}
fullWidth={false}
/>
</TableCell>
<TableCell>
Expand Down