v1.6.0/giphy ui overhaul

app/src/index.css

@@ -155,6 +155,7 @@ body.peacock.visible .playback-header__container {
 /* GOOGLE PLAY STYLING */
 body.googleplay.visible {
   overflow: hidden;
+  -webkit-font-smoothing: initial !important;
 }
 body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege {
   padding: 0 !important;
@@ -511,40 +512,6 @@ textarea::-webkit-scrollbar {
   color: inherit !important;
   font-size: 10px !important;
 }
-
-.giphy-carousel::before {
-  position: relative;
-  bottom: 90px;
-  margin-left: 40px;
-  content: url('./Giphy.png');
-}
-.giphy-carousel {
-  margin-top: 1rem;
-  min-height: fit-content;
-  padding-bottom: 3rem;
-}
-.giphy-carousel img {
-  border-radius: 1rem;
-  transform: scale(0.85);
-  transition: all ease-in-out 0.2s;
-  opacity: 0.7;
-}
-.giphy-carousel img:hover {
-  opacity: 1;
-  transform: scale(0.9);
-}
-
-.giphy-carousel::-webkit-scrollbar {
-  width: 5px;
-  height: 12px;
-}
-.giphy-carousel::-webkit-scrollbar-track {
-  background-color: rgb(90, 90, 90);
-}
-.giphy-carousel::-webkit-scrollbar-thumb {
-  background-color: #c0f300;
-  border-radius: 13px;
-}
 .message-send svg {
   transform: scale(0.55);
   transition: all ease 0.5s !important;
@@ -568,18 +535,24 @@ textarea::-webkit-scrollbar {
 }
 .text-phone-panel .gif-button.gif-close {
   padding: 12px 0 !important;
+  max-height: 100%;
+  margin-left: -5px;
 }
 .text-phone-panel .gif-button {
   border-radius: 0 !important;
   height: 1.75em !important;
+  padding: 0 6px;
+  border-radius: 26px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 .text-phone-panel .gif-button svg {
-  width: 1.75em !important;
-  height: 1.75em !important;
+  width: 32px !important;
+  height: 32px !important;
 }
 .text-phone-panel .gif-button.gif-close svg {
-  width: 2em !important;
-  height: 1.5em !important;
+  height: 25px !important;
+  width: 25px !important;
 }
 
 .MuiTooltip-popper {
@@ -732,3 +705,59 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 .replying-to-card button {
   align-self: flex-start;
 }
+.giphy-list-wrapper {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden;
+  padding: 15px;
+}
+
+.giphy-search-form {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+button.giphy-list-item {
+  display: inline-block;
+  position: relative !important;
+  max-width: 49%;
+  height: fit-content;
+  vertical-align: top;
+  width: 50%;
+  top: unset !important;
+  overflow: hidden;
+  background: unset !important;
+  left: unset !important;
+  cursor: pointer;
+  outline: none !important;
+  border: none !important;
+}
+
+.giphy-list-item img {
+  height: 100%;
+  margin: 5px;
+  width: 100%;
+  max-width: 100%;
+}
+
+.giphy-wrapper > div:nth-child(3) {
+  position: absolute;
+  bottom: 0;
+  color: black;
+  background: #1b1b1b;
+  padding: 5px 15px;
+  padding-right: 25px;
+  border-top-right-radius: 26px;
+  padding-top: 15px;
+}
+.giphy-wrapper > div:nth-child(3) > img {
+  filter: invert(1);
+  mix-blend-mode: screen;
+  vertical-align: unset;
+  max-height: 20px;
+}
+
+.giphy-wrapper > .giphy-list-wrapper > div > div:nth-child(1) {
+  width: 100% !important;
+}