refactoring and additions

resources/css/app.scss

@@ -64,6 +64,7 @@ label {
 
 p {
     line-height: 1.5rem;
+    margin-top: 0;
 }
 
 input,
@@ -165,79 +166,6 @@ button {
     }
 }
 
-.dialog {
-    flex-direction: column;
-    margin: 0 auto;
-    flex: 1;
-    background-color: #eee;
-    padding: map-get($spacer, 2) map-get($spacer, 5) map-get($spacer, 4)
-        map-get($spacer, 5);
-    border: 1px solid #eee;
-    border-radius: 24px;
-    overflow: hidden;
-    min-width: map-get($spacer, 5) * 12;
-
-    &.dialog-narrow {
-        min-width: auto;
-        max-width: map-get($spacer, 5) * 10;
-    }
-
-    &.dialog-full {
-        width: 100%;
-    }
-
-    .dialog-loading-cover {
-        position: fixed;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        backdrop-filter: blur(14px);
-        -webkit-backdrop-filter: blur(4px);
-        background-color: rgba(255, 255, 255, 0.5);
-
-        .dialog-loading {
-            display: flex;
-            flex-direction: column;
-            padding: map-get($spacer, 5) calc(map-get($spacer, 5) * 2);
-
-            border: 1px solid transparent;
-            border-radius: 24px;
-
-            svg {
-                font-size: calc(map-get($spacer, 5) * 1.5);
-            }
-
-            span {
-                font-size: map-get($spacer, 4);
-                padding-top: map-get($spacer, 3);
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 640px) {
-    .dialog {
-        padding: map-get($spacer, 1) map-get($spacer, 3) map-get($spacer, 3)
-            map-get($spacer, 3);
-        min-width: auto;
-
-        .button {
-            display: block;
-            width: 100%;
-            text-align: center;
-
-            margin-top: map-get($spacer, 1);
-            margin-bottom: map-get($spacer, 1);
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-    }
-}
-
 /* Loader */
 .loader-cover {
     position: fixed;

resources/css/utils.scss

@@ -177,6 +177,19 @@
     text-align: center !important;
 }
 
+/* Text Size */
+.font-size-100 {
+    font-size: 100%;
+}
+
+.font-size-90 {
+    font-size: 90%;
+}
+
+.font-size-80 {
+    font-size: 80%;
+}
+
 /* Utility */
 .prevent-select {
     -webkit-user-select: none;