settings page layout update

src/i18n/en_US.json

@@ -392,6 +392,7 @@
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
   "settings.option.visual.transparent": "Transparent frame",
   "settings.option.visual.transparent.description": "Transparent frame (needs Theme Support , requires relaunch)",
+  "settings.header.advanced": "Advanced",
   "spatial.notTurnedOn": "Audio Spatialization is disabled. To use, please enable it first.",
   "spatial.spatialProperties": "Spatial Properties",
   "spatial.width": "Width",
@@ -414,5 +415,15 @@
   "settings.header.unfinished": "Unfinished",
   "remote.web.title": "Cider Remote",
   "remote.web.description": "Scan the QR code to pair your phone up with this Cider instance",
+  "share.platform.twitter.tweet": "Listen to {{song}} on Apple Music.\n\n{{url}}\n\n#AppleMusic #Cider",
+  "share.platform.twitter": "Twitter",
+  "share.platform.facebook": "Facebook",
+  "share.platform.reddit": "Reddit",
+  "share.platform.telegram": "Telegram",
+  "share.platform.whatsapp": "WhatsApp",
+  "share.platform.messenger": "Messenger",
+  "share.platform.email": "Email",
+  "share.platform.songLink": "Copy with song.link",
+  "share.platform.clipboard": "Copy Link",
   "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors."
 }

src/i18n/source/en_US.json

@@ -392,6 +392,7 @@
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
   "settings.option.visual.transparent": "Transparent frame",
   "settings.option.visual.transparent.description": "Transparent frame (needs Theme Support , requires relaunch)",
+  "settings.header.advanced": "Advanced",
   "spatial.notTurnedOn": "Audio Spatialization is disabled. To use, please enable it first.",
   "spatial.spatialProperties": "Spatial Properties",
   "spatial.width": "Width",

src/renderer/less/bootstrap.less

@@ -2350,6 +2350,33 @@ fieldset:disabled .btn {
 
 // Tabs
 
+.nav {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+}
+
+.nav-link:hover, .nav-link:focus {
+  text-decoration: none;
+}
+
+.nav-link.disabled {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: default;
+}
+
+
 .nav-tabs {
   border-bottom: 1px solid #dee2e6;
 }
@@ -2382,14 +2409,22 @@ fieldset:disabled .btn {
 }
 
 .nav-pills .nav-link {
-  background: none;
+  background-color: transparent;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: 50px;
+  color: #eee;
+  -webkit-user-drag: none;
+  transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
+  font-weight: 500;
+  &:hover {
+    transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
+    background-color: var(--hover);
+  }
 }
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: #fff;
-  background-color: #0d6efd;
+  background-color: var(--selected);
 }
 
 .nav-fill > .nav-link,

src/renderer/less/pages.less

@@ -827,6 +827,11 @@
 .settings-page {
   padding: 0px;
 
+  .nav {
+    width: 90%;
+    margin: 16px auto 0px;
+  }
+
   .md-option-header {
     padding      : 1.25em 1.25em;
     border-bottom: unset;