Adding dots between languages on sign-in page

[sairina]

Description

This PR adds "dots" between the languages on the sign-in page for Studio so that it matches the links for Privacy Policy, Terms of Service, and the link to LE's website.

Issue Addressed (if applicable)

Addresses #2725

Before/After Screenshots (if applicable)

Studio RTL lang	Studio LTR lang

Difference between Kolibri and Studio (addressed in Kolibri learningequality/kolibri#7748)

Currently	Kolibri

Steps to Test

• Step 1: Open Studio
• Step 2: Click on the different languages at the bottom to check if the dots are showing up in the correct places

Implementation Notes (optional)

At a high level, how did you implement this?

I added some CSS classes that use pseudo-elements to create the dots (similar to the way they were created in the links below in Main.vue), added a method to either add the dots before or after a link for the language depending on whether the page is RTL/LTR and the language itself in the links is an RTL or LTR language (::before is used for RTL languages, while ::after is used for LTR languages).

Does this introduce any tech-debt items?

We will need to make sure these changes are also made in Kolibri, as it is the same component (LanguageSwitcherList) in both. There is a connected issue in Kolibri learningequality/kolibri#7748 to fix.

Checklist

• Is the code clean and well-commented?
• Are all UI components LTR and RTL compliant (if applicable)?
• Are views organized into pages, components, and layouts directories as described in the docs?

Reviewers

If you are looking to assign a reviewer, here are some options:

• Jordan jayoshih (full stack)
• Aron aronasorman (back end, devops)
• Micah micahscopes (full stack)
• Kevin kollivier (back end)
• Ivan ivanistheone (Ricecooker)
• Richard rtibbles (full stack, Kolibri)
• Radina @radinamatic (documentation)

[jayoshih]

Nice!!!

[pcenov]

Tested and verified as fixed at https://hotfixes.studio.learningequality.org