style: improved colors and styling

thorsten · Aug 16, 2024 · ceecdff · ceecdff
1 parent 58fc1b0
commit ceecdff
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 28 deletions.
diff --git a/phpmyfaq/assets/templates/admin/header.twig b/phpmyfaq/assets/templates/admin/header.twig
@@ -22,7 +22,7 @@
 <body dir="{{ pageDirection }}" id="page-top">
 
 <!-- phpMyFAQ Admin Top Bar -->
-<nav class="pmf-admin-topnav navbar navbar-expand bg-dark">
+<nav class="pmf-admin-topnav navbar navbar-expand text-bg-dark bg-gradient">
   <a class="navbar-brand text-white text-center ps-3" href="../" title="phpMyFAQ {{ version }}">
     <img height="50" src="../assets/images/logo-transparent.svg" alt="phpMyFAQ Logo">
   </a>

diff --git a/phpmyfaq/assets/templates/default/index.twig b/phpmyfaq/assets/templates/default/index.twig
@@ -29,7 +29,7 @@
 </head>
 <body class="pmf-page-wrapper" dir="{{ dir }}">
 
-<nav class="p-3 text-bg-primary border-bottom">
+<nav class="p-3 bg-dark bg-gradient border-bottom">
   <div class="container">
     <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
       <a href="{{ faqHome }}" id="phpmyfaq-logo" title="{{ header }}"
@@ -84,7 +84,7 @@
           <i class="bi bi-search"></i>
           <input autocomplete="off" type="text" class="form-control form-control-lg" id="pmf-search-autocomplete"
                  name="search" placeholder="{{ searchBox }} ..." maxlength="255" value="{{ searchTerm }}">
-          <button type="submit" class="btn btn-info btn-lg">{{ searchBox }}</button>
+          <button type="submit" class="btn btn-primary btn-lg">{{ searchBox }}</button>
         </form>
       </div>
       <div>
@@ -115,7 +115,7 @@
   </div>
 </section>
 
-<footer class="pt-4 text-bg-dark">
+<footer class="pt-4 text-bg-dark bg-gradient">
   <div class="container">
     {% if not isMaintenanceMode %}
     <div class="row">

diff --git a/phpmyfaq/assets/templates/default/login.twig b/phpmyfaq/assets/templates/default/login.twig
@@ -63,7 +63,7 @@
 
                 <div class="card-footer text-center py-3">
                   {% if enableRegistration %}
-                  <a class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" href="user/register">
+                  <a class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" href="user/register">
                     {{ registerUser }}
                   </a>
                   {% endif %}

diff --git a/phpmyfaq/assets/templates/default/startpage.twig b/phpmyfaq/assets/templates/default/startpage.twig
@@ -5,7 +5,7 @@
 <!-- Header -->
 <div class="row">
   <div class="col-12">
-    <h1>{{ pageHeader }}</h1>
+    <h1 class="mb-3 fw-bold lh-1 text-center">{{ pageHeader }}</h1>
   </div>
 </div>
 
@@ -14,13 +14,13 @@
 <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-4">
   {% for decks in startPageCategoryDecks %}
     <div class="col">
-      <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-3 shadow-lg p-1"
+      <div class="card card-cover h-100 overflow-hidden text-bg-dark bg-gradient rounded-3 shadow-lg p-1"
       {% if decks['image'] != '' %}
         style="background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url('{{ decks['image'] }}')"
       {% endif %}
       >
-        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">{{ decks['name'] }}</h3>
-        <a class="btn btn-primary" href="{{ decks['url'] }}">{{ 'msgGoToCategory' | translate }}</a>
+        <h3 class="pt-5 mt-5 mb-3 lh-1 fw-semibold">{{ decks['name'] }}</h3>
+        <a class="btn btn-primary bg-gradient" href="{{ decks['url'] }}">{{ 'msgGoToCategory' | translate }}</a>
       </div>
     </div>
   {% endfor %}
@@ -33,7 +33,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title text-center">{{ stickyRecordsHeader }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-exclamation-square"></i>
+          {{ stickyRecordsHeader }}
+        </h5>
         <ul class="list-unstyled">
           {% for stickyRecord in stickyRecordsList %}
           <li class="mb-1">
@@ -52,7 +55,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title text-center">{{ writeTopTenHeader }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-trophy"></i>
+          {{ writeTopTenHeader }}
+        </h5>
         <ol class="list-unstyled">
           {% if topRecordsList is not empty %}
             {% for topten in topRecordsList %}
