Remove background from cards

src/components/sidebar/AppHeader.vue

@@ -35,7 +35,7 @@ const userStore = useUserStore();
       </div>
       <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
         <ThemeSwitch class="w-6 h-6" />
-        <Button variant="outline" class="[&_svg]:size-6" @click="settingsStore.isLoaded && hasUser ? logout() : walletStore.openWalletSelectModal()">
+        <Button variant="outline" class="[&_svg]:size-6 px-2 md:px-4" @click="settingsStore.isLoaded && hasUser ? logout() : walletStore.openWalletSelectModal()">
           <img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
           <span v-if="settingsStore.isLoaded && hasUser">
             <span class="font-bold hidden md:inline">Disconnect</span>

src/components/utilcards/AuthorityCard.vue

@@ -41,7 +41,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card class="w-full max-w-[600px] bg-accent/10 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] backdrop-blur-sm">
     <CardHeader>
       <CardTitle class="inline-flex items-center justify-between">
         <span>Authority info</span>

src/components/utilcards/ConfirmAccountUpdateCard.vue

@@ -64,7 +64,7 @@ const updateAuthority = async() => {
 </script>
 
 <template>
-  <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] backdrop-blur-sm">
     <CardHeader>
       <CardTitle class="inline-flex items-center justify-between">
         <span>Process Authority Update</span>

src/components/utilcards/ConfirmCreateAccountCard.vue

@@ -116,7 +116,7 @@ const createAccount = async() => {
 </script>
 
 <template>
-  <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] backdrop-blur-sm">
     <CardHeader>
       <CardTitle class="inline-flex items-center justify-between">
         <span>Process Account Creation</span>

src/components/utilcards/MemoEncryptCard.vue

@@ -76,7 +76,7 @@ const encryptOrDecrypt = async () => {
 </script>
 
 <template>
-  <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] backdrop-blur-sm">
     <CardHeader>
       <CardTitle class="inline-flex items-center justify-between">
         <span>Memo encryption</span>

src/components/utilcards/SignTransactionCard.vue

@@ -87,7 +87,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] backdrop-blur-sm">
     <CardHeader>
       <CardTitle class="inline-flex items-center justify-between">
         <span>Transaction signing</span>