style cleanup + tweaks

Title <> Subtitle relationships
Animat ein

client/src/common/components/views/TitleCard.jsx

@@ -0,0 +1,14 @@
+import style from './TitleCard.module.css';
+
+export default function TitleCard(props) {
+  const { label, title, subtitle, presenter } = props;
+
+  return (
+    <>
+      <div className={style.label}>{label}</div>
+      <div className={style.title}>{title}</div>
+      <div className={style.presenter}>{presenter}</div>
+      <div className={style.subtitle}>{subtitle}</div>
+    </>
+  );
+}

client/src/common/components/views/TitleCard.module.css

@@ -0,0 +1,41 @@
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.title,
+.subtitle,
+.presenter {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title {
+  color: #ddd;
+  font-size: 2.5vw;
+  flex: 1;
+  font-weight: 600;
+
+}
+
+.subtitle,
+.presenter {
+  color: #aaa;
+}
+
+.subtitle {
+  font-size: 1.5vw;
+  font-weight: 200;
+  margin-top: -0.8vh;
+}
+
+.presenter {
+  font-size: 2vw;
+}
+
+.title:after,
+.presenter:after,
+.subtitle:after {
+  content: '\200b';
+}

client/src/common/components/views/TitleSide.jsx

@@ -0,0 +1,18 @@
+import style from './TitleSide.module.css';
+
+export default function TitleSide(props) {
+  const { type, label, title, subtitle, presenter } = props;
+
+  const titleStyle = type === 'next' ? style.nextTitle : style.nowTitle;
+  const subStyle = type === 'next' ? style.nextSubtitle : style.nowSubtitle;
+  const presStyle = type === 'next' ? style.nextPresenter : style.nowPresenter;
+
+  return (
+    <>
+      <div className={style.label}>{label}</div>
+      <div className={titleStyle}>{title}</div>
+      <div className={presStyle}>{presenter}</div>
+      <div className={subStyle}>{subtitle}</div>
+    </>
+  );
+}

client/src/common/components/views/TitleSide.module.css

@@ -0,0 +1,54 @@
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.nowTitle,
+.nextTitle {
+  color: #ddd;
+  font-weight: 600;
+}
+
+.nowSubtitle,
+.nowPresenter,
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+}
+
+.nowTitle {
+  font-size: 2.5vw;
+}
+
+.nowPresenter {
+  font-size: 2vw;
+  font-weight: 400;
+}
+
+.nowSubtitle {
+  font-size: 1.2vw;
+  margin-top: -1vh;
+}
+
+.nextTitle {
+  font-size: 2vw;
+}
+
+.nextSubtitle {
+  margin-top: -0.8vh;
+  font-size: 1.1vw;
+}
+
+.nextPresenter {
+  font-weight: 400;
+  font-size: 1.5vw;
+}
+
+.nowTitle:after,
+.nowSubtitle:after,
+.nowPresenter:after,
+.nextTitle:after,
+.nextSubtitle:after,
+.nextPresenter:after {
+  content: '\200b';
+}

client/src/common/state/Empty.module.css

@@ -1,16 +1,17 @@
 .emptyContainer {
-  text-align: center;
-  color: rgba(0, 0, 0, 0.17);
-  font-weight: 600;
-  font-size: 2em;
   width: 100%;
+  text-align: center;
 }
+
 .empty {
   width: 100%;
   margin: auto 0;
+  margin-top: 10vh;
   opacity: 0.3;
 }
 
 .text {
-  text-align: center;
+  color: rgba(0, 0, 0, 0.17);
+  font-weight: 600;
+  font-size: 2em;
 }