[TASK] Add class for table title/ use TYPO3 colors

in2code-de · Oct 28, 2024 · cc4a7cd · cc4a7cd
1 parent a1aeadd
commit cc4a7cd
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 13 deletions.
diff --git a/Resources/Private/Partials/Box/Analysis/DownloadsList.html b/Resources/Private/Partials/Box/Analysis/DownloadsList.html
@@ -1,7 +1,7 @@
 <f:if condition="{downloads}">
     <f:then>
         <lux:pagination.paginate objects="{downloads}" as="downloadsPaginator" itemsPerPage="15">
-            <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+            <div class="table-title">
                 <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:module.analysis.content.assets">assets</f:translate>
                 ({downloads -> f:count()})
             </div>

diff --git a/Resources/Private/Partials/Box/Analysis/NewsvisitsList.html b/Resources/Private/Partials/Box/Analysis/NewsvisitsList.html
@@ -1,7 +1,7 @@
 <f:if condition="{news}">
     <f:then>
         <lux:pagination.paginate objects="{news}" as="newsPaginator" itemsPerPage="30">
-            <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+            <div class="table-title">
                 <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:module.list.newsvisits">News visits</f:translate>
                 ({news -> f:count()})
             </div>

diff --git a/Resources/Private/Partials/Box/Analysis/PagevisitsList.html b/Resources/Private/Partials/Box/Analysis/PagevisitsList.html
@@ -1,7 +1,7 @@
 <f:if condition="{pages}">
     <f:then>
         <lux:pagination.paginate objects="{pages}" as="pagesPaginator" itemsPerPage="15">
-            <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+            <div class="table-title">
                 <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:module.analysis.content.pages">Page visits</f:translate>
                 ({pages -> f:count()})
             </div>

diff --git a/Resources/Private/Partials/Box/Analysis/SearchList.html b/Resources/Private/Partials/Box/Analysis/SearchList.html
@@ -1,7 +1,7 @@
 <f:if condition="{search}">
     <f:then>
         <lux:pagination.paginate objects="{search}" as="searchPaginator" itemsPerPage="30">
-            <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+            <div class="table-title">
                 <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:module.list.search.queries">queries</f:translate>
                 ({search -> f:count()})
             </div>

diff --git a/Resources/Private/Partials/Box/Analysis/UtmList.html b/Resources/Private/Partials/Box/Analysis/UtmList.html
@@ -1,7 +1,7 @@
 <f:if condition="{utmList}">
     <f:then>
         <lux:pagination.paginate objects="{utmList}" as="utmListPaginator" itemsPerPage="30">
-            <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+            <div class="table-title">
                 Leads ({utmList -> f:count()})
             </div>
             <table class="table table-striped table-hover table-pointer">

diff --git a/Resources/Private/Sass/Modules.scss b/Resources/Private/Sass/Modules.scss
@@ -293,8 +293,18 @@ label {
     /**
      * Table classes
      */
+    .table-title {
+        background-color: var(--typo3-component-border-color);
+        border-top: 1px solid var(--typo3-component-border-color);
+        border-left: 1px solid var(--typo3-component-border-color);
+        border-right: 1px solid var(--typo3-component-border-color);
+        color: var(--typo3-table-color);
+        font-weight: bold;
+        padding: 10px;
+    }
+
     .table {
-        border: 1px solid $colorGreyBright;
+        border: 1px solid var(--typo3-component-border-color);
 
         .soft {
             color: $colorGreySoft;

diff --git a/Resources/Private/Sass/PageOverview.scss b/Resources/Private/Sass/PageOverview.scss
@@ -64,8 +64,18 @@
 }
 
 .lux {
+    .table-title {
+        background-color: var(--typo3-component-border-color);
+        border-top: 1px solid var(--typo3-component-border-color);
+        border-left: 1px solid var(--typo3-component-border-color);
+        border-right: 1px solid var(--typo3-component-border-color);
+        color: var(--typo3-table-color);
+        font-weight: bold;
+        padding: 10px;
+    }
+
     .table {
-        border: 1px solid $colorGreyBright;
+        border: 1px solid var(--typo3-component-border-color);
     }
 }
 

diff --git a/Resources/Private/Templates/Analysis/LinkListener.html b/Resources/Private/Templates/Analysis/LinkListener.html
@@ -11,7 +11,7 @@
             </a>
 
             <lux:pagination.paginate objects="{linkListeners}" as="pagesLinkListeners" itemsPerPage="10">
-                <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+                <div class="table-title">
                     Link Listeners
                     ({linkListeners -> f:count()})
                 </div>

diff --git a/Resources/Private/Templates/Lead/Companies.html b/Resources/Private/Templates/Lead/Companies.html
@@ -8,7 +8,7 @@
             <f:if condition="{companies}">
                 <f:then>
                     <lux:pagination.paginate objects="{companies}" as="companiesPaginator" itemsPerPage="25">
-                        <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+                        <div class="table-title">
                             <span data-lux-getoverallcompanies="source">{companies -> f:count()}</span>
                             <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:dictionary.companies">Companies</f:translate>
                             <span data-lux-getoverallcompanies="target" style="color: #aaa"></span>

diff --git a/Resources/Private/Templates/Lead/List.html b/Resources/Private/Templates/Lead/List.html
@@ -8,7 +8,7 @@
             <f:if condition="{allVisitors}">
                 <f:then>
                     <lux:pagination.paginate objects="{allVisitors}" as="visitorsPaginator" itemsPerPage="25">
-                        <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+                        <div class="table-title">
                             <span data-lux-getoverallleads="source">{allVisitors -> f:count()}</span>
                             Leads
                             <span data-lux-getoverallleads="target" style="color: #aaa"></span>

diff --git a/Resources/Private/Templates/Newsletter/Receiver.html b/Resources/Private/Templates/Newsletter/Receiver.html
@@ -18,7 +18,7 @@ <h1>
                     <f:render partial="Newsletter/Receiver/Filter" arguments="{_all}"/>
 
                     <lux:pagination.paginate objects="{users}" as="usersPaginator" itemsPerPage="25">
-                        <div style="background-color: #dddddd; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #5a5a5a; font-weight: bold; padding: 10px;">
+                        <div class="table-title">
                             <f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:luxletter.module.newsletter.receiver.table.receiver">receiver</f:translate>
                             ({users -> f:count()})
                         </div>

diff --git a/Resources/Public/Css/Modules.min.css b/Resources/Public/Css/Modules.min.css
diff --git a/Resources/Public/Css/PageOverview.min.css b/Resources/Public/Css/PageOverview.min.css