Merge pull request #1782 from birtony/linter-fix

fix: ran linter

cmd/wallet-web/src/components/CredentialDetails/CredentialDetailsBannerComponent.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="flex flex-col justify-start px-3 md:px-0 pt-10 w-full">
+  <div class="flex flex-col justify-start px-3 pt-10 w-full md:px-0">
     <div class="flex flex-col justify-start items-start w-full root-container">
       <div
         class="flex z-10 flex-row justify-start items-center py-6 px-5 w-full h-24 rounded-xl border"
@@ -20,7 +20,7 @@
           <img :src="credentialIconSrc" />
         </div>
         <span
-          class="flex-1 pl-4 text-sm md:text-base font-bold text-left text-ellipsis"
+          class="flex-1 pl-4 text-sm font-bold text-left text-ellipsis md:text-base"
           :style="`color: ${styles.text.color}`"
         >
           {{ title }}

cmd/wallet-web/src/components/CredentialDetails/DeleteCredentialModalComponent.vue

@@ -36,7 +36,7 @@
     <template #actionButton>
       <StyledButtonComponent
         id="delete-credential-button"
-        class="order-first md:order-last w-full md:w-auto"
+        class="order-first w-full md:order-last md:w-auto"
         type="btn-danger"
         @click="deleteCredential()"
       >

cmd/wallet-web/src/components/CredentialDetails/RenameCredentialModalComponent.vue

@@ -45,7 +45,7 @@
     <template #actionButton>
       <StyledButtonComponent
         id="rename-credential-button"
-        class="order-first md:order-last w-full md:w-auto"
+        class="order-first w-full md:order-last md:w-auto"
         type="btn-primary"
         :loading="loading"
         @click="renameCredential(credentialId, vaultName)"

cmd/wallet-web/src/components/CredentialPreview/CredentialPreviewComponent.vue

@@ -7,7 +7,7 @@
 <template>
   <router-link
     :id="id"
-    class="group inline-flex items-center py-6 pr-3 pl-5 w-full h-20 md:h-24 text-sm md:text-base font-bold rounded-xl border focus-within:ring-2 focus-within:ring-offset-2 outline-none credentialPreviewContainer"
+    class="group inline-flex items-center py-6 pr-3 pl-5 w-full h-20 text-sm font-bold rounded-xl border outline-none focus-within:ring-2 focus-within:ring-offset-2 md:h-24 md:text-base credentialPreviewContainer"
     :class="
       styles.background.color !== '#fff'
         ? `border-neutrals-black border-opacity-10 notWhiteCredentialPreview`
@@ -18,9 +18,9 @@
     <div class="flex-none w-12 h-12 border-opacity-10">
       <img :src="credentialIconSrc" />
     </div>
-    <div class="flex-grow p-4">
+    <div class="grow p-4">
       <span
-        class="text-sm md:text-base font-bold text-left text-ellipsis"
+        class="text-sm font-bold text-left text-ellipsis md:text-base"
         :style="`color: ${styles?.text?.color}`"
       >
         {{ title }}

cmd/wallet-web/src/components/CustomSelect/CustomSelectComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="custom-select" :tabindex="tabindex" @blur="open = false">
     <div class="inline-flex custom-select" :class="{ open: open }" @click="open = !open">
-      <div class="flex-grow selected">
+      <div class="grow selected">
         {{ selected }}
       </div>
       <div class="flex flex-none justify-end w-6 h-6">

cmd/wallet-web/src/components/DIDManagement/CreateOrbComponent.vue

@@ -6,7 +6,7 @@
 
 <template>
   <div class="flex flex-col justify-start items-start py-8">
-    <div class="flex flex-col flex-grow justify-start items-start w-full">
+    <div class="flex flex-col grow justify-start items-start w-full">
       <label for="select-key" class="mb-1 text-base">Key Type:</label>
       <select id="select-key" v-model="keyType" class="mb-5 w-full max-w-full border-b">
         <option value="ED25519">Ed25519</option>
