From 53a4b1f9a6a9aa6bc044609c3accb074d924daf9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Jan 2024 17:39:51 +0200
Subject: better virtual components and stuff

---
 src/components/notification/notification.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/notification')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a8eceab0..5c425200 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
-- 
cgit v1.2.3-70-g09d2


From 48f106b438e22d8289904c9f474819ad7b85d0e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 19:17:17 +0200
Subject: separate greentext into "fun text" and make Post/Notification related
 components

---
 src/App.scss                                     |  2 --
 src/components/fun_text.style.js                 | 40 ++++++++++++++++++++++++
 src/components/notification.style.js             | 21 +++++++++++++
 src/components/notification/notification.scss    |  3 +-
 src/components/panel.style.js                    |  4 ++-
 src/components/popover.style.js                  |  3 +-
 src/components/post.style.js                     | 21 +++++++++++++
 src/components/rich_content.style.js             | 17 ++++++++++
 src/components/rich_content/rich_content.scss    |  8 +++++
 src/components/status_body/status_body.scss      |  8 -----
 src/components/status_content/status_content.vue | 10 ++++++
 src/components/text.style.js                     | 13 --------
 src/services/theme_data/theme_data_3.service.js  | 13 ++++++--
 13 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 src/components/fun_text.style.js
 create mode 100644 src/components/notification.style.js
 create mode 100644 src/components/post.style.js
 create mode 100644 src/components/rich_content.style.js

(limited to 'src/components/notification')

diff --git a/src/App.scss b/src/App.scss
index 27fee4b4..6a634926 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -673,8 +673,6 @@ option {
 
 .faint {
   --text: var(--textFaint);
-  --textGreentext: var(--textGreentextFaint);
-  --textCyantext: var(--textCyantextFaint);
   --link: var(--linkFaint);
 
   color: var(--text);
diff --git a/src/components/fun_text.style.js b/src/components/fun_text.style.js
new file mode 100644
index 00000000..2d3ac154
--- /dev/null
+++ b/src/components/fun_text.style.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'FunText',
+  selector: '/*fun-text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext',
+    cyantext: '.cyantext'
+  },
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      directives: {
+        textColor: '--text',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5
+      }
+    },
+    {
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      variant: 'cyantext',
+      directives: {
+        textColor: '--cBlue',
+        textAuto: 'preserve'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
new file mode 100644
index 00000000..057b1c7a
--- /dev/null
+++ b/src/components/notification.style.js
@@ -0,0 +1,21 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 654aca3c..86d3e31d 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -3,8 +3,7 @@
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   word-wrap: break-word;
   word-break: break-word;
 
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index ce9812a6..1e8039c6 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -9,7 +9,9 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post',
+    'Notification'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index a3a554fd..6a121cae 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -13,7 +13,8 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post'
   ],
   defaultRules: [
     {
diff --git a/src/components/post.style.js b/src/components/post.style.js
new file mode 100644
index 00000000..92ec230a
--- /dev/null
+++ b/src/components/post.style.js
@@ -0,0 +1,21 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content.style.js
new file mode 100644
index 00000000..aaf126a5
--- /dev/null
+++ b/src/components/rich_content.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e5d353ac..3bb5b16b 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -65,4 +65,12 @@
     vertical-align: middle;
     object-fit: contain;
   }
+
+  .greentext {
+    color: var(--funtextGreentext);
+  }
+
+  .cyantext {
+    color: var(--funtextCyantext);
+  }
 }
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index a8878745..930ed803 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -112,14 +112,6 @@
     }
   }
 
-  .greentext {
-    color: var(--textGreentext);
-  }
-
-  .cyantext {
-    color: var(--textCyantext);
-  }
-
   &.-compact {
     align-items: top;
     flex-direction: row;
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index e977d489..a9db6b12 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -62,5 +62,15 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
+
+  &.faint {
+    .greentext {
+      color: var(--funtextGreentextFaint);
+    }
+
+    .cyantext {
+      color: var(--funtextCyantextFaint);
+    }
+  }
 }
 </style>
