Profile tweaks and fixes (#278)

* output emoji beside name

* spacing tweaks, fix tooltip arrow

src/components/atoms/Publisher/ProfileDetails.module.css

@@ -7,7 +7,8 @@
 
 @media (min-width: 40rem) {
   .profile {
-    margin: calc(var(--spacer) / 4);
+    margin: calc(var(--spacer) / 8);
+    margin-bottom: calc(var(--spacer) / 4);
   }
 }
 

src/components/atoms/Publisher/index.tsx

@@ -41,8 +41,8 @@ export default function Publisher({
       if (!profile) return
 
       setProfile(profile)
-      const { name } = profile
-      name && setName(name)
+      const { name, emoji } = profile
+      name && setName(`${emoji || ''} ${name}`)
     }
     get3Box()
 

src/components/atoms/Tooltip.module.css

@@ -43,7 +43,7 @@
 }
 
 .content[data-placement*='left'] > .arrow {
-  right: -4px;
+  right: 6px;
 }
 
 .content[data-placement*='right'] > .arrow {

src/components/molecules/AssetTeaser.module.css

@@ -1,5 +1,5 @@
 .teaser {
-  max-width: 50rem;
+  max-width: 40rem;
   height: 100%;
 }
 
@@ -29,15 +29,13 @@
 }
 
 .title {
-  line-height: 1.3 !important;
   font-size: var(--font-size-large);
-  margin-top: calc(var(--spacer) / 12);
-  margin-bottom: 0;
+  margin: 0;
+  padding-bottom: calc(var(--spacer) / 6);
 }
 
-.partner {
-  font-size: var(--font-size-small);
-  margin-top: calc(var(--spacer) / 8);
+.publisher {
+  display: block;
 }
 
 .foot {

src/components/molecules/AssetTeaser.tsx

@@ -23,15 +23,17 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
   return (
     <article className={styles.teaser}>
       <Link to={`/asset/${ddo.id}`} className={styles.link}>
-        <Tooltip
-          placement="left"
-          content={dataTokenInfo?.name}
-          className={styles.symbol}
-        >
-          {dataTokenInfo?.symbol}
-        </Tooltip>
-        <h1 className={styles.title}>{name}</h1>
-        <Publisher account={owner} minimal />
+        <header className={styles.header}>
+          <Tooltip
+            placement="left"
+            content={dataTokenInfo?.name}
+            className={styles.symbol}
+          >
+            {dataTokenInfo?.symbol}
+          </Tooltip>
+          <h1 className={styles.title}>{name}</h1>
+          <Publisher account={owner} minimal className={styles.publisher} />
+        </header>
         {isCompute && <div className={styles.accessLabel}>Compute</div>}
 
         <div className={styles.content}>