Agregando svg inline y cambiando estilos a tsa2

ui/public/index.html

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel="stylesheet">
   <link rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap.min.css">
   <link rel="stylesheet" href="<%= BASE_URL %>static/css/style.css">
-  <link rel="stylesheet" href="<%= BASE_URL %>static/css/tsa.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>static/css/tsa2.css">
   <title>Sello de Tiempo - Blockchain Federal Argentina</title>
 </head>
 
@@ -28,7 +28,7 @@
   </nav>
   <main>
     <div class="container">
-      <div class="tsa">
+      <div class="tsa2">
         <h1>Sello de Tiempo</h1>
         <p>El servicio de Sello de Tiempo de BFA permite demostrar que el contenido de cualquier documento digital existió en un momento y que desde entonces, no ha cambiado. Al sellar un archivo, cualquiera podrá verificar el día y la hora en que su hash fue almacenado en Blockchain Federal Argentina. Tené en cuenta que el documento seleccionado nunca se sube a la red, garantizando su privacidad.</p> 
         <p class="font_small"><a href="https://bfa.ar/sello">Si tenés un archivo con Recibo Digital (.rd) verificalo aquí</a></p>

ui/public/static/css/tsa.css → ui/public/static/css/tsa2.css

-.tsa .dropArea {
+#app{
+    margin-bottom: 20px;
+}
+.tsa2 .dropArea {
     border: 1px dashed #0094D4;
     background-color: #ffffff;
     padding: 50px;
@@ -7,40 +10,52 @@
     border-radius: 5px;
     /* transition: 0.3s; */
     position: relative;
-    margin-bottom: 20px;
+}
+.tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
+    background-color: #fff;
+    color: #0094d4;
+    border-color: #0094d4;
+}
+
+.tsa2 .btn-success:active, .tsa2 .btn-success:active:hover, .tsa2 .btn-success:focus, .tsa2 .btn-success:hover {
+    background-color: #fff;
+    color: #4cae4c;
+    border-color: #4cae4c;
 }
 
-.tsa .btn-pill {
+.tsa2 .btn-pill {
     border-radius: 50px;
+    border-width: 2px;
+    font-weight: 400;
 }
 
 
-.tsa .hash {
+.tsa2 .hash {
     word-wrap: break-word;
 }
 
-.tsa .dropArea p {
+.tsa2 .dropArea p {
     margin-bottom: 5px;
 }
 
-.tsa .dropArea:hover {
+.tsa2 .dropArea:hover {
     border-style: solid;
     background: rgba(0, 148, 212, 0.05);
 }
 
 
-.tsa .dropArea .droptxt {
+.tsa2 .dropArea .droptxt {
     font-size: 1.2em;
     margin-bottom: 10px;
 }
 
-.tsa .dropArea .glyphicon-cloud-upload {
+.tsa2 .dropArea .glyphicon-cloud-upload {
     font-size: 8em;
     margin-bottom: 40px;
     color: #ccc;
 }
 
-.tsa .overlay {
+.tsa2 .overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -51,7 +66,7 @@
     background: rgba(0, 148, 212, 0.10);
     
 }
- .tsa .pulse{
+ .tsa2 .pulse{
     -webkit-animation: pulse 1s infinite ease-in-out;
     -o-animation: pulse 1s infinite ease-in-out;
     -ms-animation: pulse 1s infinite ease-in-out; 
@@ -59,7 +74,7 @@
     animation: pulse 1s infinite ease-in-out;
  }
 
-.tsa .loading {
+.tsa2 .loading {
     background-color: rgba(0, 148, 212, 0.75);
     text-align: center;
     -webkit-border-radius: 5px;
@@ -78,31 +93,31 @@
     }
 }
 @media screen and (max-width: 768px) {
-    .tsa .dropArea .glyphicon-cloud-upload {
+    .tsa2 .dropArea .glyphicon-cloud-upload {
         font-size: 4em;
         margin-bottom: 20px;
     }
 
-    .tsa .dropArea {
+    .tsa2 .dropArea {
         padding: 20px;
     }
 }
 
-.tsa [hidden]{
+.tsa2 [hidden]{
     display: none !important;
 }
 
-.tsa .btn-lg {
+.tsa2 .btn-lg {
     min-width: 150px;
     margin: 0 5px;
     margin-top: 20px;
 }
-.tsa .alert   {
+.tsa2 .alert   {
     margin-top: 15px;
     text-align: left;
 }
 
-.tsa .alert p{
+.tsa2 .alert p{
     margin-bottom: 0;
 }
 .drop-file {
@@ -111,23 +126,23 @@
 }
 
 
-.tsa .center-v {
+.tsa2 .center-v {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }
 
 @media screen and (max-width: 992px) {
-    .tsa h3 {
+    .tsa2 h3 {
         margin-top: 30px;
     }
 
-    .tsa .nav-tabs {
+    .tsa2 .nav-tabs {
         font-size: 1.3em;
     }
 }
 @media screen and (max-width: 1200px) {
-    .tsa .dropArea .droptxt {
+    .tsa2 .dropArea .droptxt {
         font-size: 1em;
         margin-bottom: 15px;
     }

ui/src/components/DropFile.vue

@@ -4,7 +4,23 @@
     
         <div id="dropzone" class="overlay pulse" style="visibility: hidden;"></div>
         <div class="loading overlay" v-if="loading">
-            <img class="center-v" src="/static/images/loader.svg" width="100px" height="100px" alt="Cargando">
+            <svg aria-label="Cargando" class="center-v" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+                <path opacity="0.4" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+                s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+                c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
+                <path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+                C22.32,8.481,24.301,9.057,26.013,10.047z">
+                <animateTransform attributeType="xml"
+                attributeName="transform"
+                type="rotate"
+                from="0 20 20"
+                to="360 20 20"
+                dur="0.5s"
+                repeatCount="indefinite"/>
+                </path>
+            </svg>
+            <!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> -->
         </div>
         <div>
             <div v-if="uploadedFiles.length == 0">