fix: formatting and make interactive component invisible

app.py

@@ -84,13 +84,18 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
             )
 
     with gr.Row():
-        html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + get_content("htmls/adventure_blank.html")
+        html = (
+            "<div style='max-width:100%; max-height:360px; overflow:auto'>"
+            + get_content("htmls/adventure_blank.html")
+        )
         adventure_log = gr.HTML(html, label="Adventure Log", elem_id="adventure_log")
 
     # handling player info
     with gr.Row():
-        player_backend_id = gr.Textbox("", visible=True, elem_id="player_backend_id")
-        player_info_query_btn = gr.Button("Query", elem_id="trigger_button")
+        player_backend_id = gr.Textbox("", visible=False, elem_id="player_backend_id")
+        player_info_query_btn = gr.Button(
+            "Query", elem_id="trigger_button", visible=False
+        )
 
     # actions when player login
     player_info_query_btn.click(get_player_info, player_backend_id, player_info).then(

theme.py

@@ -35,28 +35,20 @@ class Seafoam(Base):
         super().set(
             body_background_fill="url('https://storage.googleapis.com/wpassets.junyiacademy.org/1/2023/11/background-scaled.jpg') no-repeat center center / cover",
             body_background_fill_dark="url('https://storage.googleapis.com/wpassets.junyiacademy.org/1/2023/11/background-scaled.jpg') no-repeat center center / cover",
-            
             body_text_color="#333",
             body_text_color_dark="#333",
-
             background_fill_primary="rgba(255, 255, 255, 1)",
             background_fill_primary_dark="rgba(255, 255, 255, 1)",
-
             background_fill_secondary="rgba(255, 255, 255, 0.0)",
             background_fill_secondary_dark="rgba(255, 255, 255, 0)",
-
             block_background_fill="rgba(255, 255, 255, 0.1)",
             block_background_fill_dark="rgba(255, 255, 255, 0.1)",
-
             block_border_color="rgba(255, 255, 255, 0.1)",
             block_border_color_dark="rgba(255, 255, 255, 0.1)",
-
             border_color_primary="trasparent",
             border_color_primary_dark="trasparent",
-
             slider_color="*secondary_300",
             slider_color_dark="*secondary_600",
-
             block_title_text_weight="600",
             block_border_width="3px",
             block_shadow="*shadow_drop_lg",