diff --git a/browser/data-browser/src/components/Button.tsx b/browser/data-browser/src/components/Button.tsx index cb8a99226..31be00e89 100644 --- a/browser/data-browser/src/components/Button.tsx +++ b/browser/data-browser/src/components/Button.tsx @@ -195,7 +195,7 @@ export const ButtonSubtle = styled(ButtonDefault)` --button-text-color: ${p => p.theme.colors.textLight}; --button-text-color-hover: ${p => p.theme.colors.main}; - box-shadow: ${p => p.theme.boxShadow}; + box-shadow: ${p => (p.theme.darkMode ? 'none' : p.theme.boxShadow)}; `; export const ButtonAlert = styled(ButtonDefault)` diff --git a/browser/data-browser/src/components/SideBar/SideBarDrive.tsx b/browser/data-browser/src/components/SideBar/SideBarDrive.tsx index a37c12af4..d952731ce 100644 --- a/browser/data-browser/src/components/SideBar/SideBarDrive.tsx +++ b/browser/data-browser/src/components/SideBar/SideBarDrive.tsx @@ -192,16 +192,28 @@ const AddButton = styled.button` appearance: none; border: 1px dashed ${p => p.theme.colors.bg2}; border-radius: ${p => p.theme.radius}; - width: calc(100% - 4rem); + width: calc(100% - 5rem); padding-block: 0.3rem; - margin-inline-start: 1.5rem; - margin-block: 0.5rem; + margin-inline-start: 2rem; + margin-block-start: 0.5rem; + margin-block-end: 1rem; cursor: pointer; ${transition('color', 'border')} + & svg { + ${transition('transform')} + } &:hover, &:focus-visible { color: ${p => p.theme.colors.main}; border: 1px solid ${p => p.theme.colors.main}; + + & svg { + transform: scale(1.3); + } + } + + &:active { + background-color: ${p => p.theme.colors.bg1}; } `;