@@ -16,7 +16,7 @@
       </select>
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start w-full">
+    <div class="flex flex-col grow justify-start items-start w-full">
       <label for="select-signature-suite" class="mb-1 text-base">Signature Suite:</label>
       <select
         id="select-signature-suite"
@@ -29,7 +29,7 @@
       </select>
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start w-full">
+    <div class="flex flex-col grow justify-start items-start w-full">
       <label for="select-key-purpose" class="mb-1 text-base">Key Purpose:</label>
       <select id="select-key-purpose" v-model="purpose" class="mb-5 w-full max-w-full border-b">
         <option value="all">all</option>

cmd/wallet-web/src/components/DIDManagement/DIDPreferencesComponent.vue

@@ -20,7 +20,7 @@
       </select>
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start w-full">
+    <div class="flex flex-col grow justify-start items-start w-full">
       <label for="verification-method" class="mb-1 text-base">Key ID:</label>
       <select
         id="verification-method"
@@ -35,7 +35,7 @@
       </select>
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start w-full">
+    <div class="flex flex-col grow justify-start items-start w-full">
       <label for="signature-type-selector" class="mb-1 text-base">Update Signature Type:</label>
       <div
         v-for="signatureType in allSignatureTypes"

cmd/wallet-web/src/components/DIDManagement/ImportDIDComponent.vue

@@ -6,12 +6,12 @@
 
 <template>
   <div class="flex flex-col justify-start items-start py-8">
-    <div class="flex flex-col flex-grow justify-start items-start mb-5 w-full">
+    <div class="flex flex-col grow justify-start items-start mb-5 w-full">
       <label for="did-input">Enter Digital Identity:</label>
       <input id="did-input" v-model="didID" class="w-full border-b" required />
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start mb-5 w-full">
+    <div class="flex flex-col grow justify-start items-start mb-5 w-full">
       <label>Select Key Format:</label>
       <div class="flex flex-row justify-start items-center">
         <input id="Base58" v-model="keyFormat" type="radio" value="Base58" />
@@ -23,12 +23,12 @@
       </div>
     </div>
 
-    <div class="flex flex-col flex-grow justify-start items-start mb-5 w-full">
+    <div class="flex flex-col grow justify-start items-start mb-5 w-full">
       <label for="privateKeyStr">Enter Private Key (in JWK or Base58 format):</label>
       <input id="privateKeyStr" v-model="privateKeyStr" class="w-full border-b" required />
     </div>
 
-    <div class="flex relative flex-col flex-grow justify-start items-start mb-5 w-full">
+    <div class="flex relative flex-col grow justify-start items-start mb-5 w-full">
       <label for="keyID">Enter matching Key ID:</label>
       <input
         id="keyID"

cmd/wallet-web/src/components/Footer/FooterComponent.vue

@@ -6,11 +6,11 @@
 
 <template>
   <div class="py-6 px-15 mx-6 w-full text-center">
-    <div class="hidden md:block mx-auto text-center text-neutrals-medium">
+    <div class="hidden mx-auto text-center text-neutrals-medium md:block">
       © {{ date }} TrustBloc ･ {{ t('Footer.privacyPolicy') }} ･ {{ t('Footer.terms') }} ･
       <LocaleSwitcherComponent />
     </div>
-    <div class="block md:hidden text-neutrals-medium">
+    <div class="block text-neutrals-medium md:hidden">
       <ul class="list-inside">
         <li>
           <span class="whitespace-nowrap">{{ t('Footer.privacyPolicy') }}</span> ･

cmd/wallet-web/src/components/Modal/ModalComponent.vue

@@ -13,7 +13,7 @@
       <div class="flex overflow-y-auto fixed inset-0 justify-center items-center">
         <slot name="errorToast" />
       </div>
