diff --git a/assets/integrations/dark/ag_grid.svg b/assets/integrations/dark/ag_grid.svg new file mode 100644 index 000000000..2d321c4d9 --- /dev/null +++ b/assets/integrations/dark/ag_grid.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/integrations/dark/amazon_cognito.svg b/assets/integrations/dark/amazon_cognito.svg new file mode 100644 index 000000000..b691023c1 --- /dev/null +++ b/assets/integrations/dark/amazon_cognito.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/aws.svg b/assets/integrations/dark/aws.svg new file mode 100644 index 000000000..d384987f4 --- /dev/null +++ b/assets/integrations/dark/aws.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/azure.svg b/assets/integrations/dark/azure.svg new file mode 100644 index 000000000..364c74468 --- /dev/null +++ b/assets/integrations/dark/azure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/azure_mssql.svg b/assets/integrations/dark/azure_mssql.svg new file mode 100644 index 000000000..364c74468 --- /dev/null +++ b/assets/integrations/dark/azure_mssql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/azure_openai.svg b/assets/integrations/dark/azure_openai.svg new file mode 100644 index 000000000..e9b133a6e --- /dev/null +++ b/assets/integrations/dark/azure_openai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/cloudwatch.svg b/assets/integrations/dark/cloudwatch.svg new file mode 100644 index 000000000..6f966224d --- /dev/null +++ b/assets/integrations/dark/cloudwatch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/jira.svg b/assets/integrations/dark/jira.svg new file mode 100644 index 000000000..99f9b59e2 --- /dev/null +++ b/assets/integrations/dark/jira.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/mongodb.svg b/assets/integrations/dark/mongodb.svg new file mode 100644 index 000000000..2846535f4 --- /dev/null +++ b/assets/integrations/dark/mongodb.svg @@ -0,0 +1 @@ +file_type_mongo \ No newline at end of file diff --git a/assets/integrations/dark/salesforce.svg b/assets/integrations/dark/salesforce.svg new file mode 100644 index 000000000..d1c1ae1c1 --- /dev/null +++ b/assets/integrations/dark/salesforce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/dark/slack.svg b/assets/integrations/dark/slack.svg new file mode 100644 index 000000000..6d14c726c --- /dev/null +++ b/assets/integrations/dark/slack.svg @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/assets/integrations/light/ag_grid.svg b/assets/integrations/light/ag_grid.svg new file mode 100644 index 000000000..2d321c4d9 --- /dev/null +++ b/assets/integrations/light/ag_grid.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/integrations/light/amazon_cognito.svg b/assets/integrations/light/amazon_cognito.svg new file mode 100644 index 000000000..b691023c1 --- /dev/null +++ b/assets/integrations/light/amazon_cognito.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/aws.svg b/assets/integrations/light/aws.svg new file mode 100644 index 000000000..b2d900571 --- /dev/null +++ b/assets/integrations/light/aws.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/azure.svg b/assets/integrations/light/azure.svg new file mode 100644 index 000000000..364c74468 --- /dev/null +++ b/assets/integrations/light/azure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/azure_mssql.svg b/assets/integrations/light/azure_mssql.svg new file mode 100644 index 000000000..364c74468 --- /dev/null +++ b/assets/integrations/light/azure_mssql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/azure_openai.svg b/assets/integrations/light/azure_openai.svg new file mode 100644 index 000000000..bb6b12e39 --- /dev/null +++ b/assets/integrations/light/azure_openai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/cloudwatch.svg b/assets/integrations/light/cloudwatch.svg new file mode 100644 index 000000000..6f966224d --- /dev/null +++ b/assets/integrations/light/cloudwatch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/jira.svg b/assets/integrations/light/jira.svg new file mode 100644 index 000000000..99f9b59e2 --- /dev/null +++ b/assets/integrations/light/jira.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/mongodb.svg b/assets/integrations/light/mongodb.svg new file mode 100644 index 000000000..2846535f4 --- /dev/null +++ b/assets/integrations/light/mongodb.svg @@ -0,0 +1 @@ +file_type_mongo \ No newline at end of file diff --git a/assets/integrations/light/salesforce.svg b/assets/integrations/light/salesforce.svg new file mode 100644 index 000000000..d1c1ae1c1 --- /dev/null +++ b/assets/integrations/light/salesforce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/integrations/light/slack.svg b/assets/integrations/light/slack.svg new file mode 100644 index 000000000..6d14c726c --- /dev/null +++ b/assets/integrations/light/slack.svg @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/pcweb/pages/gallery/apps.py b/pcweb/pages/gallery/apps.py index c6ebe0384..e2b4b33d7 100644 --- a/pcweb/pages/gallery/apps.py +++ b/pcweb/pages/gallery/apps.py @@ -3,6 +3,7 @@ import flexdown import reflex as rx +import reflex_ui as ui from reflex_ui.blocks.demo_form import demo_form_dialog from pcweb.components.button import button, button_with_icon @@ -19,6 +20,28 @@ ] +def integration_image(integration: str): + integration_logo = integration.replace(" ", "_").lower() + return ui.tooltip( + trigger=ui.avatar.root( + ui.avatar.image( + src=rx.color_mode_cond( + f"/integrations/light/{integration_logo}.svg", + f"/integrations/dark/{integration_logo}.svg", + ), + unstyled=True, + class_name="size-full", + ), + ui.avatar.fallback( + unstyled=True, + ), + unstyled=True, + class_name="size-5 flex items-center justify-center", + ), + content=integration, + ) + + def load_all_gallery_apps(): """Load markdown files from all supported paths and associate them with their base folder.""" gallery_apps = {} @@ -158,6 +181,23 @@ def page(document, is_reflex_template: bool) -> rx.Component: else rx.fragment() ), rx.el.h2(meta["description"], class_name="font-md text-slate-11"), + ( + rx.el.div( + rx.el.span( + "Integrations: ", class_name="text-slate-9 font-base" + ), + rx.el.div( + *[ + integration_image(integration) + for integration in meta.get("integrations", []) + ], + class_name="flex flex-row gap-3.5 items-center", + ), + class_name="flex flex-row items-center gap-2 mt-2", + ) + if meta.get("integrations") + else rx.fragment() + ), class_name="flex flex-col gap-3 p-8", ), rx.box( diff --git a/pcweb/pages/gallery/gallery.py b/pcweb/pages/gallery/gallery.py index be5cb9f2e..d6741f945 100644 --- a/pcweb/pages/gallery/gallery.py +++ b/pcweb/pages/gallery/gallery.py @@ -2,9 +2,9 @@ import flexdown import reflex as rx +import reflex_ui as ui from pcweb.components.button import button -from pcweb.components.icons import get_icon from pcweb.components.r_svg_loader import r_svg_loader from pcweb.templates.webpage import webpage @@ -56,6 +56,7 @@ def app_dialog_with_trigger( "Learn More", variant="secondary", size="md", + class_name="!text-secondary-12", ), href=app_inner_page, class_name="no-underline outline-none", @@ -71,11 +72,33 @@ def app_dialog_with_trigger( ), class_name="flex flex-col w-full h-full gap-y-3 relative", ), - class_name="w-full !max-w-[90em] xl:max-w-[110em] 2xl:max-w-[120em] h-[80vh]", + class_name="w-full !max-w-[90em] xl:max-w-[110em] 2xl:max-w-[120em] h-[80vh] font-sans", ), ) +def integration_image(integration: str): + integration_logo = integration.replace(" ", "_").lower() + return ui.tooltip( + trigger=ui.avatar.root( + ui.avatar.image( + src=rx.color_mode_cond( + f"/integrations/light/{integration_logo}.svg", + f"/integrations/dark/{integration_logo}.svg", + ), + unstyled=True, + class_name="size-full", + ), + ui.avatar.fallback( + unstyled=True, + ), + unstyled=True, + class_name="size-4.75 flex items-center justify-center", + ), + content=integration, + ) + + def extended_gallery_grid_item( app_url: str, app_name: str, @@ -84,6 +107,7 @@ def extended_gallery_grid_item( app_image: str, app_inner_page: str, app_video_url: str, + app_integrations: list[str], ): return app_dialog_with_trigger( app_url=app_url, @@ -94,55 +118,63 @@ def extended_gallery_grid_item( app_video_url=app_video_url, trigger_content=rx.el.div( rx.el.div( - rx.image( - src=app_image, - class_name="group-hover:scale-105 duration-200 ease-out object-center object-cover absolute inset-0 h-full w-full blur-in transition-all rounded-[12px] z-10", - ), rx.el.div( + rx.image( + src=app_image, + class_name="group-hover:scale-105 duration-200 ease-out object-center object-cover absolute inset-0 size-full blur-in transition-all z-10", + ), rx.el.div( - rx.link( + rx.el.div( + rx.link( + button( + "Learn More", + variant="secondary", + size="md", + class_name="w-full !text-secondary-12", + on_click=rx.stop_propagation, + ), + href=app_inner_page, + class_name="no-underline flex-1", + on_click=rx.stop_propagation, + ), button( - "Learn More", - variant="secondary", + "Preview", + variant="primary", size="md", - class_name="w-full", - on_click=rx.stop_propagation, + class_name="flex-1 shadow-none border-none", ), - href=app_inner_page, - class_name="no-underline flex-1", - on_click=rx.stop_propagation, - ), - button( - "Preview", - variant="primary", - size="md", - class_name="flex-1 shadow-none border-none", + class_name="flex flex-row gap-x-2 w-full items-stretch px-4 pb-4", ), - class_name="flex flex-row gap-x-2 w-full items-stretch px-4 pb-4", + class_name="absolute inset-0 flex items-end justify-center opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out pointer-events-none group-hover:pointer-events-auto z-[99]", ), - class_name="absolute inset-0 flex items-end justify-center z-20 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out pointer-events-none group-hover:pointer-events-auto z-[99]", + class_name="overflow-hidden relative size-full aspect-video ease-out transition-all outline-none ", ), - class_name="overflow-hidden rounded-[12px] relative w-full h-full aspect-video ease-out duration-200 transition-all outline-none border border-slate-4 group-hover:border-slate-3", - ), - rx.el.div( rx.el.div( - get_icon( - icon="badge_logo", - class_name="size-5 flex-shrink-0", + rx.el.span( + app_name, + class_name="text-sm font-semibold text-m-slate-13 dark:text-m-slate-3 truncate min-w-0 max-w-[90%]", ), rx.el.div( - rx.el.p(app_name, class_name="text-sm font-medium truncate"), - rx.el.p( - app_author, - class_name="text-sm font-regular text-slate-9 truncate", + rx.el.span( + "App Integrations: ", class_name="text-slate-9 font-base" ), - class_name="flex flex-col gap-y-0 min-w-0 w-full", + rx.el.div( + *[ + integration_image(integration) + for integration in app_integrations + ], + class_name="flex flex-row gap-3.5 items-center", + ), + class_name="flex flex-row items-center gap-2 mt-2", + ), + class_name=( + "flex flex-col w-full px-4 py-3 border-t border-m-slate-4 dark:border-m-slate-12 gap-4 relative pb-4", ), - class_name="flex flex-row gap-x-2 items-start min-w-0 w-full", ), - class_name="flex flex-row items-center gap-4 justify-between !text-slate-10 group-hover:!text-slate-11 w-full", + class_name="flex flex-col w-full", ), - class_name="flex flex-col gap-2 w-full p-2 rounded-[14px] group hover:bg-slate-3 transition-all duration-200 ease-out cursor-pointer !w-full", + key=app_name, + class_name="group cursor-pointer rounded-2xl shadow-small border border-slate-4 dark:border-m-slate-12 bg-white-1 dark:bg-m-slate-14 flex flex-col w-full relative overflow-hidden", ), ) @@ -159,6 +191,7 @@ def create_grid_with_items(): slug = re.sub(r"[\s_]+", "-", meta.get("title", "")).lower() app_inner_page = f"/templates/{slug}" app_video_url = meta.get("video", "#") + app_integrations = meta.get("integrations", []) items.append( extended_gallery_grid_item( @@ -169,12 +202,13 @@ def create_grid_with_items(): app_image=f"/{REFLEX_BUILD_TEMPLATES_IMAGES}{app_image}", app_inner_page=app_inner_page, app_video_url=app_video_url, + app_integrations=app_integrations, ) ) return rx.el.div( *items, - class_name="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:px-8 lg:px-8", + class_name="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:px-8 lg:px-8", ) diff --git a/reflex_build_templates/admin_console_dashboard.md b/reflex_build_templates/admin_console_dashboard.md index 47f53081c..11d390598 100644 --- a/reflex_build_templates/admin_console_dashboard.md +++ b/reflex_build_templates/admin_console_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "admin dashboard, internal tools, user management, system monitoring, admin console, Reflex app, operational control panel"}, ] tags: ["Dashboard", "Admin", "Internal Tools", "Operations"] +integrations: ["Azure MSSQL", "Azure Auth"] --- diff --git a/reflex_build_templates/behavioral_ops_dashboard.md b/reflex_build_templates/behavioral_ops_dashboard.md index 626bd39df..1201f76c0 100644 --- a/reflex_build_templates/behavioral_ops_dashboard.md +++ b/reflex_build_templates/behavioral_ops_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "behavioral cohort explorer, user segmentation dashboard, product analytics, marketing analytics, cohort scheduling, Reflex app"}, ] tags: ["Dashboard", "Behavioral Analytics", "Cohort Analysis", "Product Growth", "Marketing Insights"] +integrations: ["Airtable", "Salesforce"] --- # Behavioral Ops Dashboard diff --git a/reflex_build_templates/claude_clone.md b/reflex_build_templates/claude_clone.md index bec21d8ef..9714642e4 100644 --- a/reflex_build_templates/claude_clone.md +++ b/reflex_build_templates/claude_clone.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "Claude clone, AI assistant UI, chat interface, chatbot frontend, streaming responses, LLM UX"}, ] tags: ["AI", "Chatbot", "Frontend", "Assistant"] +integrations: ["Anthropic", "Descope"] --- diff --git a/reflex_build_templates/database_visualization.md b/reflex_build_templates/database_visualization.md index 572945b67..6bdcf6b41 100644 --- a/reflex_build_templates/database_visualization.md +++ b/reflex_build_templates/database_visualization.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "database visualization, SQL dashboard, data explorer, interactive charts, database analytics, Reflex app, business intelligence"}, ] tags: ["Dashboard", "Database", "Visualization", "Analytics"] +integrations: ["Okta Auth", "Database"] --- diff --git a/reflex_build_templates/delivery_ops_dashboard.md b/reflex_build_templates/delivery_ops_dashboard.md index 510dbb042..3ad87af7d 100644 --- a/reflex_build_templates/delivery_ops_dashboard.md +++ b/reflex_build_templates/delivery_ops_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "delivery operations dashboard, logistics tracking, fleet management, order fulfillment, route optimization, Reflex app"}, ] tags: ["Dashboard", "Logistics", "Delivery", "Operations"] +integrations: ["Okta Auth", "Databricks"] --- diff --git a/reflex_build_templates/deployment_and_health_dashboard.md b/reflex_build_templates/deployment_and_health_dashboard.md index a2a4afe32..aafbd15b5 100644 --- a/reflex_build_templates/deployment_and_health_dashboard.md +++ b/reflex_build_templates/deployment_and_health_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "service health dashboard, real-time monitoring, canary deployments, incident management, SRE tools, Reflex app, DevOps analytics"}, ] tags: ["Dashboard", "DevOps", "Monitoring", "Analytics"] +integrations: ["Cloudwatch", "Github", "Jira"] --- diff --git a/reflex_build_templates/finance_dashboard.md b/reflex_build_templates/finance_dashboard.md index 47f7dc710..cc98b12fe 100644 --- a/reflex_build_templates/finance_dashboard.md +++ b/reflex_build_templates/finance_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "factor risk model, portfolio analytics, equity factors, GPU analytics, risk management, Reflex app, finance dashboard"}, ] tags: ["Dashboard", "Finance", "Risk", "Analytics"] +integrations: ["Databricks", "AG Grid", "Slack"] --- diff --git a/reflex_build_templates/knowledge_chat.md b/reflex_build_templates/knowledge_chat.md index 75f61049b..720c33422 100644 --- a/reflex_build_templates/knowledge_chat.md +++ b/reflex_build_templates/knowledge_chat.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "knowledge chat, AI assistant, Q&A, document search, enterprise knowledge base, team collaboration, Reflex app"}, ] tags: ["AI", "Chat", "Knowledge Management", "Collaboration", "Assistant"] +integrations: ["Azure", "Azure Auth", "Azure OpenAI"] --- diff --git a/reflex_build_templates/machine_learning_model_dashboard.md b/reflex_build_templates/machine_learning_model_dashboard.md index 123f47591..532d6ddfc 100644 --- a/reflex_build_templates/machine_learning_model_dashboard.md +++ b/reflex_build_templates/machine_learning_model_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "machine learning dashboard, ML model management, model deployment, AI monitoring, model training, Reflex app, MLOps platform"}, ] tags: ["Dashboard", "Machine Learning", "AI", "MLOps"] +integrations: ["AWS", "Amazon Cognito", "Langchain"] --- diff --git a/reflex_build_templates/real_time_sales_dashboard.md b/reflex_build_templates/real_time_sales_dashboard.md index c009051b2..a5ffcbfce 100644 --- a/reflex_build_templates/real_time_sales_dashboard.md +++ b/reflex_build_templates/real_time_sales_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "real-time sales dashboard, revenue tracking, sales KPIs, CRM analytics, conversion rate, team performance, Reflex app"}, ] tags: ["Dashboard", "Sales", "Analytics", "Real-Time"] +integrations: ["Stripe", "Hubspot"] --- diff --git a/reflex_build_templates/security_ops_dashboard.md b/reflex_build_templates/security_ops_dashboard.md index b38c7a6ed..0cf1602c9 100644 --- a/reflex_build_templates/security_ops_dashboard.md +++ b/reflex_build_templates/security_ops_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "security dashboard, SOC platform, alert monitoring, threat detection, incident response, security operations center, Reflex app"}, ] tags: ["Dashboard", "Security", "DevSecOps", "Monitoring"] +integrations: ["AWS"] --- diff --git a/reflex_build_templates/supply_chain_config_dashboard.md b/reflex_build_templates/supply_chain_config_dashboard.md index 1b42d7dc9..f1360f55b 100644 --- a/reflex_build_templates/supply_chain_config_dashboard.md +++ b/reflex_build_templates/supply_chain_config_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "supply chain management, logistics optimization, supplier dashboard, inventory tracking, procurement automation, Reflex app, operations management"}, ] tags: ["Dashboard", "Supply Chain", "Logistics", "Operations"] +integrations: ["Databricks"] --- diff --git a/reflex_build_templates/ticket_queue_management.md b/reflex_build_templates/ticket_queue_management.md index e8a03d171..054023cc4 100644 --- a/reflex_build_templates/ticket_queue_management.md +++ b/reflex_build_templates/ticket_queue_management.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "ticket queue management, support dashboard, ticket triage, ITSM, incident tracking, helpdesk workflow, Reflex app"}, ] tags: ["Dashboard", "Support", "ITSM", "Workflow"] +integrations: ["Linear", "Notion", "Github", "Anthropic"] --- diff --git a/reflex_build_templates/trade_blotter_dashboard.md b/reflex_build_templates/trade_blotter_dashboard.md index ee9da3195..1a88eeab1 100644 --- a/reflex_build_templates/trade_blotter_dashboard.md +++ b/reflex_build_templates/trade_blotter_dashboard.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "trade blotter, trading dashboard, financial operations, execution management, outlier detection, compliance reporting, nightly pdf, trading analytics"}, ] tags: ["Trading", "Finance", "Compliance", "Analytics"] +integrations: ["Resend", "Database"] --- # End-of-Day Trade Blotter diff --git a/reflex_build_templates/treasury_dashboard.md b/reflex_build_templates/treasury_dashboard.md index fba0cb62b..6936c664c 100644 --- a/reflex_build_templates/treasury_dashboard.md +++ b/reflex_build_templates/treasury_dashboard.md @@ -10,6 +10,7 @@ meta: [ {"name": "keywords", "content": "treasury dashboard, liquidity management, cash forecasting, real-time balances, corporate treasury tools, finance analytics"}, ] tags: ["Dashboard", "Finance", "Treasury", "Analytics"] +integrations: ["MongoDB", "Stripe"] --- # Treasury & Liquidity Monitor diff --git a/reflex_build_templates/virtual_machine_life_cycle.md b/reflex_build_templates/virtual_machine_life_cycle.md index b89e8bf01..c9ea6007d 100644 --- a/reflex_build_templates/virtual_machine_life_cycle.md +++ b/reflex_build_templates/virtual_machine_life_cycle.md @@ -9,6 +9,7 @@ meta: [ {"name": "keywords", "content": "virtual machine management, VM lifecycle, cloud infrastructure, server provisioning, VM monitoring, Reflex app, DevOps automation"}, ] tags: ["Dashboard", "Infrastructure", "VM Management", "DevOps"] +integrations: ["AWS"] --- diff --git a/tests/test_lambdas.py b/tests/test_lambdas.py index bab66eaa1..262df0dd6 100644 --- a/tests/test_lambdas.py +++ b/tests/test_lambdas.py @@ -33,5 +33,5 @@ def check_box_color(i, initial_color, input_color, expected_color): ) check_box_color(1, "rgb(245, 168, 152)", "rgb(245, 168, 152)", "rgb(245, 168, 152)") - check_box_color(2, "rgb(60, 179, 113)", "DarkBlue", "rgb(60, 179, 113)") - check_box_color(3, "rgb(222, 173, 227)", "#AEADE3", "rgb(222, 173, 227)") + check_box_color(2, "rgb(60, 179, 113)", "DarkBlue", "rgb(0, 0, 139)") + check_box_color(3, "rgb(222, 173, 227)", "#AEADE3", "rgb(174, 173, 227)")