Updated pages and components to use new Button componentdev

5 files changed, 95 insertions, 37 deletions

diff --git a/Pages/Component/AboutDialog.razor b/Pages/Component/AboutDialog.razor
index 888040e..f696549 100644
--- a/Pages/Component/AboutDialog.razor
+++ b/Pages/Component/AboutDialog.razor
@@ -684,7 +684,9 @@
 		<ProgressBar @ref=progressBar />
 	</div>
     <ButtonContainer>
-        <button @onclick=Hide>Close</button>
+        <Button
+            BackgroundColor=Color.ButtonPrimary
+            OnClick=@(async () => Hide())>Close</Button>
     </ButtonContainer>
 </Dialog>
 
diff --git a/Pages/Component/TagEditDialog.razor b/Pages/Component/TagEditDialog.razor
index 14d8c27..203c6ec 100644
--- a/Pages/Component/TagEditDialog.razor
+++ b/Pages/Component/TagEditDialog.razor
@@ -22,8 +22,13 @@
     </label>
     <input type="text" @bind=tagAlias/>
     <ButtonContainer>
-        <button @onclick=Hide class="secondary">Cancel</button>
-        <button @onclick=Submit>@(TagDefinition is null ? "Create" : "Apply")</button>
+        <Button OnClick=@(async () => Hide())>Cancel</Button>
+        <Button
+            BackgroundColor=Color.ButtonPrimary
+            OnClick=@(async () => Submit())>
+
+            @(TagDefinition is null ? "Create" : "Apply")
+        </Button>
     </ButtonContainer>
 </Dialog>
 
diff --git a/Pages/Component/TagSelectDialog.razor b/Pages/Component/TagSelectDialog.razor
index 003a3b6..ce9e7d2 100644
--- a/Pages/Component/TagSelectDialog.razor
+++ b/Pages/Component/TagSelectDialog.razor
@@ -47,9 +47,14 @@
 		</LoadedState>
     </LoadableContent>
     <ButtonContainer>
-        <button @onclick=@(() => dialog.Hide()) class="secondary">Cancel</button>
+        <Button OnClick=@(async () => dialog.Hide())>Cancel</Button>
         @if(state == ComponentState.Loaded) {
-			<button @onclick=@(() => Submit())>Accept</button>
+			<Button
+                BackgroundColor=Color.ButtonPrimary
+                OnClick=@(async () => Submit())>
+
+                Accept
+            </Button>
         }
     </ButtonContainer>
 </Dialog>
diff --git a/Pages/TagDefinitions.razor b/Pages/TagDefinitions.razor
index b9f90d6..58e5ac7 100644
--- a/Pages/TagDefinitions.razor
+++ b/Pages/TagDefinitions.razor
@@ -11,7 +11,13 @@
 
 <div style="padding:var(--size-default-gap);">
     <ButtonContainer>
-        <button @onclick=PromptTagCreate data-keyboard-shortcut="c"><u>C</u>reate</button>
+        <Button
+            BackgroundColor=Color.ButtonPrimary
+            ShortcutKey=@('c')
+            OnClick=@(async () => PromptTagCreate())>
+
+				<u>C</u>reate
+            </Button>
     </ButtonContainer>
 
     <TabContainer @ref=tabContainer>
@@ -75,8 +81,13 @@
 
 <Dialog Title="Are you sure you want to delete this tag definition?" @ref=deleteTagDialog>
     <ButtonContainer>
-        <button @onclick=@(() => deleteTagDialog.Hide()) class="secondary">Cancel</button>
-        <button @onclick=@(() => DeleteTagDefinition()) class="warning">Confirm</button>
+        <Button OnClick=@(async () => deleteTagDialog.Hide())>Cancel</Button>
+        <Button
+            BackgroundColor=Color.ButtonWarning
+            OnClick=@(async () => DeleteTagDefinition())>
+
+            Confirm
+        </Button>
     </ButtonContainer>
 </Dialog>
 
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index 73ded5f..9788556 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -120,47 +120,77 @@
 			</div>
 			<div id="button-container">
 				<ButtonContainer>
-					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">
-						<img src="/images/trash.svg"/>
+					<Button
+						BackgroundColor=Color.ButtonWarning
+						FontSize=8
+						IconUrl="/images/trash.svg"
+						ShortcutKey=@('d')
+						OnClick=@(async () => deleteDialog.Show())>
+
 						<p><u>D</u>elete</p>
-					</button>
-					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">
-						<img src="/images/tag.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/tag.svg"
+						ShortcutKey=@('t')
+						OnClick=@(async () => tagDialog.Show())>
+
 						<p>Add <u>T</u>ag</p>
-					</button>
-					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">
-						<img src="/images/book.svg"/>
+					</Button>
+					<Button
+						FontSize=8
+						IconUrl="/images/book.svg"
+						ShortcutKey=@('o')
+						OnClick=@(async () => ocrDialog.Show())>
+
 						<p>View <u>O</u>CR</p>
-					</button>
+					</Button>
                     @if(infoEditMode) {
-@*
-                        <button @onclick=@(() => await ApplyInfoEdit(false)) class="secondary">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							OnClick=@(async () => await ApplyInfoEdit(false))>
+
 							<p>Cancel</p>
-						</button>
-						<button @onclick=@(() => await ApplyInfoEdit(true))>
-							<img src="/images/checkmark.svg"/>
+						</Button>
+						<Button
+							FontSize=8
+							IconUrl="/images/checkmark.svg"
+							OnClick=@(async () => await ApplyInfoEdit(true))>
+
 							<p>Apply</p>
-						</button>
-*@
+						</Button>
                     } else {
-						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">
-							<img src="/images/edit.svg"/>
+						<Button
+							FontSize=8
+							IconUrl="/images/edit.svg"
+							ShortcutKey=@('e')
+							OnClick=@(async () => InfoEditMode = true)>
+
 							<p><u>E</u>dit Info</p>
-						</button>
+						</Button>
 					}
 @*
                     @if(media.IsIngest) {
-						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">
-							<img src="/images/checkmark.svg"/>
+						<Button
+							BackgroundColor=Color.ButtonPrimary
+							IconUrl="/images/checkmark.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(false))>
+
 							<p>Mark Tagging <u>C</u>omplete</p>
-						</button>
+						</Button>
 					} else {
 *@
-                        <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">
-							<img src="/images/cross.svg"/>
+                        <Button
+							FontSize=8
+							IconUrl="/images/cross.svg"
+							ShortcutKey=@('c')
+							OnClick=@(async () => SetIngest(true))
+							>
+
 							<p>Mark Tagging In<u>c</u>omplete</p>
-						</button>
+						</Button>
 					@* } *@
 				</ButtonContainer>
 			</div>
@@ -174,8 +204,8 @@
 
 <Dialog Title="Delete this media?" @ref=deleteDialog>
     <ButtonContainer>
-        <button @onclick=@(() => deleteDialog.Hide()) class="secondary">Cancel</button>
-        <button @onclick=DeleteMedia class="warning">Confirm</button>
+        <Button OnClick=@(async () => deleteDialog.Hide())>Cancel</Button>
+        <Button OnClick=DeleteMedia BackgroundColor=Color.ButtonWarning>Confirm</Button>
     </ButtonContainer>
 </Dialog>
 
@@ -188,7 +218,12 @@
     }
 *@
     <ButtonContainer>
-        <button @onclick=@(() => ocrDialog.Hide())>Close</button>
+        <Button
+			BackgroundColor=Color.ButtonPrimary
+			OnClick=@(async () => ocrDialog.Hide())>
+
+			Close
+		</Button>
     </ButtonContainer>
 </Dialog>