diff --git a/src/components/text.style.js b/src/components/text.style.js
index 905dbbee..a254ceb4 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -2,34 +2,21 @@ export default {
   name: 'Text',
   selector: '/*text*/',
   virtual: true,
-  variants: {
-    greentext: '.greentext'
-  },
   states: {
     faint: '.faint'
   },
   defaultRules: [
     {
-      component: 'Text',
       directives: {
         textColor: '--text',
         textAuto: 'no-preserve'
       }
     },
     {
-      component: 'Text',
       state: ['faint'],
       directives: {
         textOpacity: 0.5
       }
-    },
-    {
-      component: 'Text',
-      variant: 'greentext',
-      directives: {
-        textColor: '--cGreen',
-        textAuto: 'preserve'
-      }
     }
   ]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 0d205c73..9cab6dd4 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -19,9 +19,13 @@ import Button from 'src/components/button.style.js'
 import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
+import FunText from 'src/components/fun_text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 import Border from 'src/components/border.style.js'
+import Post from 'src/components/post.style.js'
+import Notification from 'src/components/notification.style.js'
+import RichContent from 'src/components/rich_content.style.js'
 
 const DEBUG = false
 
@@ -39,6 +43,7 @@ export const DEFAULT_SHADOWS = {
 const components = {
   Root,
   Text,
+  FunText,
   Link,
   Icon,
   Border,
@@ -51,7 +56,10 @@ const components = {
   TopBar,
   Button,
   ButtonUnstyled,
-  Input
+  Input,
+  Post,
+  Notification,
+  RichContent
 }
 
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -582,6 +590,7 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n')
             }
             case 'textColor': {
+              if (rule.directives.textNoCssColor === 'yes') { return '' }
               return 'color: ' + v
             }
             default: return ''
@@ -594,7 +603,7 @@ export const init = (extraRuleset, palette) => {
       return [
         header,
         directives + ';',
-        !rule.virtual ? '  color: var(--text);' : '',
+        (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
         '',
         virtualDirectives,
         footer
-- 
cgit v1.2.3-70-g09d2


From 3e198526e66b88301882b14240f0d50b8819b520 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 18:40:14 +0200
Subject: dynamically load .style.js files; move the files closer to related
 components

---
 src/components/attachment/attachment.style.js     | 15 ++++++
 src/components/avatar.style.js                    | 22 --------
 src/components/button.style.js                    |  2 +-
 src/components/button_unstyled.style.js           |  2 +-
 src/components/chat/chat.scss                     | 12 +----
 src/components/input.style.js                     |  2 +-
 src/components/modal/modals.style.js              |  9 ++++
 src/components/modals.style.js                    |  9 ----
 src/components/notification.style.js              | 22 --------
 src/components/notification/notification.style.js | 23 ++++++++
 src/components/poll/poll_graph.style.js           | 14 +++++
 src/components/post.style.js                      | 22 --------
 src/components/rich_content.style.js              | 17 ------
 src/components/rich_content/rich_content.style.js | 17 ++++++
 src/components/status/post.style.js               | 24 +++++++++
 src/components/user_avatar/avatar.style.js        | 22 ++++++++
 src/services/theme_data/theme_data_3.service.js   | 65 +++++++----------------
 17 files changed, 147 insertions(+), 152 deletions(-)
 create mode 100644 src/components/attachment/attachment.style.js
 delete mode 100644 src/components/avatar.style.js
 create mode 100644 src/components/modal/modals.style.js
 delete mode 100644 src/components/modals.style.js
 delete mode 100644 src/components/notification.style.js
 create mode 100644 src/components/notification/notification.style.js
 create mode 100644 src/components/poll/poll_graph.style.js
 delete mode 100644 src/components/post.style.js
 delete mode 100644 src/components/rich_content.style.js
 create mode 100644 src/components/rich_content/rich_content.style.js
 create mode 100644 src/components/status/post.style.js
 create mode 100644 src/components/user_avatar/avatar.style.js

(limited to 'src/components/notification')

diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
new file mode 100644
index 00000000..b76b3eb0
--- /dev/null
+++ b/src/components/attachment/attachment.style.js
@@ -0,0 +1,15 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    }
+  ]
+}
diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
deleted file mode 100644
index 812d45a4..00000000
--- a/src/components/avatar.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Avatar',
-  selector: '.Avatar',
-  variants: {
-    compact: '.-compact'
-  },
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3,
-        shadow: [{
-          x: 0,
-          y: 1,
-          blur: 8,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.7
-        }]
-      }
-    }
-  ]
-}
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 9f238b4e..6560c8fb 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -40,7 +40,7 @@ export default {
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within',
     disabled: ':disabled'
   },
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index e80322eb..89e8499c 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -5,7 +5,7 @@ export default {
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 4f8f8492..31061409 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -11,7 +11,6 @@
 
   .chat-view-body {
     box-sizing: border-box;
-    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -38,8 +37,7 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--background);
     z-index: 1;
   }
 
