fix(translations/dashboard): fix table sorting

[leon-win]

Problem

Main problem: in table "List of direct subpages" only 4 columns supports sorting ("Slug", "Popularity rank (en-US", "Popularity rank ({locale}" and "Date delta"). If user clicks on any other column, an error occurs that can only be resolved by clearing the browser data.

Secondary: active (sorted) column header looked unreadable when the dark theme was enabled (see screenshots). Also indicating of reverse sorting order implemented by flipping the text upside down, this is a fun solution))) but not very user-friendly because it's hard to read the column title when it's upside down.

Solution

Main problem: add sortable prop for columns that support sorting. It also helps to style sortable column headers (use custom cursor).

Secondary: replace hard-coded colors with variables and add icon 'small-arrow` (I haven't found a more suitable icon) instead of flipping the column title.

---

Screenshots

Before

After

[leon-win]

@peterbe, @SphinxKnight, @caugner, help me with review please :pray:

[SphinxKnight]

Really sorry for the silence here @leon-win , I'll try to have a look in the coming days

cc @mdn/core-dev

[github-actions[bot]]

This pull request has merge conflicts that must be resolved before it can be merged.

[caugner]

@leon-win We merged some changes to the translations/differences page. Can you please take a look and resolve the merge conflicts? 🙏

@hochan222 @queengooborg Would you mind reviewing and testing this change locally? That would be awesome.

[leon-win]

@leon-win We merged some changes to the translations/differences page. Can you please take a look and resolve the merge conflicts? 🙏

@hochan222 @queengooborg Would you mind reviewing and testing this change locally? That would be awesome.

Conflicts resolved :ok_hand:

I also changed some the styles a little to make the content on the pages look better (indentation and stretching to fit the width).

Before (in main branch now):

After: