Merge pull request ppy#11732 from nanaya/profile-icon-size

Use relative sizing for icons and flags on profile page cover
nanaya · Dec 10, 2024 · 7aca7a3 · 7aca7a3
2 parents 11e1cba + a17237f
commit 7aca7a3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/resources/css/bem/profile-info.less b/resources/css/bem/profile-info.less
@@ -108,41 +108,34 @@
     .link-plain();
     .link-white();
     display: flex;
+    gap: 4px;
     align-items: center;
   }
 
-  &__flag-flag {
-    font-size: var(--icon-height); // icon size
-  }
-
   &__flag-text {
+    font-size: @font-size--title-small;
     display: none;
 
     @media @desktop {
       display: block;
-      padding-left: 4px;
-      font-size: @font-size--title-small;
     }
   }
 
   &__flags {
-    --icon-font-size: @font-size--small;
-    --icon-height-desktop: 20px;
-    --icon-height: 15px;
-
     display: flex;
     gap: 5px;
     margin-top: 10px;
+    font-size: 15px; // icon size
 
     @media @desktop {
-      --icon-height: var(--icon-height-desktop);
+      font-size: @flag-size-medium; // icon size
       margin-top: 5px;
     }
   }
 
   &__icon {
-    font-size: var(--icon-font-size); // icon size
-    height: var(--icon-height);
+    font-size: 0.75em; // icon size
+    height: (1em * 1em / $font-size); // revert sizing from font-size
     color: @osu-colour-c1;
     display: flex;
     text-shadow: none;
@@ -158,19 +151,21 @@
   }
 
   &__icons {
-    align-items: baseline;
-    gap: 2px;
-    margin-left: 5px;
-
     &--flag-inline {
       display: contents;
+
       @media @desktop {
         display: none;
       }
     }
 
     &--name-inline {
+      align-items: baseline;
+      gap: 2px;
+      margin-left: 5px;
+      font-size: 15px; // icon size
       display: none;
+
       @media @desktop {
         display: flex;
       }
@@ -191,9 +186,6 @@
   }
 
   &__name {
-    --icon-height: 15px;
-    --icon-font-size: @font-size--small;
-
     padding: 0;
     margin: -5px 0 0;
     font-weight: normal;

diff --git a/resources/js/profile-page/cover.tsx b/resources/js/profile-page/cover.tsx
@@ -87,9 +87,7 @@ export default class Cover extends React.Component<Props> {
                   className='profile-info__flag'
                   href={route('rankings', { country: this.props.user.country.code, mode: this.props.currentMode, type: 'performance' })}
                 >
-                  <span className='profile-info__flag-flag'>
-                    <FlagCountry country={this.props.user.country} />
-                  </span>
+                  <FlagCountry country={this.props.user.country} />
                   <span className='profile-info__flag-text'>{this.props.user.country.name}</span>
                 </a>
               }