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
fix pagination
  • Loading branch information
@aslilac
aslilac committed Dec 19, 2023
commit 00c9f74adcc64a90a4984eb631e8262bc9f7cebb
31 changes: 19 additions & 12 deletions site/src/components/PaginationWidget/PageButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PropsWithChildren } from "react";
import { type FC, type PropsWithChildren } from "react";
import Button from "@mui/material/Button";
import { useTheme } from "@emotion/react";

Expand All @@ -11,13 +11,13 @@ type NumberedPageButtonProps = {
disabled?: boolean;
};

export function NumberedPageButton({
export const NumberedPageButton: FC<NumberedPageButtonProps> = ({
pageNumber,
totalPages,
onClick,
highlighted = false,
disabled = false,
}: NumberedPageButtonProps) {
}) => {
return (
<BasePageButton
name="Page button"
Expand All @@ -29,16 +29,16 @@ export function NumberedPageButton({
{pageNumber}
</BasePageButton>
);
}
};

type PlaceholderPageButtonProps = PropsWithChildren<{
pagesOmitted: number;
}>;

export function PlaceholderPageButton({
export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
pagesOmitted,
children = <>&hellip;</>,
}: PlaceholderPageButtonProps) {
}) => {
return (
<BasePageButton
disabled
Expand All @@ -48,7 +48,7 @@ export function PlaceholderPageButton({
{children}
</BasePageButton>
);
}
};

type BasePageButtonProps = PropsWithChildren<{
name: string;
Expand All @@ -59,22 +59,29 @@ type BasePageButtonProps = PropsWithChildren<{
disabled?: boolean;
}>;

function BasePageButton({
const BasePageButton: FC<BasePageButtonProps> = ({
children,
onClick,
name,
"aria-label": ariaLabel,
highlighted = false,
disabled = false,
}: BasePageButtonProps) {
}) => {
const theme = useTheme();

return (
<Button
css={
highlighted && {
borderColor: `${theme.palette.info.main}`,
backgroundColor: `${theme.palette.info.dark}`,
borderColor: theme.experimental.roles.active.outline,
backgroundColor: theme.experimental.roles.active.background,

// Override the hover state with active colors, but not hover
// colors because clicking won't do anything.
"&:hover": {
borderColor: theme.experimental.roles.active.outline,
backgroundColor: theme.experimental.roles.active.background,
},
}
}
aria-label={ariaLabel}
Expand All @@ -85,7 +92,7 @@ function BasePageButton({
{children}
</Button>
);
}
};

function getNumberedButtonLabel(
page: number,
Expand Down
12 changes: 6 additions & 6 deletions site/src/components/PaginationWidget/PaginationWidgetBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@emotion/react";

import { type FC } from "react";
import { PlaceholderPageButton, NumberedPageButton } from "./PageButtons";
import { buildPagedList } from "./utils";
import { PaginationNavButton } from "./PaginationNavButton";
Expand All @@ -17,14 +17,14 @@ export type PaginationWidgetBaseProps = {
hasNextPage?: boolean;
};

export const PaginationWidgetBase = ({
export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
currentPage,
pageSize,
totalRecords,
onPageChange,
hasPreviousPage,
hasNextPage,
}: PaginationWidgetBaseProps) => {
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const totalPages = Math.ceil(totalRecords / pageSize);
Expand Down Expand Up @@ -99,11 +99,11 @@ type PaginationRowProps = {
onChange: (newPage: number) => void;
};

function PaginationRow({
const PaginationRow: FC<PaginationRowProps> = ({
currentPage,
totalPages,
onChange,
}: PaginationRowProps) {
}) => {
const pageInfo = buildPagedList(totalPages, currentPage);
const pagesOmitted = totalPages - pageInfo.length - 1;

Expand Down Expand Up @@ -131,4 +131,4 @@ function PaginationRow({
})}
</>
);
}
};
4 changes: 2 additions & 2 deletions site/src/theme/light/experimental.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ export default {
text: colors.sky[200],
},
hover: {
background: colors.sky[100],
outline: colors.sky[500],
background: colors.sky[200],
outline: colors.sky[400],
fill: colors.sky[500],
text: colors.black,
},
Expand Down