diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/withSidebar.tsx index 0ac5bcb60fe79..caa4f95ecbd6c 100644 --- a/apps/site/components/withSidebar.tsx +++ b/apps/site/components/withSidebar.tsx @@ -16,7 +16,6 @@ import type { FC } from 'react'; type WithSidebarProps = { navKeys: Array; context?: Record; - showProgressionIcons?: boolean; }; const WithSidebar: FC = ({ navKeys, context, ...props }) => { diff --git a/apps/site/layouts/Learn.tsx b/apps/site/layouts/Learn.tsx index 919fb04c0132c..cc297de76b871 100644 --- a/apps/site/layouts/Learn.tsx +++ b/apps/site/layouts/Learn.tsx @@ -14,7 +14,7 @@ const LearnLayout: FC = ({ children }) => (
- +
diff --git a/packages/ui-components/src/Containers/Sidebar/ProgressionIcon/index.tsx b/packages/ui-components/src/Containers/Sidebar/ProgressionIcon/index.tsx deleted file mode 100644 index 841ade4b62737..0000000000000 --- a/packages/ui-components/src/Containers/Sidebar/ProgressionIcon/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { FC, SVGAttributes } from 'react'; - -const ProgressionIcon: FC> = props => ( - - - -); - -export default ProgressionIcon; diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css index 30fb5aba48436..0cecc21978828 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css @@ -6,67 +6,19 @@ flex-col gap-2; - /* Default item list spacing for non-progression groups */ + /* Default item list spacing for groups */ .itemList { @apply flex flex-col gap-1; } - &:not(.progression) { - .groupName { - @apply px-2 - py-1 - text-xs - font-semibold - text-neutral-800 - dark:text-neutral-600; - } - } - - &.progression { - @apply flex - flex-col - gap-4 - text-sm - font-medium + .groupName { + @apply px-2 + py-1 + text-xs + font-semibold text-neutral-800 - dark:text-neutral-200; - - .itemList { - @apply relative - -left-1 - flex - flex-col - gap-px - after:absolute - after:top-0 - after:left-[0.45rem] - after:z-10 - after:h-full - after:w-px - after:bg-neutral-200 - after:content-[''] - dark:after:bg-neutral-800; - - a { - @apply first:before:absolute - first:before:bottom-[calc(50%+0.25rem)] - first:before:left-0 - first:before:h-20 - first:before:w-4 - first:before:bg-white - first:before:content-[''] - last:after:absolute - last:after:top-[calc(50%+0.25rem)] - last:after:left-0 - last:after:h-20 - last:after:w-4 - last:after:bg-white - last:after:content-[''] - first:dark:before:bg-neutral-950 - last:dark:after:bg-neutral-950; - } - } + dark:text-neutral-600; } } diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx index 92c91bafe5dea..e156939474058 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx +++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx @@ -13,35 +13,19 @@ type SidebarGroupProps = { as?: LinkLike; pathname?: string; className: string; - showProgressionIcons?: boolean; }; const SidebarGroup: FC = ({ groupName, items, - showProgressionIcons, className, ...props }) => ( -
+
    {items.map(({ label, link }) => ( - + ))}
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css index 12a2ffdbffb28..1b291235c344c 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css @@ -29,31 +29,7 @@ dark:text-neutral-200; } - &.progression { - &.active { - @apply text-neutral-900 - dark:text-white; - - .hexagonIcon { - @apply fill-green-500; - } - } - - .label { - @apply p-1; - } - - .hexagonIcon { - @apply shrink-0 - fill-neutral-200 - stroke-white - stroke-[4] - dark:fill-neutral-800 - dark:stroke-neutral-950; - } - } - - &:not(.active):not(.progression):hover { + &:not(.active):hover { /* Apply hover background to the full item width */ @apply bg-neutral-100 dark:bg-neutral-900; @@ -71,7 +47,7 @@ } } - &.active:not(.progression) { + &.active { /* Full-width active background and readable text */ @apply bg-green-600 text-white; diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx index 7e36a33f821a1..3fa8912a6fad3 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx +++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx @@ -1,13 +1,10 @@ import { ArrowUpRightIcon } from '@heroicons/react/24/solid'; -import classNames from 'classnames'; import BaseActiveLink from '#ui/Common/BaseActiveLink'; import type { FormattedMessage, LinkLike } from '#ui/types'; import type { FC } from 'react'; -import ProgressionIcon from '../ProgressionIcon'; - import styles from './index.module.css'; type SidebarItemProps = { @@ -15,26 +12,15 @@ type SidebarItemProps = { link: string; as?: LinkLike; pathname?: string; - showProgressionIcons?: boolean; }; -const SidebarItem: FC = ({ - label, - link, - showProgressionIcons = false, - ...props -}) => ( +const SidebarItem: FC = ({ label, link, ...props }) => ( - {showProgressionIcons && } -
{label} diff --git a/packages/ui-components/src/Containers/Sidebar/index.stories.tsx b/packages/ui-components/src/Containers/Sidebar/index.stories.tsx index f6d37ce233271..4f22e462c89c3 100644 --- a/packages/ui-components/src/Containers/Sidebar/index.stories.tsx +++ b/packages/ui-components/src/Containers/Sidebar/index.stories.tsx @@ -81,8 +81,5 @@ const args = { }; export const Default: Story = { args }; -export const Progression: Story = { - args: { ...args, showProgressionIcons: true }, -}; export default { component: Sidebar } as Meta; diff --git a/packages/ui-components/src/Containers/Sidebar/index.tsx b/packages/ui-components/src/Containers/Sidebar/index.tsx index 26a8cb908b748..beb479d8a8bdc 100644 --- a/packages/ui-components/src/Containers/Sidebar/index.tsx +++ b/packages/ui-components/src/Containers/Sidebar/index.tsx @@ -14,7 +14,6 @@ type SidebarProps = { title: string; onSelect: (value: string) => void; as?: LinkLike; - showProgressionIcons?: boolean; placeholder?: string; }; @@ -24,7 +23,6 @@ const SideBar: FC> = ({ title, onSelect, as, - showProgressionIcons = false, children, placeholder, }) => { @@ -60,7 +58,6 @@ const SideBar: FC> = ({ items={items} pathname={pathname} as={as} - showProgressionIcons={showProgressionIcons} className={styles.navigation} /> ))}