fix: delegator card profile styles (#1350)

decentraland · Oct 23, 2023 · f81b620 · f81b620
1 parent e5ffa64
commit f81b620
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 20 deletions.
diff --git a/src/components/Common/Username.css b/src/components/Common/Username.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 0.5rem;
 }
 
 .Username--address {
@@ -23,7 +24,6 @@ a.Username span.address {
 
 .Username .dcl.address,
 .Username .Username__Name {
-  margin-left: 0.5rem;
   text-overflow: ellipsis;
   overflow: hidden;
 }

diff --git a/src/components/Delegation/DelegatorCardProfile.css b/src/components/Delegation/DelegatorCardProfile.css
@@ -22,7 +22,6 @@
   padding-right: 20px;
   font-weight: var(--weight-semi-bold);
   font-size: 15px;
-  line-height: 28px;
   letter-spacing: 0.4px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -32,23 +31,16 @@
 
 .DelegatorCardProfile__Details {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+}
+
+.DelegatorCardProfile__DelegatedVp {
   color: var(--black-600);
   text-transform: uppercase;
   align-items: center;
   font-weight: var(--weight-normal);
   font-size: 11px;
-  line-height: 26px;
-}
-
-.DelegatorCardProfile__DetailsItem:after {
-  content: '·';
-  padding: 0 5px;
-}
-
-.DelegatorCardProfile__DetailsItem:last-child:after {
-  content: '';
-  padding: 0;
+  line-height: 16px;
 }
 
 .DelegatorCardProfile__Avatar {

diff --git a/src/components/Delegation/DelegatorCardProfile.tsx b/src/components/Delegation/DelegatorCardProfile.tsx
@@ -20,13 +20,11 @@ function DelegatorCardProfile({ address, vp }: Props) {
   return (
     <Link className="DelegatorCardProfile" href={locations.profile({ address })}>
       <div className="DelegatorCardProfile__Section">
-        <Username className="DelegatorCardProfile__Avatar" address={address} variant="avatar" size="medium" />
-        <div>
+        <Username className="DelegatorCardProfile__Avatar" address={address} variant="avatar" size="small" />
+        <div className="DelegatorCardProfile__Details">
           <Username className="DelegatorCardProfile__Title" variant="address" address={address} />
-          <span className="DelegatorCardProfile__Details">
-            <span className="DelegatorCardProfile__DetailsItem">
-              {t('page.profile.delegators.delegated', { vp: intl.formatNumber(vp) })}
-            </span>
+          <span className="DelegatorCardProfile__DelegatedVp">
+            {t('page.profile.delegators.delegated', { vp: intl.formatNumber(vp) })}
           </span>
         </div>
       </div>