fix panel link color, fix broken user profiles

src/App.scss

@@ -407,6 +407,11 @@ main-router {
     min-width: 1px;
     align-self: stretch;
   }
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-heading.stub {
@@ -417,6 +422,11 @@ main-router {
 .panel-footer {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-body > p {

src/components/style_switcher/style_switcher.js

@@ -62,6 +62,7 @@ export default {
 
       panelColorLocal: undefined,
       panelTextColorLocal: undefined,
+      panelLinkColorLocal: undefined,
       panelFaintColorLocal: undefined,
       panelOpacityLocal: undefined,
 
@@ -155,6 +156,7 @@ export default {
 
         panel: this.panelColorLocal,
         panelText: this.panelTextColorLocal,
+        panelLink: this.panelLinkColorLocal,
         panelFaint: this.panelFaintColorLocal,
 
         input: this.inputColorLocal,
@@ -230,6 +232,7 @@ export default {
       const fgs = {
         text: hex2rgb(colors.text),
         panelText: hex2rgb(colors.panelText),
+        panelLink: hex2rgb(colors.panelLink),
         btnText: hex2rgb(colors.btnText),
         topBarText: hex2rgb(colors.topBarText),
         inputText: hex2rgb(colors.inputText),
@@ -268,6 +271,7 @@ export default {
         tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
 
         panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
+        panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),
 
         btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
 

src/components/style_switcher/style_switcher.vue

@@ -183,8 +183,10 @@
           <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
           <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
           <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
-          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
           <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
+          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
         </div>
         <div class="color-item">
           <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>

src/components/user_card_content/user_card_content.vue

@@ -105,10 +105,9 @@
         <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
       </div>
     </div>
+    <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
   </div>
-  <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-  <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
-</div>
 </div>
 </template>
 

src/services/style_setter/style_setter.js

@@ -172,6 +172,7 @@ const generateColors = (input) => {
 
   colors.panel = col.panel || Object.assign({}, col.fg)
   colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
+  colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink)
   colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
 
   colors.topBar = col.topBar || Object.assign({}, col.fg)