dynamically load .style.js files; move the files closer to related components

11 files changed, 38 insertions, 16 deletions

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/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/modals.style.js b/src/components/modal/modals.style.js
index c401a0cd..c401a0cd 100644
--- a/src/components/modals.style.js
+++ b/src/components/modal/modals.style.js
diff --git a/src/components/notification.style.js b/src/components/notification/notification.style.js
index 0802da77..ad7aab65 100644
--- a/src/components/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -10,7 +10,8 @@ export default {
     'ButtonUnstyled',
     'RichContent',
     'Input',
-    'Avatar'
+    'Avatar',
+    'Attachment'
   ],
   defaultRules: [
     {
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/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index aaf126a5..aaf126a5 100644
--- a/src/components/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
diff --git a/src/components/post.style.js b/src/components/status/post.style.js
index f4bd12a6..dda79220 100644
--- a/src/components/post.style.js
+++ b/src/components/status/post.style.js
@@ -10,7 +10,9 @@ export default {
     'ButtonUnstyled',
     'RichContent',
     'Input',
-    'Avatar'
+    'Avatar',
+    'Attachment',
+    'PollGraph'
   ],
   defaultRules: [
     {
diff --git a/src/components/avatar.style.js b/src/components/user_avatar/avatar.style.js
index 812d45a4..812d45a4 100644
--- a/src/components/avatar.style.js
+++ b/src/components/user_avatar/avatar.style.js