Various small UI styling improvements

atomicdata-dev · Nov 11, 2024 · 3d809ed · 3d809ed
1 parent d29a313
commit 3d809ed
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 31 deletions.
diff --git a/browser/data-browser/src/components/Details.tsx b/browser/data-browser/src/components/Details.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import { FaCaretRight } from 'react-icons/fa';
 import { Collapse } from './Collapse';
+import { IconButton } from './IconButton/IconButton';
 
 export interface DetailsProps {
   open?: boolean;
@@ -44,15 +45,15 @@ export function Details({
   return (
     <>
       <SummaryWrapper>
-        <IconButton
+        <StyledIconButton
           type='button'
+          title={isOpen ? 'collapse' : 'expand'}
           onClick={toggleOpen}
-          turn={!!isOpen}
           hide={!!disabled}
           aria-label={isOpen ? 'collapse' : 'expand'}
         >
-          <Icon />
-        </IconButton>
+          <Icon turn={!!isOpen} />
+        </StyledIconButton>
         <TitleWrapper>{title}</TitleWrapper>
       </SummaryWrapper>
       <StyledCollapse open={!!isOpen} noIndent={noIndent}>
@@ -77,39 +78,27 @@ const TitleWrapper = styled.div`
   }
 `;
 
-interface IconButtonProps {
-  turn: boolean;
-  hide: boolean;
-}
-
-const Icon = styled(FaCaretRight)`
+const Icon = styled(FaCaretRight)<{ turn: boolean }>`
   color: ${({ theme }) => theme.colors.main};
   margin-top: auto;
   cursor: pointer;
   * {
     cursor: pointer;
   }
-  font-size: 1.2rem;
-`;
-
-const IconButton = styled.button<IconButtonProps>`
   --speed: ${p => p.theme.animation.duration};
-  aspect-ratio: 1/1;
-  display: flex;
-  align-items: center;
-  padding: 0.2rem;
-  visibility: ${props => (props.hide ? 'hidden' : 'visible')};
   transition:
     transform var(--speed) ease-in-out,
     background-color var(--speed) ease;
   transform: rotate(${props => (props.turn ? '90deg' : '0deg')});
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
-  &:hover,
-  &:focus {
-    background-color: ${p => p.theme.colors.bg1};
-  }
+  aspect-ratio: 1/1;
+  display: flex;
+  align-items: center;
+`;
+
+const StyledIconButton = styled(IconButton)<{ hide: boolean }>`
+  font-size: 1rem;
+  margin-right: -0.3rem;
+  visibility: ${props => (props.hide ? 'hidden' : 'visible')};
 `;
 
 const StyledCollapse = styled(Collapse)<{ noIndent?: boolean }>`

diff --git a/browser/data-browser/src/components/SideBar/SideBarItem.ts b/browser/data-browser/src/components/SideBar/SideBarItem.ts
@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { transition } from '../../helpers/transition';
 
 export interface SideBarItemProps {
   disabled?: boolean;
@@ -13,7 +14,7 @@ export const SideBarItem = styled('span')<SideBarItemProps>`
   justify-content: flex-start;
   color: ${p => (p.disabled ? p.theme.colors.main : p.theme.colors.textLight)};
   padding: 0.2rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   text-overflow: ellipsis;
   text-decoration: none;
   border-radius: ${p => p.theme.radius};
@@ -24,7 +25,9 @@ export const SideBarItem = styled('span')<SideBarItemProps>`
     color: ${p => (p.disabled ? p.theme.colors.main : p.theme.colors.text)};
   }
   &:active {
-    opacity: 0.5;
+    // filter: brightness(0.95);
+    background-color: ${p => p.theme.colors.bg2};
+    // opacity: 0.5;
   }
 
   svg {

diff --git a/browser/data-browser/src/components/SideBar/SideBarPanel.tsx b/browser/data-browser/src/components/SideBar/SideBarPanel.tsx
@@ -22,11 +22,15 @@ export function SideBarPanel({
           {title}
         </PanelDevider>
       </DeviderButton>
-      <Collapse open={open}>{children}</Collapse>
+      <StyledCollapse open={open}>{children}</StyledCollapse>
     </Wrapper>
   );
 }
 
+const StyledCollapse = styled(Collapse)`
+  padding-inline: 1rem;
+`;
+
 export const PanelDevider = styled.h2`
   font-size: inherit;
   font-weight: normal;

diff --git a/browser/data-browser/src/components/WarningBlock.tsx b/browser/data-browser/src/components/WarningBlock.tsx
@@ -9,14 +9,12 @@ export function WarningBlock({
 }
 
 const Wrapper = styled.div`
-  background-color: ${p => lighten(0.4, p.theme.colors.warning)};
   border: 2px solid ${p => lighten(0.2, p.theme.colors.warning)};
   border-radius: ${p => p.theme.radius};
   padding: 1rem;
 `;
 
 WarningBlock.Title = styled.p`
   font-weight: bold;
-  color: ${p => lighten(-1, p.theme.colors.warning)};
   margin-bottom: 0px;
 `;