1 files changed, 64 insertions, 29 deletions
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>