feat: wallet connect modal styling updates

src/popup/components/Header.vue

@@ -58,8 +58,8 @@
                 key="btn-wallet-connect"
                 data-cy="btn-wallet-connect"
                 :icon="WalletConnectLogo"
-                :icon-variant="(wcSession) ? 'success' : 'default'"
-                :dimmed="!wcSession"
+                :icon-variant="(isOnline && wcSession) ? 'success' : 'default'"
+                :dimmed="!isOnline || !wcSession"
                 @click="openWalletConnectModal()"
               />
 
@@ -108,6 +108,7 @@ import {
 } from '@/popup/router/routeNames';
 import {
   useAccounts,
+  useConnection,
   useModals,
   useUi,
   useWalletConnect,
@@ -145,6 +146,7 @@ export default defineComponent({
     const { t } = useI18n();
 
     const { homeRouteName } = useUi();
+    const { isOnline } = useConnection();
     const { isLoggedIn } = useAccounts();
     const { openModal } = useModals();
     const { wcSession } = useWalletConnect();
@@ -245,6 +247,7 @@ export default defineComponent({
       isLoggedIn,
       showHeaderNavigation,
       isLogoDisabled,
+      isOnline,
       titleTruncated,
       wcSession,
       back,

src/popup/components/IconBoxed.vue

@@ -1,40 +1,40 @@
 <template>
   <div
     class="icon-boxed"
-    :class="[
-      `variant-${variant}`,
-      { 'icon-smaller': iconSmaller },
-    ]"
+    :class="{
+      'bg-colored': bgColored,
+      'icon-padded': iconPadded,
+      'outline-colored': outlineColored,
+      'outline-solid': outlineSolid,
+      transparent,
+    }"
   >
-    <slot>
-      <Component
-        :is="icon"
-        class="icon"
-      />
-    </slot>
+    <div class="icon-boxed-inner">
+      <slot>
+        <Component
+          :is="icon"
+          class="icon"
+        />
+      </slot>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-export const ICON_BOXED_VARIANT = [
-  'muted',
-  'danger',
-  'success',
-] as const;
-
-export type IconBoxedVariant = typeof ICON_BOXED_VARIANT[number];
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
     icon: { type: Object, default: null },
-    iconSmaller: Boolean,
-    variant: {
-      type: String as PropType<IconBoxedVariant>,
-      validator: (value: IconBoxedVariant) => ICON_BOXED_VARIANT.includes(value),
-      default: ICON_BOXED_VARIANT[0],
-    },
+    /** Makes the icon background to use the same color as the icon */
+    bgColored: Boolean,
+    /** Makes the icon outline to use the same color as the icon */
+    outlineColored: Boolean,
+    /** Makes the outline color non transparent */
+    outlineSolid: Boolean,
+    /** Makes the icon slightly smaller - useful with non circle icons */
+    iconPadded: Boolean,
+    transparent: Boolean,
   },
 });
 </script>
@@ -43,44 +43,83 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 
 .icon-boxed {
-  --icon-size: 48px;
+  --inner-space-size: 4px; // Empty space between the outline and the icon (and the bg)
+
+  --icon-size: 40px;
+  --icon-padding: 0; // Increasing this makes the icon shape smaller in the bg circle
+  --icon-bg-color: var(--screen-bg-color);
 
+  --outline-color: #{$color-grey-border};
+  --outline-size: 4px;
+  --outline-opacity: 0.4;
+
+  position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
-  border: 4px solid rgba($color-white, 0.05);
+  padding: var(--outline-size);
   border-radius: 50%;
-  background-color: $color-bg-1;
-  background-clip: content-box;
+  background-color: var(--screen-bg-color);
 
-  .icon {
+  // Outline
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border: var(--outline-size) solid var(--outline-color);
+    border-radius: inherit;
+    opacity: var(--outline-opacity);
+  }
+
+  // Actual icon wrapper with background
+  &-inner {
+    position: relative;
+    box-sizing: content-box;
     width: var(--icon-size);
     height: var(--icon-size);
+    border-radius: inherit;
+    overflow: hidden;
+    margin: var(--inner-space-size);
+
+    // Icon background
+    // Pseudo element used for the possibility of setting the opacity on the solid bg color
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      inset: 0;
+      background-color: var(--icon-bg-color);
+      opacity: 0.4;
+    }
+
+    > *,
+    .icon {
+      width: 100%;
+      height: 100%;
+      padding: var(--icon-padding);
+    }
   }
 
-  &.icon-smaller {
-    --icon-size: 38px;
+  &.icon-padded {
+    --icon-padding: 5px;
   }
 
-  &.variant {
-    &-muted {
-      border-color: rgba($color-white, 0.05);
-      background-color: $color-bg-1;
-    }
+  &.outline-solid {
+    --outline-opacity: 1;
+  }
 
-    &-danger {
-      color: $color-danger;
-      border-color: rgba($color-danger, 0.1);
-      background-color: rgba($color-danger, 0.2);
-    }
+  &.outline-colored {
+    --outline-color: currentColor;
+  }
 
-    &-success {
-      color: $color-success-dark;
-      border-color: rgba($color-success-dark, 0.1);
-      background-color: rgba($color-success-dark, 0.2);
-    }
+  &.bg-colored {
+    --icon-bg-color: currentColor;
+  }
+
+  &.transparent {
+    background-color: transparent;
   }
 }
 </style>

src/popup/components/InputField.vue

@@ -282,11 +282,10 @@ export default defineComponent({
   .label {
     display: flex;
     align-items: center;
-    margin-top: 16px;
-    margin-bottom: 2px;
+    margin-block: 16px 2px;
 
     &-text {
-      margin: 4px 0;
+      margin: 4px 0 2px 0;
       display: inline-block;
       user-select: none;
     }

src/popup/components/Modals/AccountImport.vue

@@ -1,6 +1,6 @@
 <template>
   <Modal
-    class="import-account-modal"
+    class="account-import-modal"
     from-bottom
     has-close-button
     @close="resolve"
@@ -35,14 +35,12 @@
       @submit="importAccount"
     >
       <template #label-after>
-        <BtnPlain
+        <BtnIcon
+          :icon="QrScanIcon"
+          :disabled="discovering"
           data-cy="scan-button"
-          class="scan-button"
-          :class="{ disabled: discovering }"
           @click="scanAccountQrCode()"
-        >
-          <QrScanIcon />
-        </BtnPlain>
+        />
       </template>
     </FormTextarea>
 
@@ -81,18 +79,17 @@ import {
 
 import Modal from '@/popup/components/Modal.vue';
 import BtnMain from '@/popup/components/buttons/BtnMain.vue';
-import BtnPlain from '@/popup/components/buttons/BtnPlain.vue';
+import BtnIcon from '@/popup/components/buttons/BtnIcon.vue';
 import FormTextarea from '@/popup/components/form/FormTextarea.vue';
 import AnimatedSpinnerIcon from '@/icons/animated-spinner.svg?vue-component';
 import QrScanIcon from '@/icons/qr-scan.svg?vue-component';
 
 export default defineComponent({
   components: {
     BtnMain,
-    BtnPlain,
+    BtnIcon,
     Modal,
     FormTextarea,
-    QrScanIcon,
     AnimatedSpinnerIcon,
   },
   props: {
@@ -152,6 +149,7 @@ export default defineComponent({
     }
 
     return {
+      QrScanIcon,
       discovering,
       mnemonic,
       error,
@@ -166,23 +164,11 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 @use '@/styles/typography';
 
-.import-account-modal {
+.account-import-modal {
   text-align: center;
 
   .loader {
     width: 56px;
   }
-
-  .scan-button {
-    color: $color-white;
-    display: block;
-    width: 32px;
-    height: 24px;
-
-    &.disabled {
-      opacity: 0.4;
-      pointer-events: none;
-    }
-  }
 }
 </style>

src/popup/components/Modals/AddressBookImport.vue

@@ -8,9 +8,8 @@
     <div class="top-icon-wrapper">
       <IconBoxed
         :icon="ImportIcon"
-        class="icon"
-        icon-smaller
-        is-boxed
+        icon-padded
+        bg-colored
       />
     </div>
 
@@ -102,13 +101,7 @@ export default defineComponent({
   .top-icon-wrapper {
     margin-bottom: 20px;
     text-align: center;
-
-    .icon {
-      color: $color-primary;
-      border-color: $color-bg-1;
-      outline: 4px solid rgba($color-white, 0.05);
-      background-color: rgba($color-primary, 0.2);
-    }
+    color: $color-primary;
   }
 }
 </style>