@@ -79,7 +85,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title text-center">{{ writeNewestHeader }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-lightning"></i>
+          {{ writeNewestHeader }}
+        </h5>
         <ol class="list-unstyled">
           {% if latestRecordsList is not empty %}
             {% for latest in latestRecordsList %}
@@ -101,7 +110,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title text-center">{{ msgTrendingFAQs }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-graph-up-arrow"></i>
+          {{ msgTrendingFAQs }}
+        </h5>
         <ol class="list-unstyled">
           {% if trendingRecordsList is not empty %}
             {% for trending in trendingRecordsList %}
@@ -124,7 +136,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">{{ writeNewsHeader }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-newspaper"></i>
+          {{ writeNewsHeader }}
+        </h5>
         <p class="card-text">{{ writeNews | raw }}</p>
       </div>
     </div>
@@ -134,7 +149,10 @@
   <div class="col-sm-6 col-lg-4 mb-4">
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">{{ msgTags }}</h5>
+        <h5 class="card-title text-center">
+          <i class="bi bi-tags"></i>
+          {{ msgTags }}
+        </h5>
         <p class="card-text pmf-tag-cloud">{{ tagList | raw }}</p>
       </div>
     </div>

diff --git a/phpmyfaq/assets/templates/default/ucp.twig b/phpmyfaq/assets/templates/default/ucp.twig
@@ -5,7 +5,7 @@
   <div class="col-4 pmf-personal-gravatar">
     <div class="card shadow mb-4">
       <div class="card-header py-3">
-        <h5 class="h6 m-0 font-weight-bold text-primary">{{ msgGravatar }}</h5>
+        <h5 class="h6 m-0 font-weight-bold">{{ msgGravatar }}</h5>
       </div>
       <div class="card-body">
         <div class="text-center">{{ ucpGravatarImage|raw }}</div>
@@ -19,7 +19,7 @@
 
     <div class="card shadow mb-4">
       <div class="card-header py-3">
-        <h6 class="h6 m-0 font-weight-bold text-primary">{{ msgHeaderUserData }}</h6>
+        <h6 class="h6 m-0 font-weight-bold">{{ msgHeaderUserData }}</h6>
       </div>
       <div class="card-body">
         <div class="row mb-2">
@@ -216,7 +216,10 @@
           </div>
 
           <div class="row">
-            <div class="col-lg-12 text-end">
+            <div class="col-12">
+              <button type="reset" class="btn btn-outline-secondary">
+                {{ 'ad_gen_reset' | translate }}
+              </button>
               <button class="btn btn-primary" type="submit" id="pmf-submit-user-control-panel"
                       data-pmf-form="submit-user-data">
                 {{ msgSave }}

diff --git a/phpmyfaq/assets/themes/default/scss/_theme.scss b/phpmyfaq/assets/themes/default/scss/_theme.scss
@@ -1,10 +1,10 @@
 $custom-colors: (
-  'light': #cfdeff,
-  'dark': #333545,
-  'primary': #005fb1,
-  'secondary': #9aafca,
-  'info': #7cc088,
-  'success': #00bc6a,
-  'warning': #ead100,
-  'danger': #fe1200,
+  'light': #f8fafc,
+  'dark': #0f1727,
+  'primary': #ddf247,
+  'secondary': #f7b538,
+  'info': #dce0d9,
+  'success': #64b700,
+  'warning': #ffc67b,
+  'danger': #fb0067,
 );
diff --git a/phpmyfaq/assets/themes/default/scss/style.scss b/phpmyfaq/assets/themes/default/scss/style.scss
@@ -39,3 +39,6 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import 'layout/login';
 @import 'layout/navigation';
 @import 'layout/setup';
+
+$enable-gradients: true;
+$enable-shadows: true;
diff --git a/phpmyfaq/src/phpMyFAQ/Tags.php b/phpmyfaq/src/phpMyFAQ/Tags.php
@@ -465,8 +465,8 @@ public function renderPopularTags(int $limit = 0): string
         foreach ($this->getPopularTags($limit) as $tagId => $tagFreq) {
             $tagName = $this->getTagNameById($tagId);
             $html .= sprintf(
-                '<a class="btn btn-primary m-1" href="?action=search&tagging_id=%d">%s ' .
-                '<span class="badge bg-info">%d</span></a>',
+                '<a class="btn btn-secondary m-1" href="?action=search&tagging_id=%d">%s ' .
+                '<span class="badge text-bg-primary">%d</span></a>',
                 $tagId,
                 Strings::htmlentities($tagName),
                 $tagFreq