From fc30a74cd1343d7b797af015e4608f5a0db5eb27 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Tue, 1 Feb 2022 17:21:28 -0300
Subject: [PATCH] Improve fileActions Buttons style on mobile view

- Move label to bottom instead of to the side
- Decrease font, sizes and spacings
- Make sure all fit in a single line even on smallest screen size
---
 ui/component/fileActions/view.jsx |  2 +-
 ui/scss/component/_button.scss    |  4 ++++
 ui/scss/component/_card.scss      |  2 +-
 ui/scss/component/_media.scss     | 32 +++++++++++++++++++++++++++----
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx
index adf0eee1c..457b83516 100644
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@@ -171,7 +171,7 @@ export default function FileActions(props: Props) {
       {(!isLivestreamClaim || !claimIsMine || isMobile) && (
         <Menu>
           <MenuButton
-            className="button--file-action"
+            className="button--file-action--menu"
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 2e5adde67..84a6cbbf4 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -314,6 +314,10 @@
   }
 }
 
+.button--file-action--menu {
+  @extend .button--file-action;
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index fd9bbfb12..20132f93b 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -312,7 +312,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-l);
+    padding: 0 !important;
   }
 }
 
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 06bd1c822..7ec11ef6d 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -118,11 +118,35 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding-top: var(--spacing-s);
+    justify-content: space-around !important;
+    margin: 0;
+    padding: 0;
 
-    > * {
-      margin-right: var(--spacing-s);
-      margin-bottom: var(--spacing-s);
+    div {
+      margin: 0 !important;
+    }
+
+    .button--file-action {
+      margin: 0 !important;
+      padding: var(--spacing-xxs);
+      width: 3.1rem;
+      height: 3.1rem;
+
+      .button__content {
+        flex-direction: column;
+        justify-content: space-between;
+
+        .button__label {
+          margin: 0;
+          margin-top: var(--spacing-xxs);
+          font-size: var(--font-xxsmall);
+        }
+      }
+    }
+
+    .button--file-action--menu {
+      width: unset;
+      height: 2rem;
     }
   }
 }