Add button style

Author: govizlora

assets/button-border-active.svg

@@ -322,7 +322,6 @@ export function Camera({
       </div>
 
       <button
-        className="main"
         style={{
           margin: 'auto',
           marginBottom: 16,

assets/button-border-hover.svg

@@ -53,10 +53,7 @@ export class ErrorBoundary extends Component {
           </div>
           <button
             style={{
-              color: '#FF6060',
               marginTop: 32,
-              fontSize: '1rem',
-              padding: '8px 16px',
               flexShrink: 0,
             }}
             onClick={() => {

assets/button-border.svg

@@ -41,28 +41,27 @@ body {
 
 button {
   font-family: inherit;
-  border: 1px solid #ff606080;
-  background-color: #ff606010;
+  background-color: unset;
   cursor: pointer;
-}
-
-button.main {
   font-size: 1.2em;
   color: #5ef5ff;
   width: 160px;
   height: 48px;
   flex-shrink: 0;
+  border-image-source: url(../assets/button-border.svg);
+  /* Half of the height of the button */
+  border-image-slice: 24;
+  border-image-width: auto;
 }
 
 @media (hover: hover) and (pointer: fine) {
   button:hover {
-    border: 1px solid #ff6060;
-    background-color: #ff606040;
+    border-image-source: url(../assets/button-border-hover.svg);
   }
 }
 
 button:active {
-  background-color: #ff606060;
+  border-image-source: url(../assets/button-border-active.svg);
 }
 
 button:focus {

src/camera.tsx

@@ -196,7 +196,6 @@ export function Result({
           marginBottom: 16,
         }}
         onClick={onStartOver}
-        className="main"
       >
         START OVER
       </button>