From a1097daef1cde4f1bc70f8772f41cbbd3c020a6c Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 4 Feb 2020 20:35:04 +0100
Subject: [PATCH] Small UI fixes for focus point.

---
 .../components/assets/image-focus-point.component.html    | 8 ++++----
 .../components/assets/image-focus-point.component.scss    | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/app/shared/components/assets/image-focus-point.component.html b/frontend/app/shared/components/assets/image-focus-point.component.html
index 6147ea7f4..87778e5cc 100644
--- a/frontend/app/shared/components/assets/image-focus-point.component.html
+++ b/frontend/app/shared/components/assets/image-focus-point.component.html
@@ -3,7 +3,7 @@
         <Label>Select position of focus point</Label>
 
         <div class="image">
-            <div class="image-container absolute align-items-center">
+            <div class="image-container absolute align-items-center justify-content-center">
                 <div>
                     <img #image [src]="imageSource" />
                 </div>
@@ -13,15 +13,15 @@
     <div class="col-7">
         <Label>Preview for different sizes</Label>
 
-        <div class="preview-wide">
+        <div class="preview preview-wide">
             <img #previewWide [src]="imageSource" />
         </div>
 
         <div class="preview-line2">
-            <div class="preview-small absolute">
+            <div class="preview preview-small absolute">
                 <img #previewSmall [src]="imageSource" />
             </div>
-            <div class="preview-normal absolute">
+            <div class="preview preview-normal absolute">
                 <img #previewNormal [src]="imageSource" />
             </div>
         </div>
diff --git a/frontend/app/shared/components/assets/image-focus-point.component.scss b/frontend/app/shared/components/assets/image-focus-point.component.scss
index c2acde28b..1d8f8e145 100644
--- a/frontend/app/shared/components/assets/image-focus-point.component.scss
+++ b/frontend/app/shared/components/assets/image-focus-point.component.scss
@@ -11,6 +11,10 @@
 }
 
 .preview {
+    & {
+        border: 1px solid $color-border;
+    }
+
     &-wide {
         padding-top: 20%;
     }