lit-style for dasboard cards, remove unneccessary classes in header

src/components/Header/Header.tsx

@@ -41,9 +41,9 @@ const Header: React.FC<HeaderProps> = () => {
                         key={app.name}
                         to={app.internalUrl}
                         className={clsx(
-                          'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
+                          'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
                           {
-                            'border-primary-500 litbutton-active text-gray-500 hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                            'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
                               pathname.includes(app.internalUrl),
                           },
                         )}

src/lit_navigation_style.css

@@ -2,10 +2,13 @@
   color: #755d86;
   text-transform: uppercase;
 }
+.litbutton-card{
+  color: #755d86;
+}
 
+.litbutton-card:before,
 .litbutton:before {
   content: "[";
-  margin-right: 10px;
   display: inline-block;
   opacity: 0;
   -webkit-transform: translateX(20px);
@@ -15,10 +18,12 @@
   -moz-transition: -moz-transform 0.3s, opacity 0.2s;
   transition: transform 0.3s, opacity 0.2s;
 }
-
+.litbutton:before{
+  margin-right: 10px;
+}
+.litbutton-card:after,
 .litbutton:after {
   content: "]";
-  margin-left: 10px;
   display: inline-block;
   opacity: 0;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
@@ -28,12 +33,20 @@
   -moz-transform: translateX(-20px);
   transform: translateX(-20px);
 }
+.litbutton:after{
+  margin-left: 10px;
+
+}
+.litbutton-card:hover,
 .litbutton:hover{
   color: #3a97a3;
 }
+.litbutton-card:active,
 .litbutton-active{
   color: #3a97a3;
 }
+.litbutton-card:hover:before,
+.litbutton-card:hover:after,
 .litbutton:hover:before,
 .litbutton:hover:after {
   color: #3a97a3;

src/modules/dashboard/components/DashboardCard/DashboardCard.tsx

@@ -39,7 +39,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
               />
 
               <div>
-                <h2 className="text-xl text-logo-darkviolet border-logo-darkviolet leading-8 font-bold">{app.name}</h2>
+                <h2 className="text-xl litbutton-card leading-8 font-bold">{app.name}</h2>
               </div>
             </div>
           </div>