split css from tailwind and fx studyList icon

platform/ui/src/assets/styles/styles.css

@@ -0,0 +1,28 @@
+/* CUSTOM OHIF SCROLLBAR */
+.ohif-scrollbar::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-track {
+  @apply rounded;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-thumb {
+  @apply rounded;
+  @apply bg-primary-main;
+}
+
+.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
+  @apply bg-primary-main;
+}
+
+/* TOOLTIP WORKAROUND FOR ARROW UP */
+.tooltip::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 14px;
+  height: 1px;
+  top: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+}

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -14,9 +14,12 @@ const StudyListTableRow = (props) => {
           })}
         >
           <div
-            className={classnames('w-full transition duration-300', {
-              'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isExpanded,
-            })}
+            className={classnames(
+              'w-full transition border-transparent duration-300',
+              {
+                'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isExpanded,
+              }
+            )}
           >
             <table className={classnames('w-full p-4')}>
               <tbody>

platform/ui/src/components/ThemeWrapper/ThemeWrapper.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../../gatsby-theme-docz/tailwind.css';
+import '../../assets/styles/styles.css';
 
 const ThemeWrapper = ({ children }) => (
   <React.Fragment>{children}</React.Fragment>

platform/ui/src/gatsby-theme-docz/tailwind.css

@@ -4,32 +4,3 @@
 
 /* IMPORT CUSTOM FONT */
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
-
-/* CUSTOM OHIF SCROLLBAR */
-.ohif-scrollbar::-webkit-scrollbar {
-  @apply w-2;
-}
-
-.ohif-scrollbar::-webkit-scrollbar-track {
-  @apply rounded;
-}
-
-.ohif-scrollbar::-webkit-scrollbar-thumb {
-  @apply rounded;
-  @apply bg-primary-main;
-}
-
-.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
-  @apply bg-primary-main;
-}
-
-/* TOOLTIP WORKAROUND FOR ARROW UP */
-.tooltip::before {
-  @apply bg-primary-dark absolute z-10;
-  content: '';
-  width: 14px;
-  height: 1px;
-  top: -1px;
-  left: 50%;
-  transform: translateX(-50%);
-}

platform/ui/src/views/StudyList/StudyList.mdx

@@ -197,8 +197,8 @@ components.
             content: (
               <>
                 <Icon
-                  name="series-active"
-                  className={classnames('inline-flex mr-2', {
+                  name="group-layers"
+                  className={classnames('inline-flex mr-2 w-4', {
                     'text-primary-active': isExpanded,
                     'text-secondary-light': !isExpanded,
                   })}