other controls to use the output control

MrCull · MrCull · commit d291649d1e34 · 2024-09-01T13:19:12.000+01:00
diff --git a/MyDevTools/Components/Pages/BranchNameFormatter.razor b/MyDevTools/Components/Pages/BranchNameFormatter.razor
@@ -13,28 +13,18 @@
             </div>
 
             <button class="btn btn-primary btn-block" @onclick="FormatGitBranchName">Format Git Branch Name</button>
-            <button class="btn btn-success btn-block" @onclick="CopyToClipboard">Copy to Clipboard</button>
         </div>
     </div>
 
     @if (!string.IsNullOrEmpty(formattedString))
     {
-        <div class="row mt-4">
-            <div class="col-md-6 offset-md-3">
-                <div class="alert alert-success" role="alert">
-                    <strong>Formatted Branch Name:</strong>
-                    <textarea readonly class="form-control" rows="3">@formattedString</textarea>
-                    <div class="mt-2 text-success">@copyConfirmationMessage</div>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@formattedString" />
     }
 </div>
 
 @code {
     private string inputString = "Feature 12345 : Example work item name";
     private string formattedString = "";
-    private string copyConfirmationMessage = "";
 
     protected override async Task OnInitializedAsync()
     {
@@ -59,17 +49,4 @@
             formattedString = "Error: " + ex.Message;
         }
     }
-
-    private async Task CopyToClipboard()
-    {
-        try
-        {
-            await ClipboardService.CopyToClipboardAsync(formattedString);
-            copyConfirmationMessage = "Text copied to clipboard!";
-        }
-        catch (Exception ex)
-        {
-            copyConfirmationMessage = "Error: " + ex.Message;
-        }
-    }
 }
diff --git a/MyDevTools/Components/Pages/ColorPickerConverter.razor b/MyDevTools/Components/Pages/ColorPickerConverter.razor
@@ -21,10 +21,7 @@
                 </select>
             </div>
 
-            <div class="alert alert-success" role="alert">
-                <strong>Converted Color:</strong>
-                <pre>@convertedColor</pre>
-            </div>
+            <OutputAndCopyToClipboard OutputText="@convertedColor" />
         </div>
     </div>
 </div>
