css

LM-Kit · Jan 27, 2025 · ad7c838 · ad7c838
1 parent 48fbad6
commit ad7c838
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 55 deletions.
diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
@@ -88,41 +88,42 @@
             {
                 if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
                 {
-                    <div id="empty-conversation" class="chat-element vertical-stack">
-                        <div class="vertical-stack spacing-4">
-                            <div class="welcome-message">
-                                <b>Maestro</b> at your service—let’s orchestrate something
-                                amazing!
-                            </div>
-                            <div class="welcome-message">
-                                Feel free to ask questions, explore ideas, or engage in meaningful conversations.
-
-                            </div>
-                            <div class="welcome-message">
-                                Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
-                                help.
-
-                            </div>
-
-                        </div>
-
-                        <div class="vertical-stack" style="gap:12px;">
-                            <div class="shortcut-instruction">
-                                <MudText Typo="Typo.overline">
-                                    Press Enter to send a new message
-
-                                </MudText>
-
-                            </div>
-
-                            <div class="shortcut-instruction">
-                                <MudText Typo="Typo.overline">
-                                    Hold Shift + Enter to insert a new line
-
-                                </MudText>
-
-                            </div>
-                        </div>
+                            <div id="empty-chat">
+                        <MudStack Class="chat-element align-self-center flex-1" Spacing="8">
+                            <MudStack Spacing="2">
+                                <div class="welcome-message">
+                                    <b>Maestro</b> at your service—let’s orchestrate something
+                                    amazing!
+                                </div>
+                                <div class="welcome-message">
+                                    Feel free to ask questions, explore ideas, or engage in meaningful conversations.
+
+                                </div>
+                                <div class="welcome-message">
+                                    Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
+                                    help.
+
+                                </div>
+
+                            </MudStack>
+
+                            <MudStack Spacing="4">
+                                <div class="shortcut-instruction">
+                                    <MudText Typo="Typo.overline">
+                                        Press Enter to send a new message
+
+                                    </MudText>
+
+                                </div>
+
+                                <div class="shortcut-instruction">
+                                    <MudText Typo="Typo.overline">
+                                        Hold Shift + Enter to insert a new line
+
+                                    </MudText>
+                                </div>
+                            </MudStack>
+                        </MudStack>
                     </div>
                 }
                 else
@@ -139,9 +140,9 @@
                                 {
                                     <button @onclick="OnScrollToEndButtonClicked"
                                             class="round-button scroll-to-end-button">
-                                                                                            <span>
-                                                                                                <i class="fas fa-arrow-down"></i>
-                                                                                            </span>
+                                                                                                                    <span>
+                                                                                                                        <i class="fas fa-arrow-down"></i>
+                                                                                                                    </span>
                                     </button>
                                 }
                             </div>

diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
@@ -77,17 +77,6 @@ body.mac .chat-element {
     max-width: 1000px;
 }
 
-#empty-conversation {
-    height: 100%;
-    /*    gap: 32px;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    justify-content: center;
-    margin-inline: 0 auto;
-    width: 100%;
-    text-align: center;*/
-}
 
 #user-input {
     padding-inline: 10px;
@@ -114,12 +103,6 @@ body.mac .chat-element {
         color: var(--OnSurface);
     }
 
-.vertical-stack {
-    gap: 8px;
-    display: flex;
-    flex-direction: column;
-}
-
 .welcome-message {
     color: var(--Outline);
     text-align: center;
@@ -145,6 +128,12 @@ body.mac .chat-element {
 }
 
 
+#empty-chat{
+    background-color: yellow !important;
+    align-self: center;
+    display: flex;
+    flex-grow: 1;
+}
 
 #top-bar-center {
     width: 100%;