🕹️ Update buttons (#35)

efdevcon · Apr 25, 2024 · 93dfb7a · 93dfb7a
1 parent 45df029
commit 93dfb7a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 12 deletions.
diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx
@@ -10,7 +10,7 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      <BackButton url="/" withBack />
+      <BackButton url="/" />
       <Wrapper>
         <Title>
           <h2>Number of participants:</h2>

diff --git a/packages/frontend/src/components/buttons/BackButton.tsx b/packages/frontend/src/components/buttons/BackButton.tsx
@@ -9,10 +9,9 @@ interface BackButtonProps {
   setView?: (view: number) => void
   url?: string
   resetState?: () => void
-  withBack?: boolean
 }
 
-export function BackButton({ view, setView, url, resetState, withBack = false }: BackButtonProps) {
+export function BackButton({ view, setView, url, resetState }: BackButtonProps) {
   const router = useRouter()
 
   const goBack = useCallback(() => {
@@ -28,17 +27,16 @@ export function BackButton({ view, setView, url, resetState, withBack = false }:
   }, [setView, view, router, url, resetState])
 
   return (
-    <BackBtn onClick={goBack} $withBack={withBack}>
+    <BackBtn onClick={goBack}>
       <ArrowLeftIcon color={Colors.Black} />
-      {withBack && 'Back'}
     </BackBtn>
   )
 }
 
-const BackBtn = styled.button<{ $withBack?: boolean }>`
+const BackBtn = styled.button`
   display: flex;
   align-items: center;
-  width: ${({ $withBack }) => ($withBack ? '84px' : '35px')};
+  width: 35px;
   height: 32px;
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   font-weight: 400;

diff --git a/packages/frontend/src/components/icons/CloseIcon.tsx b/packages/frontend/src/components/icons/CloseIcon.tsx
@@ -2,7 +2,7 @@ import { IconProps } from '@/components/icons/IconBase'
 
 export const CloseIcon = ({ color, size, className }: IconProps) => {
   return (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" color={color} className={className}>
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" color={color} className={className}>
       <path d="M1 1L14 14" stroke="currentColor" />
       <path d="M1 14L14 0.999999" stroke="currentColor" />
     </svg>

diff --git a/packages/frontend/src/components/topBar/AccountDetailModal.tsx b/packages/frontend/src/components/topBar/AccountDetailModal.tsx
@@ -53,9 +53,7 @@ export const AccountDetailModal = ({ isShown, onRequestClose }: ModalProps) => {
           </>
         )}
       </ContentWrapper>
-      <Button view="secondary" onClick={onDisconnect}>
-        Disconnect
-      </Button>
+      <Button onClick={onDisconnect}>Disconnect</Button>
     </Modal>
   )
 }

diff --git a/packages/frontend/src/components/topBar/Modal.tsx b/packages/frontend/src/components/topBar/Modal.tsx
@@ -21,7 +21,7 @@ export const Modal = ({ isShown, onRequestClose, title, children }: ModalProps)
           <Content>
             <Header>
               <Title>{title}</Title>
-              <CloseButton size={24} color={Colors.Black} onClick={closeModal} />
+              <CloseButton size={16} color={Colors.Black} onClick={closeModal} />
             </Header>
             {children}
           </Content>