From 7d3242c19f50993babcc71bf988e089c3962f61d Mon Sep 17 00:00:00 2001
From: Andhika Prakasiwi <p.andhika@op.iitg.ac.in>
Date: Mon, 13 Jan 2025 16:58:25 +0700
Subject: [PATCH] fix(explorer): ui Adjustment (#5268)

* fix: improve layout and styling for order details and toggle filter components

* fix: enhance styling and responsiveness of ToggleFilter component

* fix: update alignment and color logic in DetailsTable and ToggleFilter components

* fix: add media query for hover effect in ToggleFilter component

---------

Co-authored-by: Leandro <alfetopito@users.noreply.github.com>
---
 .../components/orders/DetailsTable/index.tsx  |  4 +++
 .../OrdersUserDetailsTable/ToggleFilter.tsx   | 31 ++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/apps/explorer/src/components/orders/DetailsTable/index.tsx b/apps/explorer/src/components/orders/DetailsTable/index.tsx
index a52aaa8af1..6d7857239a 100644
--- a/apps/explorer/src/components/orders/DetailsTable/index.tsx
+++ b/apps/explorer/src/components/orders/DetailsTable/index.tsx
@@ -93,6 +93,10 @@ export const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
 
+  ${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 64c0691ead..cca8b28bf8 100644
--- a/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx
+++ b/apps/explorer/src/components/orders/OrdersUserDetailsTable/ToggleFilter.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 
 import styled from 'styled-components/macro'
 
+import { MEDIA } from '../../../const'
+
 interface BadgeProps {
   checked: boolean
   onChange: () => void
@@ -10,18 +12,31 @@ 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')};
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
   cursor: pointer;
-  user-select: none;
-  font-size: 11px;
+  color: ${({ checked, theme }): string => (checked ? theme.textActive1 : theme.white)};
+  height: 3rem;
+  border: 1px solid ${({ theme }): string => theme.borderPrimary};
+  border-radius: 0.5rem;
+  background: ${({ theme }): string => theme.bg2};
+
+  &media ${MEDIA.mediumUp} {
+    &:hover {
+      transition: all 0.2s ease-in-out;
+      color: ${({ theme }): string => theme.textActive1};
+    }
+  }
+
+  @media ${MEDIA.mediumDown} {
+    min-width: 3rem;
+  }
 `
 
 const Label = styled.span`
-  margin-right: 10px;
+  margin-right: 8px;
 `
 
 const Count = styled.span`