Workaround genre area

ppy · Oct 4, 2024 · 9edb40d · 9edb40d
1 parent dd726f1
commit 9edb40d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/resources/css/bem/input-container.less b/resources/css/bem/input-container.less
@@ -60,6 +60,9 @@
   &--genre {
     --label-colour: hsl(var(--hsl-c1));
     --input-bg: transparent;
+    --input-border-hover-colour: transparent;
+    --input-border-focus-colour: transparent;
+    --input-border-error-colour: transparent;
   }
 
   &--judging {

diff --git a/resources/js/artist-tracks-index/search-form.tsx b/resources/js/artist-tracks-index/search-form.tsx
@@ -176,27 +176,31 @@ export default class SearchForm extends React.Component<Props> {
             </InputContainer>
 
             <InputContainer labelKey='artist.tracks.index.form.genre' modifiers={['4', 'genre']}>
-              <div className='artist-track-search-form-switches'>
-                {this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
-                {this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
+              <div className='input-text'>
+                <div className='artist-track-search-form-switches'>
+                  {this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
+                  {this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
+                </div>
               </div>
             </InputContainer>
 
             <InputContainer labelKey='artist.tracks.index.form.exclusive_only' modifiers={['4', 'genre']}>
-              <div className='artist-track-search-form-switches'>
-                {([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
-                  <a
-                    key={label}
-                    className={classWithModifiers('artist-track-search-form-switches__link', {
-                      active: this.params.exclusive_only === value,
-                    })}
-                    data-value={value}
-                    href={makeLink({ ...this.params, exclusive_only: value })}
-                    onClick={this.handleExclusiveOnlyLinkClick}
-                  >
-                    {trans(`artist.tracks.index.exclusive_only.${label}`)}
-                  </a>
-                ))}
+              <div className='input-text'>
+                <div className='artist-track-search-form-switches'>
+                  {([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
+                    <a
+                      key={label}
+                      className={classWithModifiers('artist-track-search-form-switches__link', {
+                        active: this.params.exclusive_only === value,
+                      })}
+                      data-value={value}
+                      href={makeLink({ ...this.params, exclusive_only: value })}
+                      onClick={this.handleExclusiveOnlyLinkClick}
+                    >
+                      {trans(`artist.tracks.index.exclusive_only.${label}`)}
+                    </a>
+                  ))}
+                </div>
               </div>
             </InputContainer>
           </div>