Refactor torrent-or-magnet divider in video import

3 files changed, 28 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 6d59ed834..3b46475b4 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,11 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    margin: 10px 0;
+    @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor));
+    
+    &[data-content] {
+      margin: 1.5rem 0;
+    }
   }
 
   .form-group-magnet-uri {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index 95baa3d0a..a4f87b0b8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -2,7 +2,6 @@
 @import 'mixins';
 
 .first-step-block {
-
   .form-group-channel {
     margin-bottom: 20px;
     margin-top: 35px;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 76e3f3f97..d414704e9 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -774,3 +774,26 @@
     }
   }
 }
+
+@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) {
+  width: 95%;
+  border-top: .05rem solid $color;
+  height: .05rem;
+  text-align: center;
+  display: block;
+  position: relative;
+
+  &[data-content] {
+    margin: .8rem 0;
+
+    &::after {
+      background: $background;
+      color: $color;
+      content: attr(data-content);
+      display: inline-block;
+      font-size: .7rem;
+      padding: 0 .4rem;
+      transform: translateY(-.65rem);
+    }
+  }
+}