[Glitch] Change floating action button to be a button in header in web UI

Port 1fd6460b02d2e73c94e7c6b1fa8fdc4d2ae36241 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

3 files changed, 2 insertions, 37 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 4e912b18b..00519adf1 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -541,6 +541,7 @@
     &__buttons {
       display: flex;
       align-items: center;
+      gap: 8px;
       padding-top: 55px;
       overflow: hidden;
 
@@ -550,14 +551,6 @@
         box-sizing: content-box;
         padding: 2px;
       }
-
-      & > .icon-button {
-        margin-right: 8px;
-      }
-
-      .button {
-        margin: 0 8px;
-      }
     }
 
     &__name {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 5de8547e9..c61815e07 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -674,6 +674,7 @@ $ui-header-height: 55px;
   cursor: default;
 
   &__image {
+    width: 70%;
     max-width: 350px;
     margin-top: -50px;
   }
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 1725a5480..1f1d7d68d 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -222,30 +222,6 @@
   }
 }
 
-.floating-action-button {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.9375rem;
-  height: 3.9375rem;
-  bottom: 1.3125rem;
-  right: 1.3125rem;
-  background: darken($ui-highlight-color, 2%);
-  color: $white;
-  border-radius: 50%;
-  font-size: 21px;
-  line-height: 21px;
-  text-decoration: none;
-  box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: $ui-highlight-color;
-  }
-}
-
 @media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     width: 100%;
@@ -260,7 +236,6 @@
     margin-bottom: 10px;
   }
 
-  .floating-action-button,
   .tabs-bar__link.optional {
     display: none;
   }
@@ -277,10 +252,6 @@
 @media screen and (max-width: $no-gap-breakpoint - 1px) {
   $sidebar-width: 285px;
 
-  .with-fab .scrollable .item-list:last-child {
-    padding-bottom: 5.25rem;
-  }
-
   .columns-area__panels__main {
     width: calc(100% - $sidebar-width);
   }