From 547bace605a87cd97bcc899a71416261b3136eb9 Mon Sep 17 00:00:00 2001
From: Mariano Lambir <mlambir@gmail.com>
Date: Wed, 8 Jan 2020 15:22:32 -0300
Subject: [PATCH] change index lang list to use default colors (#46)

use text color accordingly
---
 assets/js/languageColors.ts | 11 ++---------
 assets/js/pages/index.tsx   |  7 +++++--
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/assets/js/languageColors.ts b/assets/js/languageColors.ts
index b7939d7..142c514 100644
--- a/assets/js/languageColors.ts
+++ b/assets/js/languageColors.ts
@@ -242,19 +242,12 @@ const colors:{ [key: string]: string; } = {
     "Zephir": "#118f9e",
     "Zig": "#ec915c",
     "ZIL": "#dc75e5",
+    "other": "#444444"
 }
 
-function getLangColor(lang:string, dark:boolean=false) {
+function getLangColor(lang:string) {
     let color = colors[lang];
     color = color?color:"#CCCCCC";
-    if(dark){
-        let col = new TinyColor(color).desaturate(30);
-        if(col.isLight()){
-            col = col.darken(30)
-        }
-        const colstr = col.toString();
-        color = colstr?colstr:"#AAAAAA"
-    }
     return color;
 }
 
diff --git a/assets/js/pages/index.tsx b/assets/js/pages/index.tsx
index 2522f6e..881c574 100644
--- a/assets/js/pages/index.tsx
+++ b/assets/js/pages/index.tsx
@@ -11,6 +11,8 @@ import _ from "lodash";
 import getLangColor from '../languageColors';
 import CountUp from 'react-countup';
 import {GoGlobe, GoCode} from "react-icons/all";
+import { mostReadable, TinyColor} from '@ctrl/tinycolor';
+
 
 type CountersResponse = ApiResponse<Counters>;
 type LanguagesResponse = ApiResponse<[TotalLanguage]>;
@@ -101,9 +103,10 @@ const HomePage: React.FC<RouteComponentProps> = () => {
             </div>
             <div className="language-button-container">
                     {Object.keys(languagesResponse.data).map(lang => {
-                        const color = getLangColor(lang, true);
+                        const color = getLangColor(lang);
+                        const readable = (mostReadable(color, ["#111", "#555", "#CCC", "#eee"]) || new TinyColor("#000")).toHexString();
                         return (
-                            <Button key={lang} tag={Link} style={{backgroundColor: color}} to={'/languages/' + lang.toLowerCase()}>
+                            <Button key={lang} tag={Link} style={{backgroundColor: color, color: readable}} to={'/languages/' + lang.toLowerCase()}>
                                  {lang} 
                             </Button>
                         )