UI Enhancements: Header Menu Item Switch and Dropdown Section Right B…

…order
open-template-hub · Sep 1, 2021 · f4847d4 · f4847d4
1 parent 17367d5
commit f4847d4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -88,6 +88,10 @@
   display: flex;
 }
 
+.section-column {
+  border-right: 0.5px dotted var(--contrast);
+}
+
 @media only screen and (max-width: 999px) {
   .dropdown-content {
     display: block;

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -8,13 +8,13 @@ <h2>Open Template Hub</h2>
     <a (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
       <app-dropdown-menu #dropdownMenuProducts [options]="PRODUCT_LINES">
         <span>Products</span>
-        <i aria-hidden="true" class="material-icons">expand_more</i>
+        <i aria-hidden="true" class="material-icons">{{dropdownMenuProducts.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
       </app-dropdown-menu>
     </a>
     <a (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
       <app-dropdown-menu #dropdownMenuServices [options]="SERVICES">
         <span>Services</span>
-        <i aria-hidden="true" class="material-icons">expand_more</i>
+        <i aria-hidden="true" class="material-icons">{{dropdownMenuServices.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
       </app-dropdown-menu>
     </a>
     <a routerLink="{{URLS.pricing}}"

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss
@@ -53,8 +53,8 @@ app-dropdown-menu i {
 }
 
 .top-nav a i {
-  font-size: 22px;
-  margin: 0.35em 0.35em 0.35em 0;
+  font-size: 24px;
+  margin-left: .05em;
 }
 
 @media only screen and (max-width: 999px) {

diff --git a/src/styles/theme/themes.scss b/src/styles/theme/themes.scss
@@ -23,7 +23,7 @@
 
   // background
   --background-color-light-mode: white;
-  --background-color-alpha-light-mode: rgba(255, 255, 255, 0.85);
+  --background-color-alpha-light-mode: rgba(255, 255, 255, 0.93);
   --card-light-mode: #fefffe;
 
   --shadow-light-mode: rgba(155, 155, 155, 0.5);