more visuals changes

Author: MrCull

MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor

@@ -1,22 +1,18 @@
 @using Microsoft.AspNetCore.Components
 
-<div class="col-md-4 offset-md-4">
-    <label>Results</label>
-    <div class="container">
-        <textarea @bind="OutputText" rows="6"></textarea>
-
-    </div>
-
-    <div class="container">
-        <button class="btn btn-primary" @onclick="CopyToClipboard">Copy to Clipboard</button>
-        
+<div class="col-md-6 offset-md-3 mt-5">
+    <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+            <h5 class="mb-0">Results</h5>
+        </div>
+        <div class="card-body">
+            <textarea class="form-control mb-3" @bind="OutputText" rows="6" placeholder="Your output will appear here..."></textarea>
+            <button class="btn btn-success w-100" @onclick="CopyToClipboard">Copy to Clipboard</button>
+            <div class="mt-3">
+                <span class="text-success">@copyConfirmationMessage</span>
+            </div>
+        </div>
     </div>
-
-    <br />
-    <div class="container">
-        <label class="btn-success">@copyConfirmationMessage</label>
-    </div>
-
 </div>
 
 @code {

MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor.css

@@ -1,32 +1,38 @@
-/*.output-pane {
-    overflow: hidden;
-    resize: none;*/ /* Prevent manual resizing */
-    /*min-height: 2em;*/ /* Minimum height */
-    /*box-sizing: border-box;*/ /* Include padding in the height calculation */
-/*}*/
-
-.textarea {
+.textarea {
     overflow: hidden;
     resize: none; /* Prevent manual resizing */
+    min-height: 6em; /* Set a more appropriate minimum height */
+    box-sizing: border-box; /* Include padding in the height calculation */
+    padding: 10px; /* Add padding for better appearance */
+    font-size: 1rem; /* Set a readable font size */
+    border: 1px solid #d1d1d1; /* Subtle border color */
+    border-radius: 4px; /* Add border radius for smoother edges */
 }
 
 .text-success {
-    color: green;
+    color: #6c757d; /* Subtle gray color */
+    font-weight: bold; /* Make the text bold for better visibility */
+    margin-top: 10px; /* Add margin to separate from other elements */
 }
 
 .button {
     padding: 10px 20px;
-    background-color: #007bff;
+    background-color: #6c757d; /* Subtle gray color */
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    font-size: 1rem; /* Set a readable font size */
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
 }
 
-    .button:hover {
-        background-color: #0056b3;
-    }
+.button:hover {
+    background-color: #5a6268; /* Slightly darker gray on hover */
+}
 
 .label {
     margin-left: 10px;
+    color: #adb5bd; /* Subtle gray color */
+    font-size: 0.875rem; /* Set a smaller font size for labels */
+    font-weight: 500; /* Medium font weight for better readability */
 }

MyDevTools/Components/Pages/UrlEncoderDecoder.razor

@@ -1,6 +1,5 @@
 @page "/URLEncoderDecoder"
 @inherits Base.BasePage
-@inject Services.IClipboardService ClipboardService
 @inject NavigationManager NavigationManager
 
 
@@ -16,28 +15,18 @@
 
             <button class="btn btn-primary btn-block" @onclick="EncodeUrl">Encode URL</button>
             <button class="btn btn-warning btn-block" @onclick="DecodeUrl">Decode URL</button>
-            <button class="btn btn-success btn-block" @onclick="CopyToClipboard">Copy to Clipboard</button>
         </div>
     </div>
 
     @if (!string.IsNullOrEmpty(processedUrl))
     {
-        <div class="row mt-4">
-            <div class="col-md-6 offset-md-3">
-                <div class="alert alert-success" role="alert">
-                    <strong>Processed URL:</strong>
-                    <textarea readonly class="form-control" rows="3">@processedUrl</textarea>
-                    <div class="mt-2 text-success">@copyConfirmationMessage</div>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@processedUrl" />
     }
 </div>
 
 @code {
     private string inputUrl = "";
     private string processedUrl = "";
-    private string copyConfirmationMessage = "";
 
     protected override async Task OnInitializedAsync()
     {
@@ -75,17 +64,4 @@
             processedUrl = "Error: " + ex.Message;
         }
     }
-
-    private async Task CopyToClipboard()
-    {
-        try
-        {
-            await ClipboardService.CopyToClipboardAsync(processedUrl);
-            copyConfirmationMessage = "Text copied to clipboard!";
-        }
-        catch (Exception ex)
-        {
-            copyConfirmationMessage = "Error: " + ex.Message;
-        }
-    }
 }