CSS cleanup

frontend/app/features/administration/pages/restore/restore-page.component.scss

@@ -8,10 +8,6 @@ h3 {
     margin-bottom: .8rem;
 }
 
-.container {
-    padding-top: 2rem;
-}
-
 .card {
     &-header {
         h3 {
@@ -35,18 +31,13 @@ h3 {
 .restore {
     &-status {
         & {
-            @include circle($circle-size);
+            @include circle-icon($circle-size);
             background: $color-border;
-            color: $color-dark-foreground;
-            font-size: .6 * $circle-size;
-            font-weight: normal;
-            line-height: $circle-size + .1rem;
-            text-align: center;
-            vertical-align: middle;
         }
 
-        &-pending {
+        &-failed,
-            color: inherit;
+        &-success {
+            color: $color-dark-foreground;
         }
 
         &-failed {
@@ -60,6 +51,6 @@ h3 {
 
     &-url {
         @include truncate;
-        line-height: 30px;
+        line-height: $circle-size;
     }
 }

frontend/app/features/api/api-area.component.scss

@@ -5,5 +5,5 @@
 }
 
 .icon-angle-right {
-    @include absolute(14px, 2rem);
+    @include absolute(14px, 1.5rem);
 }

frontend/app/features/apps/pages/apps-page.component.scss

@@ -18,10 +18,6 @@
         width: 20rem;
     }
 
-    &-lg {
-        width: 33rem;
-    }
-
     &-links {
         margin-top: .5rem;
     }

frontend/app/features/settings/pages/clients/client-connect-form.component.scss

@@ -34,12 +34,4 @@
         font-size: 1.8rem;
         font-weight: 300;
     }
-}
-
-.access-token {
-    font-family: monospace;
-    font-size: 1rem;
-    font-weight: normal;
-    height: 10rem;
-    resize: none;
 }

frontend/app/framework/angular/status-icon.component.scss

@@ -1,29 +1,17 @@
-$circle-size-sm: 1.6rem;
-
-$circle-size-lg: 2.8rem;
-
 .status {
     & {
         background: $color-border;
         border: 0;
         color: $color-dark-foreground;
         display: inline-block;
-        text-align: center;
-        vertical-align: middle;
     }
 
     &.sm {
-        @include circle($circle-size-sm);
+        @include circle-icon(1.6rem);
-        font-size: .5 * $circle-size-sm;
-        font-weight: normal;
-        line-height: $circle-size-sm + .1rem;
     }
 
     &.lg {
-        @include circle($circle-size-lg);
+        @include circle-icon(2.8rem);
-        font-size: .5 * $circle-size-lg;
-        font-weight: normal;
-        line-height: $circle-size-lg + .1rem;
     }
 
     &-pending {

frontend/app/shared/components/assets/asset-uploader.component.scss

@@ -48,18 +48,16 @@ $circle-size: 1.6rem;
 
 .upload-status {
     & {
-        @include circle($circle-size);
+        @include circle-icon(1.6rem);
-        background: $color-border;
-        color: $color-dark-foreground;
-        cursor: none;
-        font-size: .4 * $circle-size;
-        font-weight: normal;
-        line-height: $circle-size + .1rem;
-        text-align: center;
     }
 
     &-running {
-        color: inherit;
+        background: $color-border;
+    }
+
+    &-failed,
+    &-success {
+        color: $color-dark-foreground;
     }
 
     &-failed {

frontend/app/theme/_mixins.scss

@@ -130,6 +130,15 @@
     display: inline-block;
 }
 
+@mixin circle-icon($size) {
+    @include circle($size);
+    cursor: none;
+    font-size: .5 * $size;
+    font-weight: normal;
+    line-height: $size + .1rem;
+    text-align: center;
+}
+
 @mixin placeholder-color($color) {
     ::placeholder {
         color: $color;