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

@@ -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;
 }
 

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'

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>

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>