Skip to content

[version-4-1] docs: style packs table and remove underlines on cards DOC-1587 (#5833) #5842

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
vault-token-factory-spectrocloud merged 1 commit into from
Feb 21, 2025
Merged

[version-4-1] docs: style packs table and remove underlines on cards DOC-1587 (#5833) #5842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

const privacyIconSVG = `
<svg style="margin-right: 20px;" role="img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
<path fill="#1f7a78" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
<path fill="#aeb1be" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
</svg>
`;

Expand Down
10 changes: 9 additions & 1 deletion src/components/PacksTable/PacksTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,14 @@ const FilteredTable: React.FC = () => {
const [error, setError] = useState(false);
const { colorMode } = useColorMode();
const { defaultAlgorithm, darkAlgorithm } = theme;
const isDark = colorMode === "dark";
const customTheme = {
algorithm: isDark ? darkAlgorithm : defaultAlgorithm, // Start with the default dark theme
token: {
colorBgContainer: isDark ? "#012121" : "#F3F0EE",
colorPrimary: isDark ? "#44B2AF" : "#1F7A78",
},
};

useEffect(() => {
fetch("/packs-data/packs_report.json")
Expand Down Expand Up @@ -168,7 +176,7 @@ const FilteredTable: React.FC = () => {

return (
<div className={styles.tabPane}>
<ConfigProvider theme={{ algorithm: colorMode === "dark" ? darkAlgorithm : defaultAlgorithm }}>
<ConfigProvider theme={customTheme}>
<div className={styles.unsupportedMessage}>
<Admonition type="warning" title="Unsupported Display Size">
The current screen size is not supported. Use a larger display to access the Packs table.
Expand Down
7 changes: 4 additions & 3 deletions src/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,12 @@ html {
--ifm-link-decoration: underline;
}

// Remove link underlines from navbar, tags, and table of contents.
// Remove link underlines from navbar, tags, cards and table of contents.
nav a,
.table-of-contents a,
[class^="tag_"] {
text-decoration: none;
[class^="tag_"] a,
[class*="cardContainer_"] {
text-decoration: none !important;
}

// Adjust logo to be 40px high
Expand Down
1 change: 1 addition & 0 deletions src/css/dark-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ html[data-theme="dark"] {
--ifm-navbar-link-color: #ffffff;
--ifm-navbar-background-color: var(--ifm-background-color);
--ifm-toc-link-color: var(--ifm-font-color-base);
--ifm-card-background-color: var(--ifm-dropdown-background-color);
--ifm-tabs-color: #818ba9;
--docsearch-muted-color: #818ba9;
--ifm-menu-color-background-hover: var(--ifm-dropdown-background-color);
Expand Down
1 change: 1 addition & 0 deletions src/css/light-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ html[data-theme="light"] {
--ifm-color-danger-dark: #feeded;
--ifm-alert-padding-horizontal: 1.5rem;
--ifm-dropdown-background-color: var(--ifm-menu-color-background-active);
--ifm-card-background-color: var(--ifm-dropdown-background-color);
--custom-table-header-color: #f7f7f7;
--simpleCardPrimary: var(--ifm-color-primary);
--simpleCardPrimaryHover: #135757;
Expand Down