diff --git a/MyDevTools/Components/Pages/Components/DiffOutput.razor.css b/MyDevTools/Components/Pages/Components/DiffOutput.razor.css
@@ -2,8 +2,8 @@
 .line-numbers {
     counter-reset: line-number;
     font-family: 'Courier New', monospace;
-    background-color: #f4f4f4;
-    border: 1px solid #ccc;
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
     padding: 10px;
     line-height: 1;
     margin: 0;
diff --git a/MyDevTools/Components/Pages/ContainerIds.razor b/MyDevTools/Components/Pages/ContainerIds.razor
@@ -27,13 +27,7 @@
 
     @if (!string.IsNullOrEmpty(generatedCodes))
     {
-        <div class="row mt-4">
-            <div class="col-md-6 offset-md-3">
-                <label>Generated Codes:</label>
-                <textarea readonly class="form-control monospace-font" style="width: 180px;" rows="6">@generatedCodes</textarea>
-                <div class="mt-2 text-success">@copyConfirmationMessage</div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@generatedCodes" />
     }
 </div>
 
diff --git a/MyDevTools/Components/Pages/ContainerIds.razor.css b/MyDevTools/Components/Pages/ContainerIds.razor.css
diff --git a/MyDevTools/Components/Pages/CronGenerator.razor b/MyDevTools/Components/Pages/CronGenerator.razor
@@ -65,15 +65,7 @@
 
     @if (!string.IsNullOrEmpty(cronExpression))
     {
-        <div class="row mt-4">
-            <div class="col-md-10 offset-md-1">
-                <div class="alert alert-success" role="alert">
-                    <strong>Generated Cron Expression:</strong>
-                    <textarea readonly id="cronExpression" class="form-control" rows="3">@cronExpression</textarea>
-                    <div class="mt-2 text-success">@copyConfirmationMessage</div>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@cronExpression" />
     }
 </div>
 
diff --git a/MyDevTools/Components/Pages/GuidGenerator.razor b/MyDevTools/Components/Pages/GuidGenerator.razor
@@ -29,14 +29,7 @@
 
     @if (guidResults != null && guidResults.Count > 0)
     {
-        <div class="row mt-4">
-            <div class="col-md-6 offset-md-3">
-                <div class="alert alert-success" role="alert">
-                    <strong>GUID Results:</strong>
-                    <pre>@string.Join("\n", guidResults)</pre>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@string.Join("\n", guidResults)" />
     }
 </div>
 
diff --git a/MyDevTools/Components/Pages/HashGenerator.razor b/MyDevTools/Components/Pages/HashGenerator.razor
@@ -29,14 +29,7 @@
 
     @if (!string.IsNullOrEmpty(hashResult))
     {
-        <div class="row mt-4">
-            <div class="col-md-6 offset-md-3">
-                <div class="alert alert-success" role="alert">
-                    <strong>Hash Result:</strong>
-                    <pre>@hashResult</pre>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@hashResult" />
     }
 </div>
 
diff --git a/MyDevTools/Components/Pages/JwtDecoder.razor b/MyDevTools/Components/Pages/JwtDecoder.razor
@@ -21,14 +21,7 @@
 
     @if (!string.IsNullOrEmpty(decodedJson))
     {
-        <div class="row mt-4">
-            <div class="col-md-10 offset-md-1">
-                <div class="alert alert-success" role="alert">
-                    <strong>Decoded JWT:</strong>
-                    <textarea readonly class="form-control" rows="8">@decodedJson</textarea>
-                </div>
-            </div>
-        </div>
+        <OutputAndCopyToClipboard OutputText="@decodedJson" />
     }
 </div>
 
diff --git a/MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor b/MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor
@@ -6,7 +6,7 @@
             <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>
+            <textarea class="form-control mb-3 monospace-font" @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>
diff --git a/MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor.css b/MyDevTools/Components/Pages/OutputAndCopyToClipboard.razor.css
@@ -1,23 +1,21 @@
-﻿.textarea {
+﻿.monospace-font {
+    font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', monospace;
+}
+
+.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: 1px solid var(--border-color); /* Subtle border color */
     border-radius: 4px; /* Add border radius for smoother edges */
 }
 
-.text-success {
-    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: #6c757d; /* Subtle gray color */
+    background-color: var(--success-color); /* Green color for success */
     color: #fff;
     border: none;
     border-radius: 5px;
@@ -27,12 +25,11 @@
 }
 
 .button:hover {
-    background-color: #5a6268; /* Slightly darker gray on hover */
+    background-color: var(--success-color-dark); /* Slightly darker green 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 */
+.text-success {
+    color: var(--success-color); /* Green color for success */
+    font-weight: bold; /* Make the text bold for better visibility */
+    margin-top: 10px; /* Add margin to separate from other elements */
 }
diff --git a/MyDevTools/Components/Pages/SqlFormatter.razor b/MyDevTools/Components/Pages/SqlFormatter.razor
@@ -15,28 +15,18 @@
             </div>
 
             <button class="btn btn-primary btn-block" @onclick="FormatSQLQuery">Format SQL Query</button>
-            <button class="btn btn-success btn-block" @onclick="CopyToClipboard">Copy to Clipboard</button>
         </div>
     </div>
 
     @if (!string.IsNullOrEmpty(formattedQuery))
-    {
-        <div class="row mt-4">
-            <div class="col-md-10 offset-md-1">
-                <div class="alert alert-success" role="alert">
-                    <strong>Formatted SQL Query:</strong>
-                    <textarea readonly id="formattedQuery" class="form-control auto-expand" rows="15">@formattedQuery</textarea>
-                    <div class="mt-2 text-success">@copyConfirmationMessage</div>
-                </div>
-            </div>
-        </div>
+    { 
+        <OutputAndCopyToClipboard OutputText="@formattedQuery" />
     }
 </div>
 
 @code {
     private string inputQuery = "SELECT name, age, department FROM employees INNER JOIN departments ON employees.department_id = departments.id WHERE age > 21 AND (department = 'Engineering' OR department = 'HR') GROUP BY department ORDER BY age DESC;";
     private string formattedQuery = "";
-    private string copyConfirmationMessage = "";
 
     protected override async Task OnInitializedAsync()
     {
@@ -57,17 +47,4 @@
             formattedQuery = "Error: " + ex.Message;
         }
     }
-
-    private async Task CopyToClipboard()
-    {
-        try
-        {
-            await ClipboardService.CopyToClipboardAsync(formattedQuery);
-            copyConfirmationMessage = "Query copied to clipboard!";
-        }
-        catch (Exception ex)
-        {
-            copyConfirmationMessage = "Error: " + ex.Message;
-        }
-    }
 }
diff --git a/MyDevTools/Components/Pages/SqlFormatter.razor.css b/MyDevTools/Components/Pages/SqlFormatter.razor.css
@@ -3,4 +3,8 @@
     max-height: 200px; /* Max height before scroll */
     overflow-y: auto; /* Add scroll if text exceeds max-height */
     resize: none; /* Disable manual resize */
+    border: 1px solid var(--border-color); /* Subtle border color */
+    padding: 10px; /* Add padding for better appearance */
+    font-size: 1rem; /* Set a readable font size */
+    border-radius: 4px; /* Add border radius for smoother edges */
 }
diff --git a/MyDevTools/wwwroot/css/app.css b/MyDevTools/wwwroot/css/app.css
@@ -1,3 +1,14 @@
+:root {
+    --primary-color: #007bff; /* Modern blue */
+    --primary-color-dark: #0056b3; /* Darker blue */
+    --success-color: #28a745; /* Green for success */
+    --success-color-dark: #218838; /* Darker green */
+    --text-color: #6c757d; /* Subtle gray */
+    --border-color: #ced4da; /* Light gray for borders */
+    --background-color: #f8f9fa; /* Light gray background */
+    --error-color: #dc3545; /* Red for errors */
+}
+
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }

