From ec88bef166c7dbf06bebbf7aa5a8927abbd370fc Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Mon, 5 Jun 2023 01:56:46 +0300
Subject: [PATCH] Status: extract styles

---
 src/components/Player/Status/Status.jsx         |  6 ++++--
 src/components/Player/Status/Status.module.scss | 17 +++++++++++++++++
 src/components/Player/player.css                | 16 ----------------
 src/style/base.scss                             |  5 -----
 4 files changed, 21 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Player/Status/Status.module.scss

diff --git a/src/components/Player/Status/Status.jsx b/src/components/Player/Status/Status.jsx
index e409b9c..2a17f86 100644
--- a/src/components/Player/Status/Status.jsx
+++ b/src/components/Player/Status/Status.jsx
@@ -1,7 +1,9 @@
 import { Link } from 'wouter-preact'
 
+import * as s from './Status.module.scss'
+
 const fail = (details) => (
-  <div className='status fail'>
+  <div className={[s.status, s.fail].join(' ')}>
     <h1>
       Error
     </h1>
@@ -22,7 +24,7 @@ const fail = (details) => (
 )
 
 const loading = (details) => (
-  <div className='status loading'>
+  <div className={[s.status, s.loading].join(' ')}>
     {details.map((x) => (<div key={x}>{x}</div>))}
   </div>
 )
diff --git a/src/components/Player/Status/Status.module.scss b/src/components/Player/Status/Status.module.scss
new file mode 100644
index 0000000..494caaf
--- /dev/null
+++ b/src/components/Player/Status/Status.module.scss
@@ -0,0 +1,17 @@
+@keyframes dots0123 {
+  0%   { content: ''; }
+  33%  { content: '.'; }
+  66%  { content: '..'; }
+  100% { content: '...'; }
+}
+
+.status {
+  padding: var(--inner-padding);
+  word-break: break-word;
+
+  &.loading > div:after {
+    animation: dots0123 1s infinite;
+    content: '';
+  }
+}
+
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index c1d5bd3..14ad3a6 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -111,19 +111,3 @@
 .ifplayer .output .textBuffer .message.subheader {
   color: var(--accent-color);
 }
-
-.status {
-  padding: var(--inner-padding);
-}
-
-.status.loading > div:after {
-  animation: dots0123 1s infinite;
-  content: '';
-}
-
-@keyframes dots0123 {
-  0%   { content: ''; }
-  33%  { content: '.'; }
-  66%  { content: '..'; }
-  100% { content: '...'; }
-}
diff --git a/src/style/base.scss b/src/style/base.scss
index a53ec8e..4e42dcb 100644
--- a/src/style/base.scss
+++ b/src/style/base.scss
@@ -45,8 +45,3 @@ html, body {
     max-width: 800px;
   }
 }
-
-.status {
-  padding: var(--inner-padding);
-  word-break: break-word;
-}