Move alert into to pt-alert-primary

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-library / my-history / my-history.component.scss

diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 9eeeaf310b612aa9fbeb50225a27e0733a7c3ce4..3257b2215379577db6ec3d23bd8f00fbb501f67c 100644 (file)
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .no-history {
   display: flex;
@@ -10,17 +10,31 @@
 }
 
 .top-buttons {
-  margin-bottom: 20px;
-  display: flex;
+  margin-bottom: 30px;
+  display: grid;
+  grid-template-columns: 250px 1fr auto auto;
   align-items: center;
-  flex-wrap: wrap;
+
+  .search-wrapper {
+    grid-column: 1;
+
+    input {
+      @include peertube-input-text(250px);
+    }
+  }
 
   .history-switch {
+    @include margin-left(auto);
+    @include margin-right(15px);
+
+    grid-column: 3;
     display: flex;
-    flex-grow: 1;
 
     label {
       margin: 0 0 0 5px;
+      color: var(--greyForegroundColor);
+      font-size: 15px;
+      font-weight: $font-semibold;
     }
   }
 
@@ -29,31 +43,39 @@
     @include grey-button;
     @include button-with-icon;
 
+    grid-column: 4;
+
     font-size: 15px;
   }
 }
 
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
+}
 
-  .my-video-miniature {
-    flex-grow: 1;
-  }
+.action-button {
+  display: flex;
+  align-self: flex-end;
 }
 
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
   .top-buttons {
-    .history-switch label, .delete-history {
-      @include ellipsis;
-    }
+    grid-template-columns: auto 1fr auto;
+    row-gap: 20px;
 
-    .history-switch label {
-      width: 60%;
+    .history-switch {
+      grid-row: 1;
+      grid-column: 1;
+      margin: 0;
     }
 
     .delete-history {
-      margin-left: auto;
-      max-width: 32%;
+      grid-row: 1;
+      grid-column: 3;
+    }
+
+    .search-wrapper {
+      grid-column: 1 / 4;
     }
   }
 }