Adrienne / Changed styling for Inactive chip and long text is wrapped…

… when overflown (#5974) * Changed styling for Inactive chip and text is wrapped when overflown * Used Text align prop to center text
binary-com · Aug 29, 2022 · 6e8386c · 6e8386c · vercel · Aug 29, 2022
1 parent a6fad14
commit 6e8386c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/packages/p2p/src/components/my-ads/ad-status.jsx b/packages/p2p/src/components/my-ads/ad-status.jsx
@@ -8,14 +8,28 @@ import './ad-status.scss';
 const AdStatus = ({ is_active }) => {
     if (!is_active) {
         return (
-            <Text className='ad-status--inactive' color='loss-danger' line_height='s' size='xs' weight='bold'>
+            <Text
+                align='center'
+                className='ad-status--inactive'
+                color='loss-danger'
+                line_height='s'
+                size='xs'
+                weight='bold'
+            >
                 <Localize i18n_default_text='Inactive' />
             </Text>
         );
     }
 
     return (
-        <Text className='ad-status--active' color='profit-success' line_height='s' size='xs' weight='bold'>
+        <Text
+            align='center'
+            className='ad-status--active'
+            color='profit-success'
+            line_height='s'
+            size='xs'
+            weight='bold'
+        >
             <Localize i18n_default_text='Active' />
         </Text>
     );

diff --git a/packages/p2p/src/components/my-ads/ad-status.scss b/packages/p2p/src/components/my-ads/ad-status.scss
@@ -1,21 +1,28 @@
+@mixin ad-status-base($background-color) {
+    &:before {
+        content: '';
+        height: 100%;
+        width: 100%;
+        opacity: 0.16;
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 1.6rem;
+        background-color: $background-color;
+    }
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 0.1rem 1.2rem;
+    position: relative;
+    text-align: center;
+}
+
 .ad-status {
     &--active {
-        &:before {
-            content: '';
-            height: 100%;
-            width: 100%;
-            background-color: var(--status-success);
-            opacity: 0.16;
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            border-radius: 1.6rem;
-        }
-        padding: 0.1rem 1.2rem;
-        text-align: center;
-        display: flex;
-        position: relative;
+        @include ad-status-base(var(--status-success));
+
         width: 6.7rem;
 
         @include mobile {
@@ -25,22 +32,7 @@
     }
 
     &--inactive {
-        &:before {
-            content: '';
-            height: 100%;
-            width: 100%;
-            background-color: var(--status-danger);
-            opacity: 0.16;
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            border-radius: 1.6rem;
-        }
-        padding: 0.1rem 1.2rem;
-        text-align: center;
-        display: flex;
-        position: relative;
+        @include ad-status-base(var(--status-danger));
         width: 8rem;
     }
 }