Minor layout changes on playlist pages

ThraxHamilton · May 6, 2019 · abac357 · abac357
1 parent c9bd818
commit abac357
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/app/components/PlaylistView/index.js b/app/components/PlaylistView/index.js
@@ -112,6 +112,7 @@ class PlaylistView extends React.Component {
           />
         </div>
         <div className={styles.playlist_header}>
+          <label className={styles.playlist_header_label}>Playlist</label>
           <div className={styles.playlist_name}>
             { playlist.name }
             <InputDialog
@@ -131,7 +132,6 @@ class PlaylistView extends React.Component {
               }
             />
           </div>
-          <Spacer />
           <div className={styles.playlist_buttons}>
             { this.renderPlayButton() }
             { this.renderOptions(popupTrigger, playlist) }

diff --git a/app/components/PlaylistView/styles.scss b/app/components/PlaylistView/styles.scss
@@ -25,15 +25,24 @@
     display: flex;
     width: 100%;
     flex-flow: column;
+    justify-content: flex-end;
     margin: 0 2rem;
   }
+
+  .playlist_header_label {
+    font-variant: all-small-caps;
+    letter-spacing: 2px;
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
 
   .playlist_name {
     display: flex;
     align-items: center;
-    margin: 0 1rem 1rem 0;
-    font-size: 32px;
-    line-height: 32px;
+    margin: 0 1rem 2rem 0;
+    font-size: 40px;
+    line-height: 40px;
+    font-weight: bold;
 
     button {
       margin-left: 1rem;