icon styling and media query update

RedHatInsights · Jan 8, 2021 · 5a0855a · 5a0855a
1 parent 8c3d614
commit 5a0855a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/src/js/App/Header/AppFilter.js b/src/js/App/Header/AppFilter.js
@@ -37,7 +37,7 @@ const getIcon = (id) =>
     'cost-management': <img src={costManagement} alt="Cost Management Logo" />,
     migrations: <img src={migrationsNamespace} alt="Migration Services Logo" />,
     ansible: <img src={ansible} alt="Automation Logo" />,
-    settings: <CogIcon className="ins-c-app-filter-app-icon" />,
+    settings: <CogIcon className="icon-gray" />,
     subscriptions: <img src={`${insights.chrome.isBeta() ? '/beta' : ''}/apps/landing/fonts/Subscriptions.svg`} alt="Subscriptions Logo" />,
   }[id]);
 

diff --git a/src/js/App/Header/AppFilter.scss b/src/js/App/Header/AppFilter.scss
@@ -4,13 +4,6 @@
     max-width: 250px;
 }
 
-.ins-c-app-filter-app-icon {
-    height: 48px;
-    width: 48px;
-    color: var(--pf-global--disabled-color--200);
-
-}
-
 @media screen and (max-width: 998px) { 
    .ins-c-page__app-filter-toggle {
       display: none;
@@ -36,17 +29,12 @@
         margin-top: var(--pf-global--spacer--xl);
         column-gap: 0;
     }
-    @media screen and (min-width: 768px) { 
-      div.gallery {
-        column-count: 1;
-      }
-    }
-    @media screen and (min-width: 992px) { 
+    @media screen and (max-width: 1374px) { 
       div.gallery {
         column-count: 2;
       }
     }
-    @media screen and (min-width: 1300px) { 
+    @media screen and (min-width: 1375px) { 
       div.gallery {
         column-count: 3;
       }
@@ -62,6 +50,13 @@
                 img {
                     width: var(--pf-global--icon--FontSize--xl);
                 }
+                svg {
+                    height: 48px;
+                    width: 48px;
+                }
+                .icon-gray {
+                    color: var(--pf-global--palette--black-300);
+                }
             }
             .pf-l-split__item {
                 h4 {