UI fixes (#318)

resolves #306

packages/app/src/Element/Reactions.tsx

@@ -6,6 +6,7 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { TaggedRawEvent } from "@snort/nostr";
 
 import { formatShort } from "Number";
+import Repost from "Icons/Repost";
 import Dislike from "Icons/Dislike";
 import Heart from "Icons/Heart";
 import ZapIcon from "Icons/Zap";
@@ -119,7 +120,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
               return (
                 <div key={ev.id} className="reactions-item">
                   <div className="reaction-icon">
-                    <Heart width={20} height={18} />
+                    <Repost width={16} height={16} />
                   </div>
                   <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>

packages/app/src/Element/Text.css

@@ -1,12 +1,15 @@
 .text {
   font-size: var(--font-size);
   line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .text a {
   color: var(--highlight);
   text-decoration: none;
 }
+
 .text a:hover {
   text-decoration: underline;
 }

packages/app/src/Pages/ProfilePage.css

@@ -244,28 +244,6 @@
   margin-left: 4px;
 }
 
-.banner-bg {
-  width: 1438px;
-  height: 758px;
-  position: absolute;
-  top: -120px;
-  left: calc(50% - 750px);
-  background: radial-gradient(circle at top center, rgba(0, 0, 0, 0.7) 0%, #000000 81.25%), var(--img-url);
-  filter: blur(10px);
-  z-index: -1;
-  display: none;
-}
-
-.light .banner-bg {
-  background: radial-gradient(circle at top center, rgba(241, 241, 241, 0.7) 0%, var(--bg-color) 81.25%), var(--img-url);
-}
-
-@media (min-width: 1420px) {
-  .banner-bg {
-    display: unset;
-  }
-}
-
 .zaps-total {
   text-align: right;
   padding-right: 12px;

packages/app/src/Pages/ProfilePage.tsx

@@ -316,7 +316,6 @@ export default function ProfilePage() {
   return (
     <>
       <div className="profile flex">
-        {user?.banner && <div className="banner-bg" style={bannerStyle} />}
         {user?.banner && <ProxyImg alt="banner" className="banner" src={user.banner} size={w} />}
         <div className="profile-wrapper flex">
           {avatar()}