Update site appearance and user authentication functionality

Implement a new login system, update UI elements, and enable static asset serving for images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/InMLMqG

client/src/components/CategoryTabs.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Users, Hash, Building } from "lucide-react";
 
 interface CategoryTabsProps {
   selectedCategory: string;
@@ -6,33 +6,36 @@ interface CategoryTabsProps {
 }
 
 const categories = [
-  { id: "People", label: "People", icon: "fas fa-users", count: 24 },
-  { id: "Topics", label: "Topics", icon: "fas fa-hashtag", count: 20 },
-  { id: "Companies", label: "Companies", icon: "fas fa-building", count: 27 },
+  { id: "People", label: "People", Icon: Users, count: 36 },
+  { id: "Topics", label: "Topics", Icon: Hash, count: 24 },
+  { id: "Companies", label: "Companies", Icon: Building, count: 27 },
 ];
 
 export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
   return (
-    <div className="mb-8">
-      <div className="border-b border-border">
-        <nav className="flex space-x-8">
-          {categories.map((category) => (
-            <Button
-              key={category.id}
-              variant="ghost"
-              className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
-                selectedCategory === category.id
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-              onClick={() => onCategoryChange(category.id)}
-              data-testid={`tab-${category.id}`}
-            >
-              <i className={`${category.icon} mr-2`}></i>
-              {category.label} 
-              <span className="ml-2 text-sm opacity-75">({category.count})</span>
-            </Button>
-          ))}
+    <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40">
+      <div className="max-w-4xl mx-auto px-4">
+        <nav className="flex justify-around py-2">
+          {categories.map((category) => {
+            const { Icon } = category;
+            const isSelected = selectedCategory === category.id;
+            
+            return (
+              <button
+                key={category.id}
+                onClick={() => onCategoryChange(category.id)}
+                className={`flex flex-col items-center py-2 px-4 rounded-lg transition-colors ${
+                  isSelected
+                    ? "text-blue-600 dark:text-blue-400"
+                    : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+                }`}
+                data-testid={`tab-${category.id}`}
+              >
+                <Icon className={`h-6 w-6 mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} />
+                <span className="text-xs font-medium">{category.label}</span>
+              </button>
+            );
+          })}
         </nav>
       </div>
     </div>

client/src/components/MediaOutletCard.tsx

@@ -6,9 +6,10 @@ import type { MediaOutlet } from "@shared/schema";
 
 interface MediaOutletCardProps {
   outlet: MediaOutlet;
+  viewMode?: "grid" | "list";
 }
 
-export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
+export default function MediaOutletCard({ outlet, viewMode = "list" }: MediaOutletCardProps) {
   const [showProfile, setShowProfile] = useState(false);
 
   const handleCardClick = () => {
@@ -21,19 +22,26 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
   };
 
   const getOutletImage = () => {
-    if (outlet.imageUrl) return outlet.imageUrl;
+    if (outlet.imageUrl) {
+      // Handle @assets/ paths
+      if (outlet.imageUrl.startsWith('@assets/')) {
+        // Convert @assets/ to a proper import path or static asset path
+        return outlet.imageUrl.replace('@assets/', '/attached_assets/');
+      }
+      return outlet.imageUrl;
+    }
     
     // Default images based on category
-    if (outlet.category === "people") {
+    if (outlet.category === "People") {
       return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face";
-    } else if (outlet.category === "companies") {
+    } else if (outlet.category === "Companies") {
       return null; // Use initial letter
     }
     return null;
   };
 
   const getOutletIcon = () => {
-    if (outlet.category === "topics") {
+    if (outlet.category === "Topics") {
       return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" :
              outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" :
              outlet.name.toLowerCase().includes("federal") ? "fas fa-university" :
@@ -45,68 +53,70 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
   const getTagColor = () => {
     const tag = outlet.tags?.[0] || outlet.category;
     const colors = {
-      "Tech Leader": "bg-primary/10 text-primary",
-      "CEO": "bg-accent/80 text-accent-foreground", 
-      "Crypto": "bg-chart-1/20 text-chart-1",
-      "Politics": "bg-destructive/20 text-destructive",
-      "AI": "bg-chart-3/20 text-chart-3",
-      "Finance": "bg-chart-2/20 text-chart-2",
-      "Blockchain": "bg-chart-4/20 text-chart-4",
-      "Economy": "bg-chart-5/20 text-chart-5"
+      "Tech Leader": "bg-blue-100 text-blue-800",
+      "CEO": "bg-purple-100 text-purple-800", 
+      "Crypto": "bg-yellow-100 text-yellow-800",
+      "Politics": "bg-red-100 text-red-800",
+      "AI": "bg-green-100 text-green-800",
+      "Finance": "bg-indigo-100 text-indigo-800",
+      "Blockchain": "bg-cyan-100 text-cyan-800",
+      "Economy": "bg-orange-100 text-orange-800",
+      "Football": "bg-emerald-100 text-emerald-800"
     };
-    return colors[tag as keyof typeof colors] || "bg-muted text-muted-foreground";
+    return colors[tag as keyof typeof colors] || "bg-gray-100 text-gray-800";
   };
 
   return (
     <>
-      <Card 
-        className="card-hover cursor-pointer" 
+      {/* Clean List Style like screenshots */}
+      <div 
+        className="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors" 
         onClick={handleCardClick}
         data-testid={`card-outlet-${outlet.slug}`}
       >
-        <CardContent className="p-6">
-          <div className="flex items-start space-x-4">
-            {getOutletImage() ? (
-              <img 
-                src={getOutletImage()!} 
-                alt={outlet.name} 
-                className="w-12 h-12 rounded-full object-cover"
-              />
-            ) : (
-              <div className={`w-12 h-12 ${outlet.category === 'companies' ? 'bg-primary/20' : 'bg-chart-1/20'} rounded-lg flex items-center justify-center`}>
-                {outlet.category === 'companies' ? (
-                  <span className="text-primary font-bold text-lg">
-                    {outlet.name.charAt(0)}
-                  </span>
-                ) : (
-                  <i className={`${getOutletIcon()} text-chart-1 text-xl`}></i>
-                )}
-              </div>
-            )}
-            
-            <div className="flex-1">
-              <h3 className="font-semibold text-foreground">{outlet.name}</h3>
-              <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
-                {outlet.description}
-              </p>
-              <div className="flex items-center justify-between">
-                <span className={`text-xs px-2 py-1 rounded-full ${getTagColor()}`}>
-                  {outlet.tags?.[0] || outlet.category}
+        <div className="flex items-center space-x-3">
+          {/* Profile Image */}
+          {getOutletImage() ? (
+            <img 
+              src={getOutletImage()!} 
+              alt={outlet.name} 
+              className="w-12 h-12 rounded-full object-cover flex-shrink-0"
+              onError={(e) => {
+                console.log('Image failed to load:', getOutletImage());
+                const target = e.target as HTMLImageElement;
+                target.style.display = 'none';
+              }}
+            />
+          ) : (
+            <div className={`w-12 h-12 ${outlet.category === 'Companies' ? 'bg-blue-500' : outlet.category === 'Topics' ? 'bg-green-500' : 'bg-purple-500'} rounded-full flex items-center justify-center flex-shrink-0`}>
+              {outlet.category === 'Companies' ? (
+                <span className="text-white font-bold text-lg">
+                  {outlet.name.charAt(0)}
                 </span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleInfoClick}
-                  className="text-muted-foreground hover:text-foreground p-1"
-                  data-testid={`button-info-${outlet.slug}`}
-                >
-                  <i className="fas fa-info-circle"></i>
-                </Button>
-              </div>
+              ) : (
+                <i className={`${getOutletIcon()} text-white text-lg`}></i>
+              )}
             </div>
+          )}
+          
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <h3 className="font-semibold text-gray-900 dark:text-white text-base leading-tight">
+              {outlet.name}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">
+              {outlet.description}
+            </p>
           </div>
-        </CardContent>
-      </Card>
+          
+          {/* Tag and Info */}
+          <div className="flex items-center space-x-2 flex-shrink-0">
+            <span className={`text-xs px-2 py-1 rounded-full font-medium ${getTagColor()}`}>
+              {outlet.tags?.[0] || outlet.category}
+            </span>
+          </div>
+        </div>
+      </div>
 
       <ProfileModal 
         outlet={outlet}

client/src/pages/Home.tsx

@@ -56,7 +56,11 @@ export default function Home() {
                 </div>
               )}
               <div>
-                <div className="font-bold text-lg">SAPIENS</div>
+                <img 
+                  src="/attached_assets/logo_black_1759162717640.png" 
+                  alt="SAPIENS" 
+                  className="h-6 w-auto"
+                />
                 <div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
               </div>
             </div>
@@ -74,90 +78,55 @@ export default function Home() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-6 py-8">
-        {/* Hero Section */}
-        <div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
-          <div className="max-w-3xl">
-            <h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
-            <p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
-            <div className="flex space-x-4">
-              <Button className="bg-white text-primary hover:bg-opacity-90" data-testid="button-explore">
-                Explore Media Outlets
-              </Button>
-              <Link href="/auctions">
-                <Button 
-                  variant="outline" 
-                  className="border-white text-white hover:bg-white hover:text-primary"
-                  data-testid="button-auctions"
-                >
-                  View Active Auctions
-                </Button>
-              </Link>
-            </div>
+      <main className="max-w-4xl mx-auto px-4">
+        {/* View Mode Toggle */}
+        <div className="flex items-center justify-between py-4">
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">Latest Articles</h1>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant={viewMode === "grid" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("grid")}
+            >
+              <Grid className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={viewMode === "list" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("list")}
+            >
+              <List className="h-4 w-4" />
+            </Button>
           </div>
         </div>
 
-        {/* Category Tabs */}
-        <CategoryTabs 
-          selectedCategory={selectedCategory}
-          onCategoryChange={setSelectedCategory}
-        />
-
-        {/* Media Outlets Grid */}
-        <div className="mb-12">
+        {/* Media Outlets List */}
+        <div className="space-y-3 pb-20">
           {outletsLoading ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              {Array.from({ length: 8 }).map((_, i) => (
-                <div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
-                  <div className="h-12 bg-muted rounded mb-4"></div>
-                  <div className="h-4 bg-muted rounded mb-2"></div>
-                  <div className="h-4 bg-muted rounded w-2/3"></div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              {mediaOutlets.map((outlet) => (
-                <MediaOutletCard key={outlet.id} outlet={outlet} />
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Current Auctions Section */}
-        <div className="mt-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
-            <Link href="/auctions">
-              <Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
-                View All Auctions
-              </Button>
-            </Link>
-          </div>
-          
-          {auctionsLoading ? (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {Array.from({ length: 2 }).map((_, i) => (
-                <div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
-                  <div className="h-6 bg-muted rounded mb-4"></div>
-                  <div className="space-y-3">
-                    <div className="h-4 bg-muted rounded"></div>
-                    <div className="h-4 bg-muted rounded"></div>
-                    <div className="h-4 bg-muted rounded"></div>
+            Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-gray-800 rounded-lg p-4 animate-pulse">
+                <div className="flex items-center space-x-3">
+                  <div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
+                  <div className="flex-1">
+                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+                    <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
                   </div>
-                  <div className="h-10 bg-muted rounded mt-4"></div>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))
           ) : (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {auctions.slice(0, 2).map((auction) => (
-                <AuctionCard key={auction.id} auction={auction} />
-              ))}
-            </div>
+            mediaOutlets.map((outlet) => (
+              <MediaOutletCard key={outlet.id} outlet={outlet} viewMode={viewMode} />
+            ))
           )}
         </div>
       </main>
+
+      {/* Bottom Navigation */}
+      <CategoryTabs 
+        selectedCategory={selectedCategory}
+        onCategoryChange={setSelectedCategory}
+      />
     </div>
   );
 }

client/src/pages/Landing.tsx

@@ -4,12 +4,13 @@ import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
-import { apiRequest } from "@/lib/queryClient";
+import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useMutation } from "@tanstack/react-query";
 
 export default function Landing() {
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showRequestModal, setShowRequestModal] = useState(false);
+  const [loginForm, setLoginForm] = useState({ username: "", password: "" });
   const [requestForm, setRequestForm] = useState({
     name: "",
     category: "people",
@@ -17,6 +18,31 @@ export default function Landing() {
   });
   const { toast } = useToast();
 
+  const loginMutation = useMutation({
+    mutationFn: async (credentials: { username: string; password: string }) => {
+      return await apiRequest("POST", "/api/login", credentials);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Success",
+        description: "Successfully logged in!",
+      });
+      setShowLoginModal(false);
+      setLoginForm({ username: "", password: "" });
+      // Refresh user data
+      queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+      // Redirect to home
+      window.location.href = "/";
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Invalid credentials. Please try again.",
+        variant: "destructive"
+      });
+    }
+  });
+
   const requestMutation = useMutation({
     mutationFn: async (data: typeof requestForm) => {
       await apiRequest("POST", "/api/media-outlet-requests", data);
@@ -39,7 +65,12 @@ export default function Landing() {
   });
 
   const handleLogin = () => {
-    window.location.href = "/api/login";
+    setShowLoginModal(true);
+  };
+
+  const handleLoginSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginMutation.mutate(loginForm);
   };
 
   const handleRequestSubmit = (e: React.FormEvent) => {
@@ -54,10 +85,11 @@ export default function Landing() {
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
-              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
-                S
-              </div>
-              <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
+              <img 
+                src="/attached_assets/logo_black_1759162717640.png" 
+                alt="SAPIENS" 
+                className="h-8 w-auto"
+              />
             </div>
             
             <div className="flex items-center space-x-4">
@@ -158,6 +190,62 @@ export default function Landing() {
         </div>
       </div>
 
+      {/* Login Modal */}
+      <Dialog open={showLoginModal} onOpenChange={setShowLoginModal}>
+        <DialogContent className="sm:max-w-md" data-testid="modal-login">
+          <DialogHeader>
+            <DialogTitle>Login to SAPIENS</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleLoginSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Username</label>
+              <Input
+                value={loginForm.username}
+                onChange={(e) => setLoginForm(prev => ({ ...prev, username: e.target.value }))}
+                placeholder="Enter username"
+                required
+                data-testid="input-username"
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <Input
+                type="password"
+                value={loginForm.password}
+                onChange={(e) => setLoginForm(prev => ({ ...prev, password: e.target.value }))}
+                placeholder="Enter password"
+                required
+                data-testid="input-password"
+              />
+            </div>
+            
+            <div className="text-xs text-muted-foreground">
+              Use: admin/1234 or superadmin/1234
+            </div>
+            
+            <div className="flex space-x-2">
+              <Button 
+                type="submit" 
+                disabled={loginMutation.isPending}
+                className="flex-1"
+                data-testid="button-submit-login"
+              >
+                {loginMutation.isPending ? "Logging in..." : "Login"}
+              </Button>
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => setShowLoginModal(false)}
+                data-testid="button-cancel-login"
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
       {/* Request Modal */}
       <Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
         <DialogContent data-testid="modal-request">