From dcbc41f9c10c3eec0ded346ac1f3c40f056b46c1 Mon Sep 17 00:00:00 2001
From: Joe Gregory <jgregory@newrelic.com>
Date: Mon, 3 Jan 2022 15:52:12 -0800
Subject: [PATCH] fix: Icon title, searchinput background, DM text color &
 styling

---
 src/components/PackTile.js         | 13 +++++++++++-
 src/components/SegmentedControl.js |  1 +
 src/pages/instant-observability.js | 34 +++++++++---------------------
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
index 4a88c8913..dcd30d7ec 100644
--- a/src/components/PackTile.js
+++ b/src/components/PackTile.js
@@ -78,6 +78,10 @@ const PackTile = ({
           margin-bottom: 1em;
           flex-direction: row;
         `}
+
+        @media screen and (max-width: 760px) {
+          flex-direction: row;
+        }
       `}
       onClick={() => handlePackClick(id)}
     >
@@ -104,6 +108,10 @@ const PackTile = ({
               display: none;
             }
           `}
+
+          @media screen and (max-width: 760px) {
+            display: none;
+          }
         `}
       />
       <div
@@ -134,7 +142,6 @@ const PackTile = ({
         </p>
       </div>
       <div
-        className="tag-div"
         css={css`
           padding: 1em;
           display: flex;
@@ -147,6 +154,10 @@ const PackTile = ({
           span {
             color: var(--color-brand-500);
           }
+          @media screen and (max-width: 760px) {
+            flex-direction: column;
+            justify-content: flex-end;
+          }
         `}
       >
         {featured && (
diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js
index d8980f6b0..4d8af268d 100644
--- a/src/components/SegmentedControl.js
+++ b/src/components/SegmentedControl.js
@@ -50,6 +50,7 @@ const SegmentedControl = ({ items, onChange, className }) => {
             `}
           >
             <Icon
+              title={value}
               css={css`
                 margin-top: 4px;
                 font-size: 2em;
diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
index 025fafd8f..d5a8b985b 100644
--- a/src/pages/instant-observability.js
+++ b/src/pages/instant-observability.js
@@ -311,7 +311,7 @@ const QuickstartsPage = ({ data, location }) => {
               .dark-mode & {
                 background-color: var(--tertiary-background-color);
                 input {
-                  background: var(--color-dark-500);
+                  background: var(--color-dark-400);
 
                   &::placeholder {
                     color: var(primary-text-color);
@@ -470,6 +470,8 @@ const QuickstartsPage = ({ data, location }) => {
 
           <div
             css={css`
+              --text-color: var(--primary-text-color);
+
               padding: 1.25rem 0;
               font-size: 16px;
               color: var(--color-neutrals-800);
@@ -477,16 +479,16 @@ const QuickstartsPage = ({ data, location }) => {
               justify-content: space-between;
               align-text: center;
 
+              span {
+                color: var(--text-color);
+              }
+
               strong {
-                color: var(--color-neutrals-700);
+                color: var(--text-color);
               }
             `}
           >
-            <span
-              css={css`
-                color: var(--primary-text-color);
-              `}
-            >
+            <span>
               Showing {filteredQuickstarts.length} results for:{' '}
               <strong>{search || getDisplayName()}</strong>
             </span>
@@ -526,19 +528,6 @@ const QuickstartsPage = ({ data, location }) => {
             />
             {filteredQuickstarts.map((pack) => (
               <PackTile
-                css={css`
-                  @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
-                    flex-direction: row;
-
-                    img {
-                      display: none;
-                    }
-                    .tag-div {
-                      flex-direction: column;
-                      justify-content: flex-end;
-                    }
-                  }
-                `}
                 key={pack.id}
                 view={view}
                 featured={pack.keywords?.includes('featured')}
@@ -609,10 +598,7 @@ const Label = ({ children, htmlFor }) => (
       font-size: 1rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
-
-      .light-mode & {
-        color: var(--color-neutrals-800);
-      }
+      color: var(--color-neutrals-800);
     `}
   >
     {children}