From 640891ded9f1f0c16a41062d1bb8c7cf15146e58 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 20 Sep 2021 21:56:06 -0500
Subject: [PATCH] Style the floating action button

---
 app/soapbox/features/ui/index.js |  2 +-
 app/styles/ui.scss               | 23 +++++++++--------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 256863939..d229b9f2f 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -637,7 +637,7 @@ class UI extends React.PureComponent {
         className='floating-action-button'
         aria-label={intl.formatMessage(messages.publish)}
       >
-        <Icon id='pencil' fixedWidth />
+        <Icon src={require('@tabler/icons/icons/pencil.svg')} fixedWidth />
       </button>
     );
 
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 3ca2d64dd..1db02bc33 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -356,13 +356,12 @@
   position: fixed;
   bottom: 64px;
   right: 14px;
-  width: 61px;
-  height: 61px;
+  width: 58px;
+  height: 58px;
   background-color: var(--brand-color);
   color: white;
   border: 0;
-  border-radius: 999px;
-  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
   font-size: 30px;
   align-items: center;
   justify-content: center;
@@ -378,17 +377,13 @@
     background-color: var(--brand-color--hicontrast);
   }
 
-  i.fa {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    margin: 0;
-  }
-
   .svg-icon {
-    width: 26px;
-    height: 26px;
+    width: 40px;
+    height: 40px;
+
+    svg {
+      stroke-width: 1px;
+    }
   }
 }