feat: address review changes

Author: anshg1214

Diff for: frontend/css/listens-page.less

@@ -186,7 +186,7 @@
     .listen-time {
       font-style: italic;
       font-size: 80%;
-      color: #8d8d8d;
+      color: @light-grey;
       white-space: nowrap;
       text-align: end;
     }
@@ -240,7 +240,7 @@
       justify-content: space-around;
       position: relative; // This is need for dropdown menu positioning
       margin-left: auto; // align flexbox item at flex-end
-      color: #8d8d8d;
+      color: @light-grey;
 
       > button,
       > .btn {
@@ -262,7 +262,7 @@
       .love,
       .hate {
         color: transparent;
-        stroke: #8d8d8d;
+        stroke: @light-grey;
         &:hover {
           color: transparent;
         }
@@ -383,15 +383,15 @@
     }
 
     .listen-controls > .icon-only {
-      color: #8d8d8d;
+      color: @light-grey;
       width: 2em;
       min-width: 2em;
       margin-left: 0;
       margin-right: 0.5em;
       padding: 0;
     }
     .play-button {
-      color: #8d8d8d;
+      color: @light-grey;
       &.playing {
         color: @orange;
       }

Diff for: frontend/css/main.less

@@ -1,6 +1,6 @@
-@import "scaffolding.less";
 @import "theme/theme.less";
 @import "colors.less";
+@import "scaffolding.less";
 @import "homepage.less";
 @import "listens-page.less";
 @import "pinned-recordings.less";

Diff for: frontend/css/playlists.less

@@ -185,7 +185,7 @@
     .info {
       display: flex;
       flex-wrap: wrap;
-      color: #8d8d8d;
+      color: @light-grey;
       margin: 0.5em 0;
       > * {
         padding: 0 0.7em;
@@ -194,7 +194,7 @@
   }
 
   #add-track {
-    background-color: @orange;
+    background-color: @orange !important;
     > *:first-child {
       display: flex;
       align-items: center;

Diff for: frontend/css/scaffolding.less

@@ -1,5 +1,3 @@
-@blue: #353070;
-
 html {
   font-size: 10px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -223,6 +221,17 @@ ol {
 .btn-info.disabled,
 .btn-info:disabled {
   background-color: #3f3c64;
-  border-color: #353070;
+  border-color: @blue;
   cursor: not-allowed;
 }
+
+.form-text {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  color: #8c8674;
+}
+
+a:hover,
+a:focus {
+  text-decoration: none;
+}

Diff for: frontend/css/timeline.less

@@ -30,7 +30,7 @@
         display: flex;
         flex-wrap: wrap;
         .event-time {
-          color: #8d8d8d;
+          color: @light-grey;
           // position: absolute;
           // right:0;
           font-size: 0.8em;

Diff for: frontend/js/src/album/AlbumPage.tsx

@@ -224,7 +224,7 @@ export default function AlbumPage(): JSX.Element {
           width={200}
         />
         <br />
-        <div className="help-block small mb-15">
+        <div className="form-text small mb-15">
           Broken CD by{" "}
           <a href="https://www.vecteezy.com/members/amandalamsyah/uploads">
             amandalamsyah on Vecteezy
@@ -302,7 +302,7 @@ export default function AlbumPage(): JSX.Element {
                 );
               })}
             </div>
-            <small className="help-block">
+            <small className="form-text">
               {type}
               {type && album?.date ? " - " : ""}
               {album?.date}

Diff for: frontend/js/src/artist/ArtistPage.tsx

@@ -311,7 +311,7 @@ export default function ArtistPage(): JSX.Element {
         <div className="artist-info">
           <h1>{artist?.name}</h1>
           <div className="details">
-            <small className="help-block">
+            <small className="form-text">
               {artist?.begin_year}
               {Boolean(artist?.end_year) && ` — ${artist?.end_year}`}
               <br />

Diff for: frontend/js/src/cb-review/CBReviewModal.tsx

@@ -695,7 +695,6 @@ export default NiceModal.create((props: CBReviewModalProps) => {
               <img
                 src="/static/img/critiquebrainz-logo.svg"
                 height="30"
-                className="cb-img-fluid"
                 alt="CritiqueBrainz Logo"
                 style={{ margin: "8px" }}
               />

Diff for: frontend/js/src/playlists/Playlist.tsx

@@ -448,19 +448,19 @@ export default function PlaylistPage() {
                 <>&nbsp;-&nbsp;{totalDurationForDisplay}</>
               )}
             </div>
-            <small className="help-block">
+            <small className="form-text">
               <div>Created: {new Date(playlist.date).toLocaleString()}</div>
             </small>
             {customFields?.last_modified_at && (
-              <small className="help-block">
+              <small className="form-text">
                 <div>
                   Last modified:{" "}
                   {new Date(customFields.last_modified_at).toLocaleString()}
                 </div>
               </small>
             )}
             {customFields?.copied_from && (
-              <small className="help-block">
+              <small className="form-text">
                 <div>
                   Copied from:
                   <a href={sanitizeUrl(customFields.copied_from)}>
@@ -544,7 +544,7 @@ export default function PlaylistPage() {
       <div
         id="playlist"
         data-testid="playlist"
-        className="col-md-8 col-md-offset-2"
+        className="col-md-8 offset-md-2"
       >
         <div className="header">
           <h3 className="header-with-line">

Diff for: frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx

@@ -363,7 +363,7 @@ export default NiceModal.create(
             </div>
             <div className="modal-body">
               <div>
-                <p className="small help-block text-left">
+                <p className="small form-text text-left">
                   Search by album/artist name or paste a{" "}
                   <a href="https://musicbrainz.org/doc/About">
                     MusicBrainz URL or MBID
@@ -598,7 +598,7 @@ export default NiceModal.create(
               >
                 Link listens
               </button>
-              <div className="small help-block text-left">
+              <div className="small form-text text-left">
                 <div>
                   <FontAwesomeIcon icon={faInfoCircle} />
                   &nbsp;

Diff for: frontend/js/src/user/components/AddSingleListen.tsx

@@ -152,7 +152,7 @@ export default function AddSingleListen({
                       className="collapse"
                       id={`collapsible-${recording.id}`}
                     >
-                      <div className="help-block">
+                      <div className="form-text">
                         Too many choices? See more details{" "}
                         <a
                           href={`https://musicbrainz.org/recording/${recording.id}`}

Diff for: frontend/js/src/user/playlists/components/ImportJSPFPlaylistModal.tsx

@@ -177,7 +177,7 @@ export default NiceModal.create(() => {
                 onChange={handleFileChange}
               />
               {fileError && <div className="has-error">{fileError}</div>}
-              <p className="help-block">
+              <p className="form-text">
                 For information on the JSPF playlist format, please visit{" "}
                 <a href="https://musicbrainz.org/doc/jspf">
                   musicbrainz.org/doc/jspf