improve css for no YIM generated message

metabrainz · Jan 6, 2024 · 1325a9d · 1325a9d
1 parent ef03e6e
commit 1325a9d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/frontend/css/year-in-music.less b/frontend/css/year-in-music.less
@@ -207,6 +207,13 @@
         min-height: 20vh;
       }
     }
+    .no-yim-message {
+      margin: 4vh auto;
+      font-family: "Roboto", sans-serif;
+      font-weight: 300;
+      font-size: 24px;
+      max-width: 480px;
+    }
     .header {
       margin-bottom: 1em;
       text-align: center;

diff --git a/frontend/js/src/explore/year-in-music/2023/YearInMusic.tsx b/frontend/js/src/explore/year-in-music/2023/YearInMusic.tsx
@@ -602,22 +602,25 @@ export default class YearInMusic extends React.Component<
                 style={{
                   WebkitMaskImage:
                     "url('/static/img/year-in-music-23/flower.png')",
+                  marginTop: "6vh",
                 }}
               >
                 <img
                   src="/static/img/year-in-music-23/flower.png"
                   alt="Your year in music 2023"
                 />
               </span>
-              <p className="center-p">Oh no!</p>
-              <p className="center-p">
-                We don&apos;t have enough 2023 statistics for {user.name}.
-              </p>
-              <p className="center-p">
-                <a href="/profile/music-services/details/">Submit</a> enough
-                listens before the end of December to generate your #yearinmusic
-                next year.
-              </p>
+              <div className="no-yim-message">
+                <p className="center-p">Oh no!</p>
+                <p className="center-p">
+                  We don&apos;t have enough 2023 statistics for {user.name}.
+                </p>
+                <p className="center-p">
+                  <a href="/profile/music-services/details/">Submit</a> enough
+                  listens before the end of December to generate your
+                  #yearinmusic next year.
+                </p>
+              </div>
             </>
           )}
           <div className="user-name">{user.name}</div>