chg: [ui:home] Nicer icons and layout

templates/Instance/home.php

@@ -9,7 +9,7 @@ $bookmarks = !empty($loggedUser->user_settings_by_name['ui.bookmarks']['value'])
     <?= __('Bookmarks') ?>
 </h3>
 <div class="row">
-    <? if (!empty($bookmarks)): ?>
+    <? if (!empty($bookmarks)) : ?>
         <ul class="col-sm-12 col-md-10 col-l-8 col-xl-8 mb-3">
             <?php foreach ($bookmarks as $bookmark) : ?>
                 <li class="list-group-item">
@@ -20,7 +20,7 @@ $bookmarks = !empty($loggedUser->user_settings_by_name['ui.bookmarks']['value'])
                 </li>
             <?php endforeach; ?>
         </ul>
-    <?php else: ?>
+    <?php else : ?>
         <p class="fw-light"><?= __('No bookmarks') ?></p>
     <?php endif; ?>
 </div>

templates/element/widgets/highlight-panel.php

@@ -2,18 +2,19 @@
 $variationIcon = '';
 $variationClass = '';
 if ($variation == 0) {
-    $variationIcon = 'minus';
+    $variationIcon = $this->FontAwesome->getClass('minus');
 } elseif ($variation > 0) {
-    $variationIcon = 'arrow-up';
+    $variationIcon = 'trends-arrow-up-white fs-6';
     $variationClass = 'bg-success';
 } else {
-    $variationIcon = 'arrow-down';
+    $variationIcon = 'trends-arrow-up-white fs-6 fa-rotate-180 fa-flip-vertical';
     $variationClass = 'bg-danger';
 }
 
-$variationHtml = sprintf('<div class="badge %s fw-bold"><span class="%s me-2"></span>%s</div>',
+$variationHtml = sprintf(
+    '<div class="badge %s fw-bold"><span class="%s me-2 align-middle"></span>%s</div>',
     $variationClass,
-    $this->FontAwesome->getClass($variationIcon),
+    $variationIcon,
     !empty($variation) ? h($variation) : ''
 );
 

webroot/css/main.css

@@ -126,4 +126,40 @@ input[type="checkbox"]:disabled.change-cursor {
 @keyframes slide-in {
     50% { opacity: 0.3; }
     100% { transform: translateX(0%); opacity: 1; }
+}
+
+.trends-arrow-up-black {
+    display: inline-flex;
+    min-width: 1em;
+    min-height: 0.71em;
+    position: relative;
+}
+.trends-arrow-up-black::before {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: " ";
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='223.995' width='383.98752' viewBox='0 0 383.98752 223.995' role='img'%3E%3Cpath d='m 367.9975,0 h -118.06 c -21.38,0 -32.09,25.85 -16.97,40.97 l 32.4,32.4 -73.37,73.38 -73.37,-73.37 c -12.5,-12.5 -32.76,-12.5 -45.25,0 l -68.69,68.69 c -6.25,6.25 -6.25,16.38 0,22.63 l 22.62,22.62 c 6.25,6.25 16.38,6.25 22.63,0 l 46.06,-46.07 73.37,73.37 c 12.5,12.5 32.76,12.5 45.25,0 l 96,-96 32.4,32.4 c 15.12,15.12 40.97,4.41 40.97,-16.97 V 16 c 0.01,-8.84 -7.15,-16 -15.99,-16 z' /%3E%3C/svg%3E%0A");.97,-16.97 V 16 c 0.01,-8.84 -7.15,-16 -15.99,-16 z' /%3E%3C/svg%3E%0A");
+}
+
+.trends-arrow-up-white {
+    display: inline-flex;
+    min-width: 1em;
+    min-height: 0.71em;
+    position: relative;
+}
+.trends-arrow-up-white::before {
+    background-color: #fff;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: " ";
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='223.995' width='383.98752' viewBox='0 0 383.98752 223.995' role='img'%3E%3Cpath d='m 367.9975,0 h -118.06 c -21.38,0 -32.09,25.85 -16.97,40.97 l 32.4,32.4 -73.37,73.38 -73.37,-73.37 c -12.5,-12.5 -32.76,-12.5 -45.25,0 l -68.69,68.69 c -6.25,6.25 -6.25,16.38 0,22.63 l 22.62,22.62 c 6.25,6.25 16.38,6.25 22.63,0 l 46.06,-46.07 73.37,73.37 c 12.5,12.5 32.76,12.5 45.25,0 l 96,-96 32.4,32.4 c 15.12,15.12 40.97,4.41 40.97,-16.97 V 16 c 0.01,-8.84 -7.15,-16 -15.99,-16 z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='223.995' width='383.98752' viewBox='0 0 383.98752 223.995' role='img'%3E%3Cpath d='m 367.9975,0 h -118.06 c -21.38,0 -32.09,25.85 -16.97,40.97 l 32.4,32.4 -73.37,73.38 -73.37,-73.37 c -12.5,-12.5 -32.76,-12.5 -45.25,0 l -68.69,68.69 c -6.25,6.25 -6.25,16.38 0,22.63 l 22.62,22.62 c 6.25,6.25 16.38,6.25 22.63,0 l 46.06,-46.07 73.37,73.37 c 12.5,12.5 32.76,12.5 45.25,0 l 96,-96 32.4,32.4 c 15.12,15.12 40.97,4.41 40.97,-16.97 V 16 c 0.01,-8.84 -7.15,-16 -15.99,-16 z' /%3E%3C/svg%3E%0A");
 }