feat: global styles with Tabler dark theme, 3-column layout

2026-05-26 19:08:49 +00:00
parent e1e001c7e0
commit 5069676914
2 changed files with 523 additions and 0 deletions
@@ -0,0 +1,223 @@
+"""
+Tests for frontend/src/styles/globals.css
+
+Verifies the CSS file exists with all required selectors, imports, and styles
+as specified in task-3.
+"""
+
+import os
+import pytest
+
+CSS_FILE = os.path.join(
+    os.path.dirname(__file__),
+    "..",
+    "frontend",
+    "src",
+    "styles",
+    "globals.css",
+)
+
+
+@pytest.fixture(scope="module")
+def css_content():
+    assert os.path.exists(CSS_FILE), f"globals.css not found at {CSS_FILE}"
+    with open(CSS_FILE) as f:
+        return f.read()
+
+
+class TestTablerImports:
+    def test_imports_tabler_core_css(self, css_content):
+        assert "@tabler/core/dist/css/tabler.min.css" in css_content
+
+    def test_imports_tabler_vendors_css(self, css_content):
+        assert "tabler-vendors.min.css" in css_content
+
+
+class TestColorScheme:
+    def test_forces_dark_color_scheme(self, css_content):
+        assert "color-scheme: dark" in css_content
+
+
+class TestBodyStyles:
+    def test_body_background_color(self, css_content):
+        assert "#1a1a2e" in css_content
+
+    def test_body_text_color(self, css_content):
+        assert "#e0e0e0" in css_content
+
+    def test_body_margin_zero(self, css_content):
+        assert "margin: 0" in css_content
+
+    def test_body_overflow_hidden(self, css_content):
+        assert "overflow: hidden" in css_content
+
+    def test_body_height_100vh(self, css_content):
+        # body should have height: 100vh
+        assert "100vh" in css_content
+
+
+class TestRootStyles:
+    def test_root_height_100vh(self, css_content):
+        assert "#root" in css_content
+        assert "100vh" in css_content
+
+    def test_root_display_flex(self, css_content):
+        assert "#root" in css_content
+        assert "flex" in css_content
+
+
+class TestLayoutClasses:
+    def test_app_layout_class(self, css_content):
+        assert ".app-layout" in css_content
+
+    def test_sidebar_class(self, css_content):
+        assert ".sidebar" in css_content
+
+    def test_sidebar_width(self, css_content):
+        assert "240px" in css_content
+
+    def test_sidebar_background(self, css_content):
+        assert "#16213e" in css_content
+
+    def test_chat_panel_class(self, css_content):
+        assert ".chat-panel" in css_content
+
+    def test_right_panel_class(self, css_content):
+        assert ".right-panel" in css_content
+
+    def test_right_panel_width_45_percent(self, css_content):
+        assert "45%" in css_content
+
+    def test_right_panel_min_width(self, css_content):
+        assert "300px" in css_content
+
+
+class TestSidebarComponents:
+    def test_sidebar_header(self, css_content):
+        assert ".sidebar-header" in css_content
+
+    def test_session_list(self, css_content):
+        assert ".session-list" in css_content
+
+    def test_session_item(self, css_content):
+        assert ".session-item" in css_content
+
+    def test_session_item_hover(self, css_content):
+        assert ".session-item:hover" in css_content
+
+    def test_session_item_active(self, css_content):
+        assert ".session-item.active" in css_content
+
+    def test_session_meta(self, css_content):
+        assert ".session-meta" in css_content
+
+    def test_sidebar_h3_color(self, css_content):
+        assert "#8888aa" in css_content
+
+    def test_session_item_color(self, css_content):
+        assert "#c0c0d0" in css_content
+
+    def test_session_meta_color(self, css_content):
+        assert "#6a6a8a" in css_content
+
+
+class TestChatComponents:
+    def test_chat_messages_class(self, css_content):
+        assert ".chat-messages" in css_content
+
+    def test_chat_message_class(self, css_content):
+        assert ".chat-message" in css_content
+
+    def test_chat_message_max_width(self, css_content):
+        assert "85%" in css_content
+
+    def test_chat_message_user_class(self, css_content):
+        assert ".chat-message.user" in css_content
+
+    def test_chat_message_user_background(self, css_content):
+        assert "#2a3a6a" in css_content
+
+    def test_chat_message_assistant_class(self, css_content):
+        assert ".chat-message.assistant" in css_content
+
+    def test_chat_message_assistant_background(self, css_content):
+        assert "#1e2a4a" in css_content
+
+    def test_chat_input_area_class(self, css_content):
+        assert ".chat-input-area" in css_content
+
+    def test_chat_input_border_color(self, css_content):
+        assert "#3a3a5a" in css_content
+
+    def test_chat_input_focus_border(self, css_content):
+        assert "#5a7aba" in css_content
+
+    def test_chat_button_background(self, css_content):
+        assert "#3a5aba" in css_content
+
+
+class TestToolCallCards:
+    def test_tool_call_card_class(self, css_content):
+        assert ".tool-call-card" in css_content
+
+    def test_tool_call_card_background(self, css_content):
+        assert "#12192e" in css_content
+
+    def test_tool_name_class(self, css_content):
+        assert ".tool-name" in css_content
+
+    def test_tool_name_color(self, css_content):
+        assert "#7aa2f7" in css_content
+
+    def test_tool_args_class(self, css_content):
+        assert ".tool-args" in css_content
+
+    def test_tool_args_color(self, css_content):
+        assert "#8888aa" in css_content
+
+    def test_tool_status_class(self, css_content):
+        assert ".tool-status" in css_content
+
+    def test_tool_status_running(self, css_content):
+        assert ".running" in css_content
+
+    def test_tool_status_running_color(self, css_content):
+        assert "#7af7a2" in css_content
+
+    def test_tool_status_complete(self, css_content):
+        assert ".complete" in css_content
+
+    def test_tool_status_complete_color(self, css_content):
+        assert "#7aa2f7" in css_content
+
+
+class TestRightPanelTabs:
+    def test_right_panel_tabs_class(self, css_content):
+        assert ".right-panel-tabs" in css_content
+
+    def test_right_panel_content_class(self, css_content):
+        assert ".right-panel-content" in css_content
+
+
+class TestLoginPage:
+    def test_login_page_class(self, css_content):
+        assert ".login-page" in css_content
+
+    def test_login_card_class(self, css_content):
+        assert ".login-card" in css_content
+
+    def test_login_card_width(self, css_content):
+        assert "360px" in css_content
+
+    def test_login_card_background(self, css_content):
+        # Already tested via sidebar bg, but login card also uses #16213e
+        assert "#16213e" in css_content
+
+    def test_login_card_border_radius(self, css_content):
+        assert "12px" in css_content
+
+    def test_login_error_class(self, css_content):
+        assert ".error" in css_content
+
+    def test_login_error_color(self, css_content):
+        assert "#f7607a" in css_content