-      <div class="relative flex-grow mx-6 lg:mx-auto max-w-lg bg-neutrals-white rounded-2xl">
+      <div class="relative grow mx-6 max-w-lg bg-neutrals-white rounded-2xl lg:mx-auto">
         <button v-if="showCloseButton" class="absolute right-0 pt-3 pr-3 w-10 h-10" @click="close">
           <!-- TODO: use inline svg instead once https://github.com/trustbloc/wallet/issues/816 is fixed -->
           <img
@@ -25,7 +25,7 @@
         <slot name="content" />
         <!-- Buttons Container -->
         <div
-          class="flex flex-col md:flex-row gap-4 justify-start md:justify-between items-center px-5 md:px-8 pt-4 pb-5 text-center bg-neutrals-magnolia rounded-b-2xl border-0 border-t border-neutrals-lilacSoft modal-footer"
+          class="flex flex-col gap-4 justify-start items-center px-5 pt-4 pb-5 text-center bg-neutrals-magnolia rounded-b-2xl border-0 border-t border-neutrals-lilacSoft md:flex-row md:justify-between md:px-8 modal-footer"
         >
           <StyledButtonComponent type="btn-outline" class="w-full md:w-auto" @click="cancel">
             {{ t('Modal.cancel') }}

cmd/wallet-web/src/components/Navbar/NavbarComponent.vue

@@ -6,41 +6,41 @@
 
 <template>
   <div
-    class="flex relative flex-col flex-grow justify-between w-screen md:w-80 min-w-80 md:h-auto md:min-h-screen md:bg-gradient-dark shadow md:grow-0"
+    class="flex relative flex-col grow justify-between w-screen min-w-80 shadow md:grow-0 md:w-80 md:h-auto md:min-h-screen md:bg-gradient-dark"
   >
-    <div class="hidden md:block absolute bg-gradient-full opacity-40 oval" />
-    <div class="flex md:z-10 flex-col justify-start items-start pb-8 h-full">
-      <div class="hidden md:flex justify-start items-center px-10">
+    <div class="hidden absolute bg-gradient-full opacity-40 md:block oval" />
+    <div class="flex flex-col justify-start items-start pb-8 h-full md:z-10">
+      <div class="hidden justify-start items-center px-10 md:flex">
         <LogoComponent class="mt-13 cursor-pointer" @click="$router.push({ name: 'vaults' })" />
       </div>
-      <div class="flex flex-col flex-grow justify-start mt-8 w-full">
+      <div class="flex flex-col grow justify-start mt-8 w-full">
         <ul>
           <slot />
         </ul>
         <div class="my-5 mx-10 h-px bg-neutrals-white opacity-20" />
         <SignoutComponent />
       </div>
     </div>
-    <div class="flex md:z-10 flex-col items-start px-10 text-sm text-neutrals-white">
+    <div class="flex flex-col items-start px-10 text-sm text-neutrals-white md:z-10">
       <span
         tabindex="0"
-        class="mb-2 focus:rounded focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer focus:outline-none underline-white"
+        class="mb-2 focus:rounded focus:outline-none focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer underline-white"
         >{{ t('Footer.privacyPolicy') }}</span
       >
       <span
         tabindex="0"
-        class="focus:rounded focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer focus:outline-none underline-white"
+        class="focus:rounded focus:outline-none focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer underline-white"
         >{{ t('Footer.terms') }}</span
       >
       <div class="flex flex-row justify-start items-center my-6">
         <span
           tabindex="0"
-          class="whitespace-nowrap focus:rounded focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer focus:outline-none underline-white"
+          class="whitespace-nowrap focus:rounded focus:outline-none focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 cursor-pointer underline-white"
           >© {{ date }} TrustBloc</span
         >
         <span class="px-2 opacity-60">･</span>
         <LocaleSwitcherComponent
-          class="text-neutrals-white focus:rounded focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 focus:outline-none underline-white"
+          class="text-neutrals-white focus:rounded focus:outline-none focus:ring-1 ring-primary-blue opacity-60 hover:opacity-100 focus:opacity-100 underline-white"
         />
       </div>
     </div>