@@ -62,8 +60,6 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -80,12 +76,6 @@
       visibility: visible;
     }
 
-    i {
-      font-size: 1em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 9cddfd8e..7db50b66 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,7 +24,7 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/modal/modals.style.js b/src/components/modal/modals.style.js
new file mode 100644
index 00000000..c401a0cd
--- /dev/null
+++ b/src/components/modal/modals.style.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'Modals',
+  selector: '.modal-view',
+  lazy: true,
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/modals.style.js b/src/components/modals.style.js
deleted file mode 100644
index c401a0cd..00000000
--- a/src/components/modals.style.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default {
-  name: 'Modals',
-  selector: '.modal-view',
-  lazy: true,
-  validInnerComponents: [
-    'Panel'
-  ],
-  defaultRules: []
-}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
deleted file mode 100644
index 0802da77..00000000
--- a/src/components/notification.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Notification',
-  selector: '.Notification',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
-}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
new file mode 100644
index 00000000..ad7aab65
--- /dev/null
+++ b/src/components/notification/notification.style.js
@@ -0,0 +1,23 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
new file mode 100644
index 00000000..01b4d35c
--- /dev/null
+++ b/src/components/poll/poll_graph.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'PollGraph',
+  selector: '.poll-graph',
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent'
+      }
+    }
+  ]
+}
diff --git a/src/components/post.style.js b/src/components/post.style.js
deleted file mode 100644
index f4bd12a6..00000000
--- a/src/components/post.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Post',
-  selector: '.Status',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
-}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content.style.js
deleted file mode 100644
index aaf126a5..00000000
--- a/src/components/rich_content.style.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  name: 'RichContent',
-  selector: '.RichContent',
-  validInnerComponents: [
-    'Text',
-    'FunText',
-    'Link'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        textNoCssColor: 'yes'
-      }
-    }
-  ]
-}
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
new file mode 100644
index 00000000..aaf126a5
--- /dev/null
+++ b/src/components/rich_content/rich_content.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
new file mode 100644
index 00000000..dda79220
--- /dev/null
+++ b/src/components/status/post.style.js
@@ -0,0 +1,24 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js
new file mode 100644
index 00000000..812d45a4
--- /dev/null
+++ b/src/components/user_avatar/avatar.style.js
@@ -0,0 +1,22 @@
+export default {
+  name: 'Avatar',
+  selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3,
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 8,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.7
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 41c77506..f84a61c9 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -7,56 +7,25 @@ import {
   relativeLuminance
 } from '../color_convert/color_convert.js'
 
-import Root from 'src/components/root.style.js'
-import TopBar from 'src/components/top_bar.style.js'
-import Underlay from 'src/components/underlay.style.js'
-import Popover from 'src/components/popover.style.js'
-import Modals from 'src/components/modals.style.js'
-import MenuItem from 'src/components/menu_item.style.js'
-import Panel from 'src/components/panel.style.js'
-import PanelHeader from 'src/components/panel_header.style.js'
-import Button from 'src/components/button.style.js'
-import ButtonUnstyled from 'src/components/button_unstyled.style.js'
-import Input from 'src/components/input.style.js'
-import Text from 'src/components/text.style.js'
-import FunText from 'src/components/fun_text.style.js'
-import Link from 'src/components/link.style.js'
-import Icon from 'src/components/icon.style.js'
-import Border from 'src/components/border.style.js'
-import Post from 'src/components/post.style.js'
-import Notification from 'src/components/notification.style.js'
-import RichContent from 'src/components/rich_content.style.js'
-import Avatar from 'src/components/avatar.style.js'
-import Badge from 'src/components/badge.style.js'
-import Alert from 'src/components/alert.style.js'
-
 const DEBUG = false
 
+// Ensuring the order of components
 const components = {
-  Root,
-  Text,
-  FunText,
-  Link,
-  Icon,
-  Border,
-  Underlay,
-  Modals,
-  Popover,
-  MenuItem,
-  Panel,
-  PanelHeader,
-  TopBar,
-  Button,
-  ButtonUnstyled,
-  Input,
-  Post,
-  Notification,
-  RichContent,
-  Avatar,
-  Alert,
-  Badge
+  Root: null,
+  Text: null,
+  FunText: null,
+  Link: null,
+  Icon: null,
+  Border: null
 }
 
+// Loading all style.js[on] files dynamically
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+componentsContext.keys().forEach(key => {
+  const component = componentsContext(key).default
+  components[component.name] = component
+})
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 const unroll = (item) => {
@@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
     // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
-    const innerComponents = (validInnerComponents).map(name => components[name])
+    const innerComponents = (validInnerComponents).map(name => {
+      const result = components[name]
+      if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
+      return result
+    })
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
-- 
cgit v1.2.3-70-g09d2


From 11fd220734ae697e8157d25fbf4cdfc250fe2df7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 15:11:59 +0200
Subject: chat styles + related improvements

---
 src/components/chat/chat.style.js                 | 14 +++++++++
 src/components/chat/chat.vue                      |  2 +-
 src/components/chat_message/chat_message.scss     | 38 +++--------------------
 src/components/chat_message/chat_message.style.js | 30 ++++++++++++++++++
 src/components/notification/notification.style.js |  8 +----
 src/components/panel.style.js                     |  3 +-
 src/components/panel_header.style.js              |  3 +-
 src/components/rich_content/rich_content.style.js |  1 -
 src/components/status/post.style.js               |  8 +----
 src/services/theme_data/theme_data_3.service.js   | 34 +++++++++-----------
 10 files changed, 69 insertions(+), 72 deletions(-)
 create mode 100644 src/components/chat/chat.style.js
 create mode 100644 src/components/chat_message/chat_message.style.js

(limited to 'src/components/notification')

diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
new file mode 100644
index 00000000..fc3d66a4
--- /dev/null
+++ b/src/components/chat/chat.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+  ]
+}
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index fc94cc71..65f89c73 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fd5b7aa4..18eb610b 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -27,12 +27,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +55,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -117,16 +113,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +123,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }
diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js
new file mode 100644
index 00000000..9b57ad37
--- /dev/null
+++ b/src/components/chat_message/chat_message.style.js
@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
index ad7aab65..0d36760a 100644
--- a/src/components/notification/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -13,11 +13,5 @@ export default {
     'Avatar',
     'Attachment'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d3fa3602..14e9284c 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -14,7 +14,8 @@ export default {
     'Post',
     'Notification',
     'Alert',
-    'UserCard'
+    'UserCard',
+    'Chat'
   ],
   defaultRules: [
     {
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 5f108b41..56879fba 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -8,7 +8,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'Badge',
-    'Alert'
+    'Alert',
+    'Avatar'
   ],
   defaultRules: [
     {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index aaf126a5..7acc9d4f 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -9,7 +9,6 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
         textNoCssColor: 'yes'
       }
     }
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index dda79220..7388e2e3 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -14,11 +14,5 @@ export default {
     'Attachment',
     'PollGraph'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index a73d4cb5..cd23908c 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -17,7 +17,9 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
-  Panel: null
+  Panel: null,
+  Chat: null,
+  ChatMessage: null
 }
 
 // Loading all style.js[on] files dynamically
@@ -509,17 +511,11 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
-        let addRuleNeeded = false
 
         // TODO: DEFAULT TEXT COLOR
         const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
 
-        if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
-          addRuleNeeded = true
-        }
-
         if (computedDirectives.background) {
-          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -564,15 +560,13 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.stacked = lowerLevelStackedBackground
         dynamicVars.background = computed[selector].background
 
-        if (addRuleNeeded) {
-          addRule({
-            selector: cssSelector,
-            component: component.name,
-            ...combination,
-            parent,
-            directives: computedDirectives
-          })
-        }
+        addRule({
+          selector: cssSelector,
+          component: component.name,
+          ...combination,
+          parent,
+          directives: computedDirectives
+        })
       }
 
       innerComponents.forEach(innerComponent => {
@@ -645,15 +639,15 @@ export const init = (extraRuleset, palette) => {
             case 'background': {
               if (v === 'transparent') {
                 return [
-                  'background-color: ' + v,
+                  rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
                   '  --background: ' + v
-                ].join(';\n')
+                ].filter(x => x).join(';\n')
               }
               const color = cssColorString(computed[selector].background, rule.directives.opacity)
               return [
-                'background-color: ' + color,
+                rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
                 '  --background: ' + color
-              ].join(';\n')
+              ].filter(x => x).join(';\n')
             }
             case 'textColor': {
               if (rule.directives.textNoCssColor === 'yes') { return '' }
-- 
cgit v1.2.3-70-g09d2


From 9a24d21bbdd77db808c09b7b5cad632bebbe2f13 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 00:16:22 +0200
Subject: fix mobile badge in timeline

---
 src/App.scss                                  | 22 +++++++++++++++++++---
 src/components/notification/notification.scss | 18 +++++-------------
 src/components/timeline/timeline.vue          |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

(limited to 'src/components/notification')

diff --git a/src/App.scss b/src/App.scss
index b9aded41..f94583c9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -620,22 +620,38 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &.-dot,
+  &.-counter {
+    margin: 0;
+    position: absolute;
+  }
+
   &.-dot {
-    border-radius: 100%;
     min-height: 8px;
     max-height: 8px;
     min-width: 8px;
     max-width: 8px;
     padding: 0;
     line-height: 0;
-    margin: 0;
     font-size: 0;
-    position: absolute;
     left: calc(50% - 4px);
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
   }
+
+  &.-counter {
+    border-radius: var(--roundness);
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    padding: 0.2em;
+    min-width: 0;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    margin-left: 0.7em;
+    margin-top: -1em;
+  }
 }
 
 .alert {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 86d3e31d..ad05a2f3 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
@@ -70,28 +68,22 @@
   }
 
   &.-type--repeat .type-icon {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
+    color: var(--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: orange;
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2279f21a..862a1972 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,7 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-badge">
+            <div class="badge -counter">
               {{ mobileLoadButtonString }}
             </div>
           </button>
-- 
cgit v1.2.3-70-g09d2


From d8827932bc8f329c66bdf23fa0eb7af4ed41179a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 01:08:04 +0200
Subject: fix collapsed notifications incorrect styles

---
 src/components/notification/notification.vue     |  1 -
 src/components/notifications/notifications.scss  | 14 --------------
 src/components/rich_content/rich_content.jsx     |  8 +++++++-
 src/components/rich_content/rich_content.scss    |  9 +++++++++
 src/components/status_body/status_body.vue       |  2 ++
 src/components/status_content/status_content.vue | 10 ----------
 6 files changed, 18 insertions(+), 26 deletions(-)

(limited to 'src/components/notification')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 5c425200..632ae6e9 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -247,7 +247,6 @@
         />
         <template v-else>
           <StatusContent
-            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
             :status="notification.status"
           />
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1acccb8d..d749890d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -60,20 +60,6 @@
     padding: 0.6em;
     min-width: 0;
 
-    .RichContent {
-      a {
-        --link: var(--linkFaint);
-      }
-
-      .greentext {
-        --funtextGreentext: var(--funtextGreentextFaint);
-      }
-
-      .cyantext {
-        --funtextCyantext: var(--funtextCyantextFaint);
-      }
-    }
-
     .avatar-container {
       width: 32px;
       height: 32px;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ff14a58a..99d7daca 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -79,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -277,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 73eb07e9..962fd5bb 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,6 +1,15 @@
 .RichContent {
   font-family: var(--font);
 
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fb356360..f21bcc80 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -11,6 +11,7 @@
       >
         <RichContent
           class="media-body summary"
+          :faint="compact"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
         />
@@ -48,6 +49,7 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
+          :faint="compact"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index a9db6b12..e977d489 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -62,15 +62,5 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
-
-  &.faint {
-    .greentext {
-      color: var(--funtextGreentextFaint);
-    }
-
-    .cyantext {
-      color: var(--funtextCyantextFaint);
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 18:24:29 +0200
Subject: panels/statuses are looking really good now even with transparency

---
 src/components/conversation/conversation.vue  | 12 ++--
 src/components/notification/notification.scss |  5 ++
 src/components/panel.style.js                 |  1 +
 src/components/panel_header.style.js          |  1 +
 src/components/status/post.style.js           |  6 +-
 src/components/timeline/timeline.scss         |  4 ++
 src/components/user_card/user_card.scss       |  8 ---
 src/components/user_card/user_card.vue        |  5 +-
 src/components/user_panel/user_panel.vue      | 13 +++-
 src/components/user_profile/user_profile.vue  | 96 +++++++++++++++------------
 src/panel.scss                                | 10 +++
 src/services/theme_data/theme2_to_theme3.js   |  3 +
 12 files changed, 97 insertions(+), 67 deletions(-)

(limited to 'src/components/notification')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 64aa1351..d3ebf791 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -28,7 +28,10 @@
         class="rightside-button"
       />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+      >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -78,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein panel-body"
+              class="conversation-status status-fadein"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein panel-body"
+            class="conversation-status status-fadein"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"
@@ -284,7 +287,8 @@
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    background: var(--background);
+    padding: calc(var(--status-margin, $status-margin) / 2);
   }
 }
 </style>
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ad05a2f3..2dbced09 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -5,6 +5,11 @@
   word-wrap: break-word;
   word-break: break-word;
 
+  &.Status {
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
+  }
+
   --emoji-size: 14px;
 
   &:hover {
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d7459549..ad16c18f 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -23,6 +23,7 @@ export default {
   defaultRules: [
     {
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--bg',
         roundness: 3,
         blur: '5px',
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 56879fba..32464bc5 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -15,6 +15,7 @@ export default {
     {
       component: 'PanelHeader',
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--fg',
         shadow: []
       }
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 673f72e0..8dce527e 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -20,15 +20,13 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0
+        background: '--bg'
       }
     },
     {
       state: ['selected'],
       directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
+        background: '--inheritedBackground, 10'
       }
     }
   ]
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 7f886dc3..fccf28f4 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,6 +1,10 @@
 @import "../../variables";
 
 .Timeline {
+  .timeline-body {
+    background: none;
+  }
+
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 6dba3499..bf0ed5c2 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,14 +21,6 @@
     position: relative;
   }
 
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
   .background-image {
     position: absolute;
     top: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0f627f62..70c4f67d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,10 +282,7 @@
         />
       </div>
     </div>
-    <div
-      v-if="!hideBio"
-      class="panel-body"
-    >
+    <div v-if="!hideBio">
       <div
         v-if="!mergedConfig.hideUserStats && switcher"
         class="user-counts"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 95ec97af..9323b65e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
 <script src="./user_panel.js"></script>
 
 <style lang="scss">
-.user-panel .signed-in {
-  overflow: visible;
-  z-index: 10;
+.user-panel {
+  .panel {
+    background: var(--background);
+    backdrop-filter: var(--backdrop-filter);
+  }
+
+  .signed-in {
+    overflow: visible;
+    z-index: 10;
+  }
 }
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 011f32da..2d8b33e7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <UserCard
-        :user-id="userId"
-        :switcher="true"
-        :selected="timeline.viewing"
-        avatar-action="zoom"
-        rounded="top"
-        :has-note-editor="true"
-      />
-      <span
-        v-if="!!user.birthday"
-        class="user-birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
+      <div class="panel-body">
+        <UserCard
+          :user-id="userId"
+          :switcher="true"
+          :selected="timeline.viewing"
+          avatar-action="zoom"
+          rounded="top"
+          :has-note-editor="true"
         />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </span>
-      <div
-        v-if="user.fields_html && user.fields_html.length > 0"
-        class="user-profile-fields"
-      >
-        <dl
-          v-for="(field, index) in user.fields_html"
-          :key="index"
-          class="user-profile-field"
+        <span
+          v-if="!!user.birthday"
+          class="user-birthday"
         >
-          <dt
-            :title="user.fields_text[index].name"
-            class="user-profile-field-name"
-          >
-            <RichContent
-              :html="field.name"
-              :emoji="user.emoji"
-            />
-          </dt>
-          <dd
-            :title="user.fields_text[index].value"
-            class="user-profile-field-value"
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </span>
+        <div
+          v-if="user.fields_html && user.fields_html.length > 0"
+          class="user-profile-fields"
+        >
+          <dl
+            v-for="(field, index) in user.fields_html"
+            :key="index"
+            class="user-profile-field"
           >
-            <RichContent
-              :html="field.value"
-              :emoji="user.emoji"
-            />
-          </dd>
-        </dl>
+            <dt
+              :title="user.fields_text[index].name"
+              class="user-profile-field-name"
+            >
+              <RichContent
+                :html="field.name"
+                :emoji="user.emoji"
+              />
+            </dt>
+            <dd
+              :title="user.fields_text[index].value"
+              class="user-profile-field-value"
+            >
+              <RichContent
+                :html="field.value"
+                :emoji="user.emoji"
+              />
+            </dd>
+          </dl>
+        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -136,7 +138,7 @@
           {{ $t('settings.profile_tab') }}
         </div>
       </div>
-      <div class="panel-body">
+      <div>
         <span v-if="error">{{ error }}</span>
         <FAIcon
           v-else
@@ -160,6 +162,11 @@
   // No sticky header on user profile
   --currentPanelStack: 1;
 
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .user-birthday {
     margin: 0 0.75em 0.5em;
   }
@@ -228,4 +235,5 @@
     padding: 7em;
   }
 }
+
 </style>
diff --git a/src/panel.scss b/src/panel.scss
index 5df9fee4..08339765 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,5 +1,8 @@
 /* stylelint-disable no-descending-specificity */
 .panel {
+  --__panel-background: var(--background);
+  --__panel-backdrop-filter: var(--backdrop-filter);
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,8 @@
 
 .panel-body {
   padding: var(--panel-body-padding, 0);
+  background: var(--background);
+  backdrop-filter: var(--__panel-backdrop-filter);
 
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@@ -50,6 +55,7 @@
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -131,6 +137,9 @@
   border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
+  background-image:
+    linear-gradient(to bottom, var(--background), var(--background)),
+    linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
   &::after {
     background-color: var(--background);
@@ -186,5 +195,6 @@
   border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border);
+  background-color: var(--__panel-background);
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 8c623c69..75c82314 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
         newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
+      if (rule.component === 'Panel') {
+        newRules.push({ ...rule, component: 'Post' })
+      }
     })
     return newRules
   }
-- 
cgit v1.2.3-70-g09d2