ux: worked on add panel function

public/sass/components/_panel_add_panel.scss

@@ -0,0 +1,41 @@
+
+.add-panel {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow: hidden;
+  height: 100%;
+  align-content: flex-start;
+  justify-content: space-around;
+  padding: 3px 0;
+}
+
+.add-panel__item {
+  background: $card-background;
+  box-shadow: $card-shadow;
+
+  border: $panel-border;
+  padding: $spacer/3 $spacer;
+  width: 31%;
+  height: 60px;
+  text-align: center;
+  margin: $gf-form-margin;
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    background: $card-background-hover;
+  }
+}
+
+.add-panel__item-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: $font-size-sm;
+}
+
+.add-panel__item-img {
+  height: calc(100% - 15px);
+}
+

public/sass/components/_row.scss

@@ -101,127 +101,3 @@ $dashboard-row-height: 30px;
   right: 0;
 }
 
-.panels-wrapper {
-  flex-grow: 1;
-  position: relative;
-}
-
-.dash-row-dropview {
-  position: relative;
-  background:  $panel-bg;
-  border: $panel-border;
-  margin: 0 $panel-margin $panel-margin*2 $panel-margin;
-  padding: $panel-margin*2;
-  display: flex;
-}
-
-.dash-row-dropview-close {
-  position: absolute;
-  right: -12px;
-  top: -10px;
-  width: 20px;
-  height: 20px;
-}
-
-.add-panel-panels-scroll {
-  width: 100%;
-  overflow: auto;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none
-  }
-}
-
-.add-panel-panels {
-  display: flex;
-  flex-direction: row;
-}
-
-.add-panel-item {
-  background: $input-label-bg;
-  border: $panel-border;
-  padding: $spacer/3 $spacer;
-  min-width: 9rem;
-  max-width: 9rem;
-  text-align: center;
-  margin: $gf-form-margin;
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 1px rgba(82,168,236,5.8)
-  }
-}
-
-.add-panel-item-name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: $font-size-sm;
-}
-
-.add-panel-item-img {
-  width: 2rem;
-}
-
-$dash-row-menu-animation-speed: 0.20s;
-
-.dash-row-menu-container {
-  position: absolute;
-  top: 0px;
-  width: 138px;
-  min-height: 100%;
-  transform: translate(-131px, 0);
-  transition: 0.1s ease-out 0.4s;
-  z-index: 0;
-  display: flex;
-  flex-direction: row;
-
-  &:hover {
-    transform: translate(-$panel-margin, 0);
-    transition: $dash-row-menu-animation-speed ease-in 0.05s;
-    z-index: 101;
-
-    .dash-row-menu-grip {
-      opacity: 0;
-      transition: $dash-row-menu-animation-speed ease-in 0.05s;
-    }
-  }
-}
-
-.dash-row-menu {
-  list-style: none;
-  flex-grow: 1;
-  box-shadow: $menu-dropdown-shadow;
-  background: $menu-dropdown-bg;
-
-  li a {
-    display: block;
-    white-space: nowrap;
-    color: $dropdownLinkColor;
-    font-size: $font-size-sm;
-    padding: $spacer/2 $spacer;
-    border-left: 2px solid $menu-dropdown-bg;
-    i {
-      display: inline-block;
-      padding-right: $spacer/2;
-    }
-
-    &:hover {
-      @include left-brand-border-gradient();
-      color: $link-color;
-      background: $input-label-bg;
-    }
-  }
-}
-
-.dash-row-menu-grip {
-  text-align: center;
-  font-size: 130%;
-  color: $text-color-weak;
-  opacity: 1;
-  transition: $dash-row-menu-animation-speed ease-out 0.5s;
-  width: 1rem;
-}
-

public/sass/components/_sidemenu.scss

@@ -169,7 +169,7 @@ li.sidemenu-org-switcher {
   img {
     width: 30px;
     position: relative;
-    top: 3px;
+    top: 5px;
     left: 4px;
   }
 }