cmd/wallet-web/src/components/Navbar/NavbarLinkComponent.vue

@@ -26,7 +26,7 @@
     <a
       :id="id"
       tabindex="0"
-      class="flex flex-row justify-start items-center px-10 w-full h-16 cursor-pointer focus:outline-none"
+      class="flex flex-row justify-start items-center px-10 w-full h-16 focus:outline-none cursor-pointer"
       v-bind="$attrs"
       @click="handleClick($attrs)"
       @keyup.enter="handleClick($attrs)"

cmd/wallet-web/src/components/SkeletonLoader/CredentialDetailsBannerSkeletonComponent.vue

@@ -10,10 +10,10 @@ import CredentialPreviewSkeletonComponent from './CredentialPreviewSkeletonCompo
 const numOfSkeletons = ref(4);
 </script>
 <template>
-  <div class="flex flex-col justify-start items-start px-3 md:px-0 pt-10 w-full">
-    <CredentialPreviewSkeletonComponent :isTall="true" />
+  <div class="flex flex-col justify-start items-start px-3 pt-10 w-full md:px-0">
+    <CredentialPreviewSkeletonComponent :is-tall="true" />
     <div
-      class="flex relative flex-col lg:flex-row px-6 pt-12 lg:pt-14 pb-4 lg:pb-6 mb-1 w-full bg-neutrals-white rounded-b-xl sub-container"
+      class="flex relative flex-col px-6 pt-12 pb-4 mb-1 w-full bg-neutrals-white rounded-b-xl lg:flex-row lg:pt-14 lg:pb-6 sub-container"
     >
       <div
         v-for="id in numOfSkeletons"
@@ -24,7 +24,7 @@ const numOfSkeletons = ref(4);
           class="overflow-hidden relative mt-2 w-20 h-4 bg-neutrals-softWhite rounded-3xl skeleton-data"
         />
         <div
-          class="overflow-hidden relative mt-2 w-2/5 lg:w-32 h-5 bg-neutrals-softWhite rounded-3xl skeleton-data"
+          class="overflow-hidden relative mt-2 w-2/5 h-5 bg-neutrals-softWhite rounded-3xl lg:w-32 skeleton-data"
         />
       </div>
     </div>

cmd/wallet-web/src/components/SkeletonLoader/CredentialPreviewSkeletonComponent.vue

