Tweak new resource buttons appearance

atomicdata-dev · Jun 20, 2024 · e95ac70 · e95ac70
1 parent 17085ab
commit e95ac70
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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};
   }
 `;