Original file line number	Diff line number	Diff line change
`@@ -27,13 +27,7 @@`
`27`	`27`
`28`	`28`	`@if (!string.IsNullOrEmpty(generatedCodes))`
`29`	`29`	`{`
`30`		`- <div class="row mt-4">`
`31`		`- <div class="col-md-6 offset-md-3">`
`32`		`- <label>Generated Codes:</label>`
`33`		`- <textarea readonly class="form-control monospace-font" style="width: 180px;" rows="6">@generatedCodes</textarea>`
`34`		`- <div class="mt-2 text-success">@copyConfirmationMessage</div>`
`35`		`- </div>`
`36`		`- </div>`
	`30`	`+ <OutputAndCopyToClipboard OutputText="@generatedCodes" />`
`37`	`31`	`}`
`38`	`32`	`</div>`
`39`	`33`
Original file line number	Diff line number	Diff line change
`@@ -29,14 +29,7 @@`
`29`	`29`
`30`	`30`	`@if (guidResults != null && guidResults.Count > 0)`
`31`	`31`	`{`
`32`		`- <div class="row mt-4">`
`33`		`- <div class="col-md-6 offset-md-3">`
`34`		`- <div class="alert alert-success" role="alert">`
`35`		`- <strong>GUID Results:</strong>`
`36`		`- <pre>@string.Join("\n", guidResults)</pre>`
`37`		`- </div>`
`38`		`- </div>`
`39`		`- </div>`
	`32`	`+ <OutputAndCopyToClipboard OutputText="@string.Join("\n", guidResults)" />`
`40`	`33`	`}`
`41`	`34`	`</div>`
`42`	`35`
Original file line number	Diff line number	Diff line change
`@@ -21,14 +21,7 @@`
`21`	`21`
`22`	`22`	`@if (!string.IsNullOrEmpty(decodedJson))`
`23`	`23`	`{`
`24`		`- <div class="row mt-4">`
`25`		`- <div class="col-md-10 offset-md-1">`
`26`		`- <div class="alert alert-success" role="alert">`
`27`		`- <strong>Decoded JWT:</strong>`
`28`		`- <textarea readonly class="form-control" rows="8">@decodedJson</textarea>`
`29`		`- </div>`
`30`		`- </div>`
`31`		`- </div>`
	`24`	`+ <OutputAndCopyToClipboard OutputText="@decodedJson" />`
`32`	`25`	`}`
`33`	`26`	`</div>`
`34`	`27`