fix(client): sidebar font & profile placeholders (freeCodeCamp#65974)

Author: raisedadead

client/src/client-only-routes/show-settings.css

@@ -13,18 +13,37 @@
   padding-left: 0;
 }
 
-.settings-sidebar-nav ul li {
+.settings-sidebar-nav > ul > li {
   margin-bottom: 0.5rem;
 }
 
+.settings-sidebar-nav ul ul li {
+  margin-bottom: 0.15rem;
+}
+
 .settings-sidebar-nav {
   flex: 1;
   position: sticky;
   top: var(--header-height);
   padding: 1rem 0;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: calc(100vh - var(--header-height));
   border-right: 3px solid var(--tertiary-background);
+  scrollbar-width: thin;
+  scrollbar-color: var(--quaternary-background) var(--secondary-background);
+}
+
+.settings-sidebar-nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+.settings-sidebar-nav::-webkit-scrollbar-track {
+  background: var(--secondary-background);
+}
+
+.settings-sidebar-nav::-webkit-scrollbar-thumb {
+  background-color: var(--quaternary-background);
+  border-radius: 3px;
 }
 
 .settings-sidebar-nav .sidebar-nav-section-heading {
@@ -43,6 +62,7 @@
   text-decoration: none;
   cursor: pointer;
   padding: 0 1rem 0rem 2rem;
+  font-size: 0.85rem;
 }
 
 .settings-sidebar-nav .sidebar-nav-section-heading.active,

client/src/components/profile/components/about.tsx

@@ -180,6 +180,7 @@ const AboutSettings = ({
                 type='text'
                 value={formValues.name}
                 id='about-name-input'
+                placeholder='Camper Bot'
               />
             </FormGroup>
             <FormGroup controlId='about-location'>
@@ -191,6 +192,7 @@ const AboutSettings = ({
                 type='text'
                 value={formValues.location}
                 id='about-location-input'
+                placeholder='San Francisco, CA'
               />
             </FormGroup>
             <FormGroup controlId='about-picture'>
@@ -202,6 +204,7 @@ const AboutSettings = ({
                 type='url'
                 value={formValues.picture}
                 id='about-picture-input'
+                placeholder='https://github.com/ghost.png'
               />
               {!isPictureUrlValid && (
                 <ShowImageValidationWarning
@@ -218,6 +221,7 @@ const AboutSettings = ({
                 onChange={handleAboutChange}
                 value={formValues.about}
                 id='about-about-input'
+                placeholder='A short bio about yourself'
               />
             </FormGroup>
           </div>