[SG-345] Switch in-line "+" add org button to more explicit version (#1703)

* switch in-line plus add org button to more explicit version

* Add spaces to line up text better

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -14,7 +14,7 @@
           <span class="filter-buttons">
             <a href="#" routerLink="/create-organization" class="filter-button">
               <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              {{ "newOrganization" | i18n }}
+              &nbsp;{{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,14 +45,6 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
-        <a
-          href="#"
-          routerLink="/create-organization"
-          class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'newOrganization' | i18n }}"
-        >
-          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li
@@ -75,6 +67,14 @@
             </ng-container>
           </span>
         </li>
+        <li class="filter-option">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
       </ul>
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
@@ -110,15 +110,6 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
-        <a
-          href="#"
-          routerLink="/create-organization"
-          class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'newOrganization' | i18n }}"
-          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
-        >
-          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
@@ -149,6 +140,14 @@
             </ng-container>
           </span>
         </li>
+        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
       </ul>
     </ng-container>
   </ng-container>

src/scss/vault-filters.scss

@@ -14,14 +14,6 @@
     font-size: $font-size-base;
   }
 
-  a.create-organization-link {
-    &:hover {
-      @include themify($themes) {
-        color: themed("iconHover") !important;
-      }
-    }
-  }
-
   button {
     @extend .no-btn;
   }