cq

commit 7edb442fd0fb49dd1045c9e9b11390f22373ee1f
parent b37561900fe1df40facf8810893c9f5cc2723b40
Author: finwo <finwo@pm.me>
Date:   Sun, 14 Sep 2025 01:15:32 +0200

Make icon config more re-usable

Diffstat:
M
packages/app/src/component/screen-account-add.tsx
 | 
2
+-
M
packages/app/src/component/screen-account-select.tsx
 | 
2
+-
M
packages/app/src/component/screen-contact-add.tsx
 | 
2
+-
M
packages/app/src/component/screen-contact-list.tsx
 | 
2
+-
M
packages/app/src/component/screen-device-add.tsx
 | 
2
+-
M
packages/app/src/component/screen-device-list.tsx
 | 
2
+-
M
packages/app/src/component/screen-home.tsx
 | 
2
+-
M
packages/app/src/component/screen-menu.tsx
 | 
2
+-
M
packages/app/src/global.css
 | 
5
++++-

9 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/packages/app/src/component/screen-account-add.tsx b/packages/app/src/component/screen-account-add.tsx
@@ -9,7 +9,7 @@ export const AccountAddScreen = {
         <h3>Add account</h3>
 
         {/* <a href={`#!${ContactListScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;"> */}
-        {/*   <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;"> */}
+        {/*   <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon"> */}
         {/*     {BackIcon.map(el => m(...el))} */}
         {/*   </svg> */}
         {/* </a> */}
diff --git a/packages/app/src/component/screen-account-select.tsx b/packages/app/src/component/screen-account-select.tsx
@@ -60,7 +60,7 @@ export const AccountSelectScreen = {
           {vnode.state.accounts.map(account => (
             <a style="display:block;padding:1em" onclick={vnode.state.handler.selectAccount(account)}>
               <label>{account.displayName}</label>
-              <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;" class="accountListDeleteButton" onclick={()=>{vnode.state.handler.deleteAccount(vnode, account);return false;}}>
+              <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon accountListDeleteButton" onclick={()=>{vnode.state.handler.deleteAccount(vnode, account);return false;}}>
                 {TrashIcon.map(el => m(...el))}
               </svg>
             </a>
diff --git a/packages/app/src/component/screen-contact-add.tsx b/packages/app/src/component/screen-contact-add.tsx
@@ -16,7 +16,7 @@ export const ContactAddScreen = {
       <div class="main">
         <h3>Add contact</h3>
         <a href={`#!${ContactListScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {BackIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/component/screen-contact-list.tsx b/packages/app/src/component/screen-contact-list.tsx
@@ -25,7 +25,7 @@ export const ContactListScreen = {
       <div class="main">
         <h3>Contacts</h3>
         <a href={`#!${MenuScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {BackIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/component/screen-device-add.tsx b/packages/app/src/component/screen-device-add.tsx
@@ -33,7 +33,7 @@ export const DeviceAddScreen = {
       <div class="main">
         <h3>Add device</h3>
         <a href={`#!${DeviceListScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {BackIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/component/screen-device-list.tsx b/packages/app/src/component/screen-device-list.tsx
@@ -18,7 +18,7 @@ export const DeviceListScreen = {
       <div class="main">
         <h3>Devices</h3>
         <a href={`#!${MenuScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {BackIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/component/screen-home.tsx b/packages/app/src/component/screen-home.tsx
@@ -41,7 +41,7 @@ export const HomeScreen = {
       <div class="main">
         <h3>Chats</h3>
         <a href={`#!${MenuScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {MenuIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/component/screen-menu.tsx b/packages/app/src/component/screen-menu.tsx
@@ -25,7 +25,7 @@ export const MenuScreen = {
       <div class="main">
         <h3>Menu</h3>
         <a href={`#!${HomeScreen.routePath}`} style="position:absolute;right:0;top:-0.9em;background:none;border:none;">
-          <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+          <svg ns="http://www.w3.org/2000/svg" fill="transparent" class="icon">
             {BackIcon.map(el => m(...el))}
           </svg>
         </a>
diff --git a/packages/app/src/global.css b/packages/app/src/global.css
@@ -68,8 +68,11 @@ input {
   border-bottom: 2px solid #FFF;
 }
 
-svg {
+.icon {
   stroke: #FFF;
+  vertical-align:bottom;
+  width:1em;
+  height:1em;
 }
 
 .main {