fixed a few small regressions

pluralsh · Aug 26, 2024 · 13f5c32 · 13f5c32
1 parent c96443d
commit 13f5c32
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/www/src/components/layout/Sidebar.tsx b/www/src/components/layout/Sidebar.tsx
@@ -7,9 +7,8 @@ import {
   useState,
 } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { Menu, MenuItem } from 'honorable'
+import { Avatar, Menu, MenuItem } from 'honorable'
 import {
-  AppIcon,
   ArrowTopRightIcon,
   BellIcon,
   BrowseAppsIcon,
@@ -234,6 +233,11 @@ function Sidebar(props: Omit<ComponentProps<typeof DSSidebar>, 'variant'>) {
                 clickable
                 tooltip={item.text}
                 className={`sidebar-${item.text}`}
+                style={{
+                  outline: isActive
+                    ? `1px solid ${theme.colors['border-fill-two']}`
+                    : undefined,
+                }}
                 as={Link}
                 to={item.path}
                 active={isActive}
@@ -293,22 +297,18 @@ function Sidebar(props: Omit<ComponentProps<typeof DSSidebar>, 'variant'>) {
             active={isMenuOpen}
             clickable
             collapsed
-            onClick={() => setIsMenuOpened((x) => !x)}
-            userSelect="none"
+            onClick={(e) => {
+              e.stopPropagation()
+              setIsMenuOpened((x) => !x)
+            }}
+            css={{
+              paddingLeft: theme.spacing.xxsmall,
+            }}
           >
-            <AppIcon
-              clickable
-              url={me.avatar || undefined}
-              name={me.name || undefined}
-              size="xxsmall"
-              spacing={me.avatar ? 'none' : undefined}
-              css={{
-                color: theme.colors['action-always-white'],
-                backgroundColor: theme.colors['action-primary'],
-                '&:hover': {
-                  backgroundColor: theme.colors['action-primary-hover'],
-                },
-              }}
+            <Avatar
+              name={me.name}
+              src={me.avatar}
+              size={32}
             />
           </SidebarItem>
         </SidebarSection>

diff --git a/www/src/components/marketplace/MarketplaceSidebar.tsx b/www/src/components/marketplace/MarketplaceSidebar.tsx
@@ -57,6 +57,8 @@ function AccordionWithExpanded({ children, ...props }: any) {
     <Accordion
       expanded={expanded}
       onExpand={() => setExpanded(!expanded)}
+      background="transparent"
+      boxShadow="none"
       {...props}
     >
       {children(expanded)}

diff --git a/www/src/components/marketplace/RepoCardList.tsx b/www/src/components/marketplace/RepoCardList.tsx
@@ -1,6 +1,6 @@
 import { RepositoryCard } from '@pluralsh/design-system'
 import { Link } from 'react-router-dom'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import { CardGrid } from '../utils/layout/CardGrid'
 import { getRepoIcon } from '../repository/misc'
@@ -17,9 +17,9 @@ export function RepoCardList({
   return (
     <CardGrid {...props}>
       {repositories?.map((repository) => (
-        <RepositoryCard
+        <FixedRepositoryCard
           key={repository.id}
-          as={Link}
+          forwardedAs={Link}
           to={`/repository/${repository.name}${
             urlParams ? `?${urlParams}` : ''
           }`}
@@ -43,3 +43,11 @@ export function RepoCardList({
     </CardGrid>
   )
 }
+
+const FixedRepositoryCard = styled(RepositoryCard)(({ theme }) => ({
+  flexDirection: 'column',
+  padding: theme.spacing.large,
+  width: '100%',
+  position: 'relative',
+  textDecoration: 'none',
+}))