@@ -17,16 +17,16 @@ const props = defineProps({
 <template>
   <div class="flex flex-col justify-start items-start px-0 w-full">
     <div
-      class="flex z-10 flex-row justify-between items-center lg:py-6 pr-8 pl-5 w-full lg:h-24 bg-neutrals-whiteLilac rounded-xl"
+      class="flex z-10 flex-row justify-between items-center pr-8 pl-5 w-full bg-neutrals-whiteLilac rounded-xl lg:py-6 lg:h-24"
       :class="isTall ? 'h-24 py-6' : 'h-20 py-5'"
     >
       <div class="flex flex-row items-center w-full">
         <div
-          class="overflow-hidden relative flex-none w-12 lg:h-12 bg-neutrals-softWhite rounded-lg border-opacity-10 skeleton-data"
+          class="overflow-hidden relative flex-none w-12 bg-neutrals-softWhite rounded-lg border-opacity-10 lg:h-12 skeleton-data"
           :class="isTall ? 'h-12' : 'h-10'"
         />
         <div
-          class="overflow-hidden relative mt-0 ml-4 w-40 lg:h-5 bg-neutrals-softWhite rounded-3xl skeleton-data"
+          class="overflow-hidden relative mt-0 ml-4 w-40 bg-neutrals-softWhite rounded-3xl lg:h-5 skeleton-data"
           :class="isTall ? 'h-6' : 'h-5'"
         />
       </div>

cmd/wallet-web/src/components/SkeletonLoader/SkeletonLoaderComponent.vue

@@ -25,24 +25,24 @@ const numOfCredentialSkeletons = ref(2);
 <template>
   <div
     v-if="type === 'Vault'"
-    class="flex flex-col lg:flex-row flex-wrap lg:gap-x-8 gap-y-8 mt-6 md:mt-8"
+    class="flex flex-col flex-wrap gap-y-8 mt-6 md:mt-8 lg:flex-row lg:gap-x-8"
   >
     <VaultCardSkeletonComponent v-for="id in numOfVaultSkeletons" :key="`vault-skeleton-${id}`" />
   </div>
-  <div v-else-if="type === 'CredentialPreview'" class="flex flex-col px-6 md:px-0 w-full">
+  <div v-else-if="type === 'CredentialPreview'" class="flex flex-col px-6 w-full md:px-0">
     <div v-for="id in numOfCredentialSkeletons" :key="`cred-preview-skeleton-${id}`">
       <div
-        class="overflow-hidden relative mt-2 w-40 h-6 lg:h-5 bg-neutrals-whiteLilac rounded-3xl"
+        class="overflow-hidden relative mt-2 w-40 h-6 bg-neutrals-whiteLilac rounded-3xl lg:h-5"
       />
-      <div class="flex flex-col lg:flex-row my-8">
-        <CredentialPreviewSkeletonComponent class="lg:mr-8 mb-4 lg:mb-0" />
+      <div class="flex flex-col my-8 lg:flex-row">
+        <CredentialPreviewSkeletonComponent class="mb-4 lg:mr-8 lg:mb-0" />
         <CredentialPreviewSkeletonComponent />
       </div>
     </div>
   </div>
-  <div v-else-if="type === 'Flyout'" class="flex px-6 md:px-0 w-full md:w-40">
+  <div v-else-if="type === 'Flyout'" class="flex px-6 w-full md:px-0 md:w-40">
     <div
-      class="overflow-hidden relative mt-2 mb-3 lg:mb-0 w-full h-6 bg-neutrals-whiteLilac rounded-3xl"
+      class="overflow-hidden relative mt-2 mb-3 w-full h-6 bg-neutrals-whiteLilac rounded-3xl lg:mb-0"
     />
   </div>
   <div v-else-if="type === 'CredentialDetailsBanner'" class="flex flex-row w-full">

cmd/wallet-web/src/components/SkeletonLoader/VaultCardSkeletonComponent.vue

@@ -5,15 +5,15 @@
 -->
 <template>
   <div
-    class="flex flex-row lg:flex-col p-6 lg:pt-5 pr-14 w-full lg:w-64 bg-neutrals-whiteLilac rounded-xl"
+    class="flex flex-row p-6 pr-14 w-full bg-neutrals-whiteLilac rounded-xl lg:flex-col lg:pt-5 lg:w-64"
   >
     <div class="mr-3 w-12 h-12 bg-neutrals-softWhite rounded-full"></div>
     <div class="flex-1 space-y-3">
       <div
-        class="overflow-hidden relative mt-0 lg:mt-3 ml-3 lg:ml-0 w-full h-5 lg:h-6 bg-neutrals-softWhite rounded-3xl skeleton-data"
+        class="overflow-hidden relative mt-0 ml-3 w-full h-5 bg-neutrals-softWhite rounded-3xl lg:mt-3 lg:ml-0 lg:h-6 skeleton-data"
       ></div>
       <div
-        class="overflow-hidden relative mt-0 lg:mt-3 ml-3 lg:ml-0 w-1/2 h-3 lg:h-4 bg-neutrals-softWhite rounded-3xl skeleton-data"
+        class="overflow-hidden relative mt-0 ml-3 w-1/2 h-3 bg-neutrals-softWhite rounded-3xl lg:mt-3 lg:ml-0 lg:h-4 skeleton-data"
       ></div>
     </div>
   </div>

cmd/wallet-web/src/components/SkeletonLoader/VerifiedInformationSkeletonComponent.vue

@@ -6,12 +6,12 @@
 
 <template>
   <div class="flex relative flex-row w-full sub-container">
-    <div class="flex flex-col lg:flex-row justify-start lg:items-center w-full h-16">
+    <div class="flex flex-col justify-start w-full h-16 lg:flex-row lg:items-center">
       <div
-        class="flex overflow-hidden relative lg:my-8 mt-4 ml-3 w-20 h-3 lg:h-5 bg-neutrals-white rounded-3xl skeleton-data"
+        class="flex overflow-hidden relative mt-4 ml-3 w-20 h-3 bg-neutrals-white rounded-3xl lg:my-8 lg:h-5 skeleton-data"
       />
       <div
-        class="flex overflow-hidden relative lg:my-8 lg:mx-auto mt-2 mb-4 ml-3 w-2/5 lg:w-48 h-4 lg:h-5 bg-neutrals-white rounded-3xl skeleton-data"
+        class="flex overflow-hidden relative mt-2 mb-4 ml-3 w-2/5 h-4 bg-neutrals-white rounded-3xl lg:my-8 lg:mx-auto lg:w-48 lg:h-5 skeleton-data"
       />
     </div>
   </div>

cmd/wallet-web/src/components/StyledButton/StyledButtonComponent.vue

@@ -7,7 +7,7 @@
 <template>
   <button
     :class="type"
-    class="flex flex-row justify-center items-center pr-8 pl-8 h-11 text-base font-bold rounded-lg"
+    class="flex flex-row justify-center items-center px-8 h-11 text-base font-bold rounded-lg"
   >
     <svg
       v-if="getLoading"

cmd/wallet-web/src/components/TabbedInterface/TabsComponent.vue

@@ -30,7 +30,7 @@
       </li>
     </ul>
     <template v-for="(tab, index) in tabs">
-      <div v-if="index === activeTab" :key="index" class="flex-grow">
+      <div v-if="index === activeTab" :key="index" class="grow">
         <slot :name="`tabPanel-${index}`" />
       </div>
     </template>

cmd/wallet-web/src/components/ToastNotification/ToastNotificationComponent.vue

@@ -6,16 +6,16 @@
 
 <template>
   <div v-show="close" :class="classname">
-    <div class="xs:flex-none px-4">
-      <img class="w-8 sm:w-10 h-6 sm:h-8" :src="icon" />
+    <div class="px-4 xs:flex-none">
+      <img class="w-8 h-6 sm:w-10 sm:h-8" :src="icon" />
     </div>
     <div class="flex-col">
-      <span class="text-sm xs:text-lg font-bold leading-relaxed text-left">{{ title }}</span>
+      <span class="text-sm font-bold leading-relaxed text-left xs:text-lg">{{ title }}</span>
       <div>
-        <span class="text-xs xs:text-sm leading-6 text-left">{{ description }}</span>
+        <span class="text-xs leading-6 text-left xs:text-sm">{{ description }}</span>
       </div>
     </div>
-    <div class="xs:flex-none px-4 align-middle">
+    <div class="px-4 align-middle xs:flex-none">
       <button type="button" @click="close = !close">
         <img class="w-6 h-6" src="@/assets/img/close-icon.svg" />
       </button>

cmd/wallet-web/src/components/ToolTip/ToolTipComponent.vue

@@ -3,7 +3,7 @@
     class="inline-flex absolute top-14 right-0 z-20 justify-center py-1 px-5 bg-neutrals-dark rounded-lg"
   >
     <div
-      class="absolute z-10 bg-neutrals-dark rounded-sm border-8 border-neutrals-dark transform rotate-45 triangle"
+      class="absolute z-10 bg-neutrals-dark rounded-sm border-8 border-neutrals-dark rotate-45 triangle"
     />
     <span class="z-20 text-sm text-center text-neutrals-white whitespace-nowrap">{{
       toolTipLabel