From 9940cabb5725f77acf127a605abc269132eef15e Mon Sep 17 00:00:00 2001 From: p-andhika Date: Fri, 3 Jan 2025 16:56:01 +0700 Subject: [PATCH 1/3] fix: improve layout and styling for order details and toggle filter components --- .../components/orders/DetailsTable/index.tsx | 1 + .../OrdersUserDetailsTable/ToggleFilter.tsx | 17 ++++++++--------- .../components/TransanctionBatchGraph/styled.ts | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/explorer/src/components/orders/DetailsTable/index.tsx b/apps/explorer/src/components/orders/DetailsTable/index.tsx index a52aaa8af1..96a7d1aa15 100644 --- a/apps/explorer/src/components/orders/DetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/DetailsTable/index.tsx @@ -92,6 +92,7 @@ export const Wrapper = styled.div` display: flex; flex-direction: row; + align-items: center; ${Media.upToSmall()} { flex-direction: column; diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx index 64c0691ead..b1a0488d0f 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx @@ -1,5 +1,6 @@ import React from 'react' +import { FloatingButton } from 'explorer/components/TransanctionBatchGraph/styled' import styled from 'styled-components/macro' interface BadgeProps { @@ -10,18 +11,16 @@ interface BadgeProps { } const Wrapper = styled.div<{ checked: boolean }>` - display: inline-block; - padding: 5px 10px; - border-radius: 20px; - background-color: ${({ checked }) => (checked ? '#007bff' : '#e0e0e0')}; - color: ${({ checked }) => (checked ? '#fff' : '#000')}; - cursor: pointer; - user-select: none; - font-size: 11px; + ${FloatingButton} { + display: flex; + align-items: center; + padding: 0 8px; + font-size: ${({ theme }): string => theme.fontSizeDefault}; + } ` const Label = styled.span` - margin-right: 10px; + margin-right: 8px; ` const Count = styled.span` diff --git a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts index b3a3ce44fd..1bd0729f55 100644 --- a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts +++ b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts @@ -30,7 +30,7 @@ export const FloatingWrapper = styled.div` } ` -const FloatingButton = css` +export const FloatingButton = css` cursor: pointer; color: ${({ theme }): string => theme.white}; height: 3rem; From 3494dff0d0a197cc0c22af4ecb145a90999af9a4 Mon Sep 17 00:00:00 2001 From: p-andhika Date: Tue, 7 Jan 2025 15:38:22 +0700 Subject: [PATCH 2/3] fix: enhance styling and responsiveness of ToggleFilter component --- .../OrdersUserDetailsTable/ToggleFilter.tsx | 29 +++++++++++++++---- .../TransanctionBatchGraph/styled.ts | 2 +- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx index b1a0488d0f..ac1547d30f 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { FloatingButton } from 'explorer/components/TransanctionBatchGraph/styled' import styled from 'styled-components/macro' +import { MEDIA } from '../../../const' + interface BadgeProps { checked: boolean onChange: () => void @@ -11,11 +12,27 @@ interface BadgeProps { } const Wrapper = styled.div<{ checked: boolean }>` - ${FloatingButton} { - display: flex; - align-items: center; - padding: 0 8px; - font-size: ${({ theme }): string => theme.fontSizeDefault}; + display: flex; + align-items: center; + padding: 0 8px; + font-size: ${({ theme }): string => theme.fontSizeDefault}; + cursor: pointer; + color: ${({ theme }): string => theme.white}; + height: 3rem; + border: 1px solid ${({ theme }): string => theme.borderPrimary}; + border-radius: 0.5rem; + background: ${({ theme }): string => theme.bg2}; + + &:hover { + transition: all 0.2s ease-in-out; + color: ${({ theme }): string => theme.textActive1}; + } + + @media ${MEDIA.mediumDown} { + min-width: 3rem; + span { + display: none; + } } ` diff --git a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts index 1bd0729f55..b3a3ce44fd 100644 --- a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts +++ b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts @@ -30,7 +30,7 @@ export const FloatingWrapper = styled.div` } ` -export const FloatingButton = css` +const FloatingButton = css` cursor: pointer; color: ${({ theme }): string => theme.white}; height: 3rem; From 08602d862ae26858d80f38498036c38e8f62d8a0 Mon Sep 17 00:00:00 2001 From: p-andhika Date: Wed, 8 Jan 2025 22:32:07 +0700 Subject: [PATCH 3/3] fix: update alignment and color logic in DetailsTable and ToggleFilter components --- apps/explorer/src/components/orders/DetailsTable/index.tsx | 5 ++++- .../orders/OrdersUserDetailsTable/ToggleFilter.tsx | 5 +---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/explorer/src/components/orders/DetailsTable/index.tsx b/apps/explorer/src/components/orders/DetailsTable/index.tsx index 96a7d1aa15..6d7857239a 100644 --- a/apps/explorer/src/components/orders/DetailsTable/index.tsx +++ b/apps/explorer/src/components/orders/DetailsTable/index.tsx @@ -92,7 +92,10 @@ export const Wrapper = styled.div` display: flex; flex-direction: row; - align-items: center; + + ${Media.MediumAndUp()} { + align-items: center; + } ${Media.upToSmall()} { flex-direction: column; diff --git a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx index ac1547d30f..6224308128 100644 --- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx +++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx @@ -17,7 +17,7 @@ const Wrapper = styled.div<{ checked: boolean }>` padding: 0 8px; font-size: ${({ theme }): string => theme.fontSizeDefault}; cursor: pointer; - color: ${({ theme }): string => theme.white}; + color: ${({ checked, theme }): string => (checked ? theme.textActive1 : theme.white)}; height: 3rem; border: 1px solid ${({ theme }): string => theme.borderPrimary}; border-radius: 0.5rem; @@ -30,9 +30,6 @@ const Wrapper = styled.div<{ checked: boolean }>` @media ${MEDIA.mediumDown} { min-width: 3rem; - span { - display: none; - } } `