version dropdown font styling & spacing issues fixes

Author: rakeshAlgo

src/css/component-frame.css

@@ -1,45 +1,63 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
-  /* padding: 12px 15px 12px 15px; */
+  padding: 0 15px 0 15px;
   display: flex;
   /* align-items: center; */
   justify-content: center;
   position: relative;
 }
 
 .frame-icon {
-  padding: 12px 0 12px 15px;
+  padding: 12px 0 12px 0;
+  display: inline-block;
+  line-height: 1;
+}
+
+.frame-icon img {
+  width: 34px;
 }
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
   position: relative;
   padding-top: 12px;
   padding-bottom: 12px;
-  padding-right: 15px;
+  padding-right: 0;
   line-height: 2;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .frame-body .title {
-  margin: 0 4px 0 0;
+  margin: 0 0 0 0;
   font-size: var(--font-medium);
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
   display: inline-block;
+  word-break: break-word;
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+.frame-body .title span {
+  display: inline;
 }
 
 .component-frame .frame-link-dropdowns {
   display: inline-block;
   line-height: 1;
+  /* position: relative;
+  padding-bottom: 20px;
+  margin-bottom: -20px; */
 }
 
 .frame-body .frame-link {
   position: relative;
+  color: var(--color-brand-gray1);
+  font-size: 18px;
+  margin-left: 4px;
 }
 
 .frame-dropdown {
@@ -59,10 +77,13 @@
 .frame-link-dropdowns .frame-link {
   color: var(--color-brand-gray1);
   font-weight: var(--weight-semibold);
+  margin: 0;
+  font-family: "Source Sans Pro", sans-serif;
 }
 
 .frame-link-dropdowns .frame-link svg {
   color: var(--color-brand-black);
+  font-size: var(--font-base);
 }
 
 .frame-dropdown .frame-dropdown-list,

src/partials/nav-version-control.hbs

@@ -8,7 +8,10 @@
 <img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
 </div>
 <div class="frame-body">
-<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
+<h4 class="title">
+<span class="">
+{{{page.component.title}}}
+</span>
 <div class="frame-link-dropdowns">
 <a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span> <i class="fas fa-chevron-down"></i></a>
 <div class="frame-dropdown versions">
@@ -32,6 +35,8 @@
 </div>
 </div>
 </div>
+</h4>
+
 </div>
 </div>
 {{else}}
@@ -40,7 +45,7 @@
 <img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
 </div>
 <div class="frame-body">
-<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
+<h4 class="title"><span class="">{{{page.component.title}}}</span></h4>
 <a class="navbar-item component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
 </div>
 </div>