Merge pull request #265 from terra-money/ST-999

made message text overflow into an ellipsis
terra-money · Jan 9, 2024 · b0161c2 · b0161c2
2 parents ff1d62e + bcf501d
commit b0161c2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/src/extension/components/OriginCard.module.scss b/src/extension/components/OriginCard.module.scss
@@ -1,4 +1,5 @@
 @import "mixins";
+@import "font_mixins";
 
 .origin {
   display: flex;
@@ -7,21 +8,16 @@
   justify-content: center;
 
   padding-top: 24px;
-  padding-bottom: 24px;
+  padding-bottom: 32px;
   text-align: center;
 
   h2 {
-    margin-top: 16px;
-
-    color: white;
-    font-size: 24px;
-    font-weight: 600;
+    @include Large;
+    color: var(--token-light-white);
   }
 
   p {
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 12px;
+    @include X-Small;
     color: var(--token-primary-600);
   }
 }

diff --git a/src/extension/components/OriginCard.tsx b/src/extension/components/OriginCard.tsx
@@ -1,5 +1,6 @@
 import axios from "axios"
 import { useEffect, useState } from "react"
+import { FlexColumn, Grid } from "@terra-money/station-ui"
 import styles from "./OriginCard.module.scss"
 
 interface Props {
@@ -62,16 +63,20 @@ const OriginCard = ({ hostname }: Props) => {
 
   return (
     <div className={styles.origin}>
-      {metadata.faviconUrl && (
-        <img
-          src={metadata.faviconUrl}
-          alt={metadata.title ?? baseUrl}
-          className={styles.icon}
-          onError={() => setMetadata((m) => ({ ...m, faviconUrl: undefined }))}
-        />
-      )}
-      <h2>{metadata.title ?? baseUrl}</h2>
-      <p>{baseUrl}</p>
+      <FlexColumn gap={16} justify="center">
+        {metadata.faviconUrl && (
+          <img
+            src={metadata.faviconUrl}
+            alt={metadata.title ?? baseUrl}
+            className={styles.icon}
+            onError={() => setMetadata((m) => ({ ...m, faviconUrl: undefined }))}
+          />
+        )}
+        <Grid gap={8}>
+          <h2>{metadata.title ?? baseUrl}</h2>
+          <p>{baseUrl}</p>
+        </Grid>
+      </FlexColumn>
     </div>
   )
 }

diff --git a/src/extension/modules/Message.module.scss b/src/extension/modules/Message.module.scss
@@ -1,4 +1,5 @@
 @import "mixins";
+@import "font_mixins";
 
 .component {
   background: var(--token-dark-300);
@@ -27,8 +28,16 @@
 .icon__container {
   @include flex(flex-start);
   gap: 16px;
+  max-width: 92%;
+
   .icon {
     color: var(--token-light-100);
+    min-width: 18px;
+  }
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
@@ -44,17 +53,31 @@
   padding: 16px 0;
   //max-height: 280px;
   //overflow-y: scroll;
+
+  .summary__display {
+    @include MediumLH;
+    margin: 8px 24px 16px 24px;
+    padding-bottom: 24px;
+    border-bottom: 1px dashed var(--token-dark-900, #5E616E);
+  }
 }
 
 .detail {
   padding: 8px 24px;
   font-size: 14px;
   font-weight: 500;
+  @include SmallLH;
+
+  h3 {
+    @include SmallLH;
+    color: var(--token-light-white);
+  }
 }
 
 .value {
   overflow-x: auto;
   max-width: 100%;
+  overflow-wrap: break-word;
   color: var(--token-light-100);
 }
 

diff --git a/src/extension/modules/Message.tsx b/src/extension/modules/Message.tsx
@@ -49,6 +49,9 @@ const Message = ({ msg }: { msg: Msg; warn: boolean }) => {
 
       {!collapsed && (
         <section className={styles.content}>
+          <div className={styles.summary__display}>
+            <TxMessage>{summary}</TxMessage>
+          </div>
           {[
             ["type", type],
             ...Object.entries(
@@ -57,7 +60,7 @@ const Message = ({ msg }: { msg: Msg; warn: boolean }) => {
           ].map(([key, value]) => {
             return (
               <article className={styles.detail} key={key}>
-                <h1>{key}</h1>
+                <h3>{key}</h3>
                 <section className={styles.value}>{renderValue(value)}</section>
               </article>
             )

diff --git a/src/extension/modules/TxDetails.tsx b/src/extension/modules/TxDetails.tsx
@@ -24,11 +24,13 @@ const TxDetails = ({
   ]
 
   return (
-    <Grid gap={12}>
-      {msgs.map((msg, index) => {
-        const isNative = getIsNativeMsgFromExternal(origin)
-        return <Message msg={msg} warn={isNative(msg)} key={index} />
-      })}
+    <Grid gap={24}>
+      <Grid gap={8}>
+        {msgs.map((msg, index) => {
+          const isNative = getIsNativeMsgFromExternal(origin)
+          return <Message msg={msg} warn={isNative(msg)} key={index} />
+        })}
+      </Grid>
 
       <DisplayFees
         chainID={chainID}