From 5f12347ec20c50bfa7b7af4c1e6c1e59bef47e0c Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 13 Jul 2026 00:18:07 +0100
Subject: [PATCH] Enhance country and object type display styles in App.css and
 update related components for improved UI consistency. Added class names for
 better styling control and adjusted opacity settings for focused states.

---
 assets/stylesheets/App.css                           | 12 ++++++++++--
 src/components/Dashboard/common/CountryDisplay.jsx   |  2 +-
 src/components/Dashboard/common/CountrySelect.jsx    |  2 +-
 .../Dashboard/common/ObjectTypeDisplay.jsx           |  1 +
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 064b8b0..60766a3 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -80,12 +80,20 @@
   font-size: 95%;
 }
 
-.object-display-tag {
+.ant-select-selection-item .country-display {
+  margin-left: 1px !important;
+}
+
+.object-display-tag,
+.object-type-display-tag,
+.country-display {
   opacity: 1;
   transition: opacity 0.15s ease-in-out;
 }
 
-.ant-select-focused .object-display-tag {
+.ant-select-focused .object-display-tag,
+.ant-select-focused .object-type-display-tag,
+.ant-select-focused .country-display {
   opacity: 0.5;
 }
 
diff --git a/src/components/Dashboard/common/CountryDisplay.jsx b/src/components/Dashboard/common/CountryDisplay.jsx
index 7b9d40d..5087781 100644
--- a/src/components/Dashboard/common/CountryDisplay.jsx
+++ b/src/components/Dashboard/common/CountryDisplay.jsx
@@ -13,7 +13,7 @@ const CountryDisplay = ({ countryCode }) => {
   }
 
   return (
-    <Flex gap={'small'} align='center'>
+    <Flex gap={'small'} align='center' className='country-display'>
       <Flag
         code={country.code}
         size='middle'
diff --git a/src/components/Dashboard/common/CountrySelect.jsx b/src/components/Dashboard/common/CountrySelect.jsx
index d7af4de..abb1bd8 100644
--- a/src/components/Dashboard/common/CountrySelect.jsx
+++ b/src/components/Dashboard/common/CountrySelect.jsx
@@ -28,7 +28,7 @@ const CountrySelect = ({
           value: country.code,
           name: country.name,
           label: (
-            <Flex gap='small' align='center'>
+            <Flex gap='small' align='center' className='country-display'>
               <Flag code={country.code} size='small' borderRadius={3} />
               <Text elipsis>{country.name}</Text>
             </Flex>
diff --git a/src/components/Dashboard/common/ObjectTypeDisplay.jsx b/src/components/Dashboard/common/ObjectTypeDisplay.jsx
index 2950122..0a53485 100644
--- a/src/components/Dashboard/common/ObjectTypeDisplay.jsx
+++ b/src/components/Dashboard/common/ObjectTypeDisplay.jsx
@@ -28,6 +28,7 @@ const ObjectTypeDisplay = ({
       color={color}
       style={{ margin: 0, ...style }}
       icon={showIcon && Icon ? <Icon /> : undefined}
+      className='object-type-display-tag'
     >
       {showLabel && model.label && model.label}
     </Tag>