Update UI for project languages

src/components/Projects/EmptySolutions.tsx

@@ -8,7 +8,7 @@ export function EmptySolutions(props: EmptySolutionsProps) {
   const { projectId } = props;
 
   return (
-    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20">
+    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20 bg-white border mb-5">
       <Blocks className="mb-4 opacity-10 h-14 w-14" />
       <h2 className="mb-1 text-lg font-semibold sm:text-xl">
         No solutions submitted yet

src/components/Projects/ListProjectSolutions.tsx

@@ -14,7 +14,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { SelectLanguages } from './SelectLanguages.tsx';
-import type { ProjectFileType, ProjectFrontmatter } from '../../lib/project.ts';
+import type { ProjectFrontmatter } from '../../lib/project.ts';
 
 export interface ProjectStatusDocument {
   _id?: string;
@@ -134,7 +134,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
       return;
     }
 
-    pageProgressMessage.set('Submitting vote...');
+    pageProgressMessage.set('Submitting vote');
     const { response, error } = await httpPost(
       `${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`,
       {
@@ -218,11 +218,14 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
   return (
     <div className="mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5">
       {leavingRoadmapModal}
-      <div className="relative mb-5 hidden sm:block">
-        <div className="flex items-center justify-between gap-2">
+      <div className="relative mb-5 hidden items-center justify-between sm:flex">
+        <div>
           <h1 className="mb-1 text-xl font-semibold">
             {projectData.title} Solutions
           </h1>
+          <p className="text-sm text-gray-500">{projectData.description}</p>
+        </div>
+        {!isLoading && (
           <SelectLanguages
             projectId={projectId}
             selectedLanguage={selectedLanguage}
@@ -233,8 +236,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
               }));
             }}
           />
-        </div>
-        <p className="text-sm text-gray-500">{projectData.description}</p>
+        )}
       </div>
 
       {isLoading ? (

src/components/Projects/SelectLanguages.tsx

@@ -1,42 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../lib/classname';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { httpGet } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
-
-const languageColors = new Map([
-  ['JavaScript', 'bg-[#f1e05a]'],
-  ['Python', 'bg-[#3572A5]'],
-  ['Java', 'bg-[#b07219]'],
-  ['HTML', 'bg-[#e34c26]'],
-  ['CSS', 'bg-[#563d7c]'],
-  ['C++', 'bg-[#f34b7d]'],
-  ['C', 'bg-[#555555]'],
-  ['Go', 'bg-[#00ADD8]'],
-  ['TypeScript', 'bg-[#2b7489]'],
-  ['Shell', 'bg-[#89e051]'],
-  ['Ruby', 'bg-[#701516]'],
-  ['PHP', 'bg-[#4F5D95]'],
-  ['Rust', 'bg-[#dea584]'],
-  ['Swift', 'bg-[#ffac45]'],
-  ['Kotlin', 'bg-[#A97BFF]'],
-  ['Dart', 'bg-[#00B4AB]'],
-  ['Scala', 'bg-[#c22d40]'],
-  ['Objective-C', 'bg-[#438eff]'],
-  ['Vue', 'bg-[#41b883]'],
-  ['R', 'bg-[#198CE7]'],
-  ['Perl', 'bg-[#0298c3]'],
-  ['Haskell', 'bg-[#5e5086]'],
-  ['Lua', 'bg-[#000080]'],
-  ['Matlab', 'bg-[#e16737]'],
-  ['Vim script', 'bg-[#199f4b]'],
-  ['Elixir', 'bg-[#6e4a7e]'],
-  ['Erlang', 'bg-[#B83998]'],
-  ['Clojure', 'bg-[#db5855]'],
-  ['Markdown', 'bg-[#083fa1]'],
-  ['TeX', 'bg-[#3D6117]'],
-  ['SQL', 'bg-[#e38c00]'],
-]);
+import { ChevronDown, X } from 'lucide-react';
 
 type SelectLanguagesProps = {
   projectId: string;
@@ -77,11 +43,21 @@ export function SelectLanguages(props: SelectLanguagesProps) {
   return (
     <div className="relative flex">
       <button
-        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900"
+        className="flex items-center gap-1 rounded-md border border-gray-300 py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900"
         onClick={() => setIsOpen(!isOpen)}
       >
         {selectedLanguage || 'Select Language'}
+
+        <ChevronDown className="ml-1 h-4 w-4" />
       </button>
+      {selectedLanguage && (
+        <button
+          className="ml-1 text-red-500 text-xs border border-red-500 rounded-md px-2 py-1"
+          onClick={() => onSelectLanguage('')}
+        >
+          Clear
+        </button>
+      )}
 
       {isOpen && (
         <div