Updated styles

Author: iuliacimpeanu

src/components/functional/sign-transactions-panel/sign-transactions-panel.scss

@@ -1,153 +1,37 @@
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  align-self: stretch;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  min-width: 0;
-  padding: 24px 24px 12px 24px;
-}
-
-.frame {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  width: 30px;
-  height: 30px;
-  padding: 0 0 0 0;
-}
-
-.frame-1 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0;
-  gap: 4px;
-  position: relative;
-}
-
-.frame-2 {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  width: 30px;
-}
-
-.mx-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  width: 30px;
-  height: 30px;
-}
-
-.transaction-navigation {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  align-self: stretch;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  gap: 10px;
-  position: relative;
-  min-width: 0;
-  padding: 0 24px 0 24px;
-}
-
-.navigation-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  width: 25px;
-  height: 25px;
-}
-
-.sign-transaction-content {
-  @apply mvx:flex mvx:flex-col mvx:items-center mvx:gap-2 mvx:relative mvx:min-w-0 mvx:self-stretch mvx:flex-nowrap mvx:shrink-0;
-
-  .sign-transactions-tabs {
-    @apply mvx:px-4 mvx:gap-2 mvx:flex mvx:mr-auto;
-
-    .sign-transactions-tab {
-      @apply mvx:px-4 mvx:h-8 mvx:flex mvx:items-center mvx:leading-none mvx:justify-center mvx:transition-all mvx:duration-200;
-      @apply mvx:ease-in-out mvx:cursor-pointer mvx:relative mvx:rounded-3xl;
-      color: var(--mvx-text-color-secondary);
-
-      &:hover,
-      &.active {
-        color: var(--mvx-text-accent-color);
-        background-color: var(--mvx-bg-color-secondary);
-      }
-
-      .sign-transactions-tab-text {
-        @apply mvx:text-base mvx:z-1 mvx:relative mvx:capitalize;
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .main-container {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-.sign-transactions-panel {
-  @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:pb-6;
-}
-
-// Trim component base styles
+// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes.
 .trim {
-  @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap;
+    @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap;
 }
 
 .trim-full {
-  @apply mvx:text-transparent mvx:absolute mvx:leading-5;
+    @apply mvx:text-transparent mvx:absolute mvx:leading-5;
 }
 
 .trim-full-visible {
-  @apply mvx:text-inherit mvx:relative mvx:leading-5;
+    @apply mvx:text-inherit mvx:relative mvx:leading-5;
 }
 
 .trim-wrapper {
-  @apply mvx:hidden;
+    @apply mvx:hidden;
 }
 
 .trim-wrapper-visible {
-  @apply mvx:overflow-hidden mvx:max-w-full mvx:flex;
+    @apply mvx:overflow-hidden mvx:max-w-full mvx:flex;
 }
 
 .trim-left-wrapper {
-  @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px];
+    @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px];
 }
 
 .trim-left {
-  @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5;
+    @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5;
 }
 
 .trim-right-wrapper {
-  @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px];
-  direction: rtl;
+    @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px];
+    direction: rtl;
 }
 
 .trim-right {
-  @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip;
+    @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip;
 }

src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts

@@ -0,0 +1,18 @@
+// prettier-ignore
+export default {
+    signTransactionContent: 'sign-transaction-content mvx:flex mvx:flex-col mvx:items-center mvx:gap-2 mvx:relative mvx:min-w-0 mvx:self-stretch mvx:flex-nowrap mvx:shrink-0',
+    signTransactionsTabs: 'sign-transactions-tabs mvx:px-4 mvx:gap-2 mvx:flex mvx:mr-auto',
+    signTransactionsTab: 'sign-transactions-tab mvx:px-4 mvx:h-8 mvx:flex mvx:items-center mvx:leading-none mvx:justify-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:cursor-pointer mvx:relative mvx:rounded-3xl mvx:text-secondary-text mvx:hover:text-accent mvx:hover:bg-secondary mvx:active:text-accent mvx:active:bg-secondary',
+    signTransactionsTabActive: 'sign-transactions-tab-active mvx:text-accent mvx:bg-secondary',
+    signTransactionsTabText: 'sign-transactions-tab-text mvx:text-base mvx:z-1 mvx:relative mvx:capitalize',
+    signTransactionsPanel: 'sign-transactions-panel mvx:flex mvx:flex-col mvx:flex-1 mvx:pb-6',
+    button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2',
+    buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6',
+    buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl',
+    buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary',
+    buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary',
+    buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl',
+    buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75',
+    buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100',
+    tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]',
+} satisfies Record<string, string>;

src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx

@@ -14,19 +14,7 @@ import { SignTransactionsOverview } from './components/SignTransactionsOverview/
 import { SignTransactionsAdvanced } from './components/SignTransactionsAdvanced/SignTransactionsAdvanced';
 import { SignTransactionsHeader } from './components/SignTransactionsHeader/SignTransactionsHeader';
 
-// prettier-ignore
-const styles = {
-  button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2',
-  buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6',
-  buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl',
-  buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary',
-  buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary',
-  buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl',
-  buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75',
-  buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100',
-  // tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]',
-  // signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5',
-} satisfies Record<string, string>;
+import styles from './sign-transactions-panel.styles';
 
 @Component({
   tag: 'mvx-sign-transactions-panel',
@@ -155,7 +143,6 @@ export class SignTransactionsPanel {
   };
 
   render() {
-    console.log(styles) //TODO: remove this
     const transactionTabs = Object.values(TransactionTabsEnum);
 
     const { commonData, onBack, onNext } = state;
@@ -168,7 +155,7 @@ export class SignTransactionsPanel {
         panelTitle="Confirm Transaction"
         hasBackButton={false}
       >
-        <div class="sign-transactions-panel" data-testid={DataTestIdsEnum.signTransactionsPanel}>
+        <div class={styles.signTransactionsPanel} data-testid={DataTestIdsEnum.signTransactionsPanel}>
           <SignTransactionsHeader
             onBack={onBack}
             onNext={onNext}
@@ -178,15 +165,15 @@ export class SignTransactionsPanel {
             showFavicon={this.showFavicon}
           />
 
-          <div class="sign-transaction-content">
-            <div class="sign-transactions-tabs">
+          <div class={styles.signTransactionContent}>
+            <div class={styles.signTransactionsTabs}>
               {transactionTabs.map(transactionTab => (
                 <div
-                  class={{ 'sign-transactions-tab': true, 'active': transactionTab === this.activeTab }}
+                  class={{ [styles.signTransactionsTab]: true, [styles.signTransactionsTabActive]: transactionTab === this.activeTab }}
                   data-testid={`${DataTestIdsEnum.signTransactionsTab}-${transactionTab.toLowerCase()}`}
                   onClick={() => this.setActiveTab(transactionTab)}
                 >
-                  <div class="sign-transactions-tab-text" data-testid={DataTestIdsEnum.signTransactionsTabText}>
+                  <div class={styles.signTransactionsTabText} data-testid={DataTestIdsEnum.signTransactionsTabText}>
                     {transactionTab}
                   </div>
                 </div>
@@ -220,7 +207,7 @@ export class SignTransactionsPanel {
             handleCopyButtonClick={this.handleCopyButtonClick}
           />
         </div>
-      </mvx-side-panel>
+      </mvx-side-panel >
     );
   }
 }