[TWIG] Removed all instances were 'arrow-down' icon was called in twig templates, replaced it's intended feedback by using :after pseudo-selector within CSS

In user panel render time reduced dramatically, by ~70ms. Said icon was requested by twig >10 times.

components/Collection/templates/collection/widget_add_to.html.twig

@@ -2,7 +2,6 @@
     <details class="section-widget-title-details" title="Expand if you want to access more options.">
         <summary class="section-title-summary">
             <h2>{{ctitle}}</h2>
-            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
         </summary>
         {% if has_collections %}
             <fieldset class="section-form">
@@ -13,7 +12,6 @@
                      title="Expand if you want to access more options.">
                 <summary class="section-subtitle-summary">
                     <strong>{% trans %}Other options{% endtrans %}</strong>
-                    {{ icon('arrow-down', 'icon icon-details-close') | raw }}
                 </summary>
                 <fieldset class="section-form">
                     {{ form(create_form) }}

components/RightPanel/templates/right_panel/view.html.twig

@@ -21,7 +21,6 @@
                                     {{ "Create a note" | trans }}
                                 {% endif %}
                             </h2>
-                            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                         </summary>
 
                         <div class="section-form">
@@ -40,7 +39,6 @@
                                         <strong>
                                             {{ "Additional options" | trans }}
                                         </strong>
-                                        {{ icon('arrow-down', 'icon icon-details-close') | raw }}
                                     </summary>
                                     {{ form_row(blocks['post_form'].language) }}
                                     {{ form_row(blocks['post_form'].tag_use_canonical) }}

components/Search/templates/search/show.html.twig

@@ -19,7 +19,6 @@
                 <details class="section-widget-subtitle-details">
                     <summary class="section-subtitle-summary">
                         <strong>{% trans %}Other options{% endtrans %}</strong>
-                        {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                     </summary>
 
                     <div class="section-form">
@@ -28,7 +27,6 @@
                                 <strong>
                                     {% trans %}Save query as a feed{% endtrans %}
                                 </strong>
-                                {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                             </summary>
                             <div class="section-form">
                                 {{ form_row(search_form.title) }}
@@ -45,7 +43,6 @@
             <details class="section-widget-subtitle-details">
                 <summary class="section-subtitle-summary">
                     <strong>{% trans %}Build a search query{% endtrans %}</strong>
-                    {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                 </summary>
 
                 {{ form_start(search_builder_form) }}
@@ -54,7 +51,6 @@
                     <details class="section-widget-subtitle-details">
                         <summary class="section-subtitle-summary">
                             <strong>{% trans %}People search options{% endtrans %}</strong>
-                            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                         </summary>
                         {{ form_row(search_builder_form.include_actors) }}
                         {{ form_row(search_builder_form.include_actors_people) }}
@@ -70,7 +66,6 @@
                     <details class="section-widget-subtitle-details">
                         <summary class="section-subtitle-summary">
                             <strong>{% trans %}Note search options{% endtrans %}</strong>
-                            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                         </summary>
                         {{ form_row(search_builder_form.include_notes) }}
                         {{ form_row(search_builder_form.include_notes_text) }}

composer.lock

@@ -1159,32 +1159,28 @@
         },
         {
             "name": "doctrine/lexer",
-            "version": "1.2.1",
+            "version": "1.2.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/doctrine/lexer.git",
-                "reference": "e864bbf5904cb8f5bb334f99209b48018522f042"
+                "reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/doctrine/lexer/zipball/e864bbf5904cb8f5bb334f99209b48018522f042",
+                "url": "https://api.github.com/repos/doctrine/lexer/zipball/9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
-                "reference": "e864bbf5904cb8f5bb334f99209b48018522f042",
+                "reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
                 "shasum": ""
             },
             "require": {
-                "php": "^7.2 || ^8.0"
+                "php": "^7.1 || ^8.0"
             },
             "require-dev": {
-                "doctrine/coding-standard": "^6.0",
+                "doctrine/coding-standard": "^9.0",
-                "phpstan/phpstan": "^0.11.8",
+                "phpstan/phpstan": "1.3",
-                "phpunit/phpunit": "^8.2"
+                "phpunit/phpunit": "^7.5 || ^8.5 || ^9.5",
+                "vimeo/psalm": "^4.11"
             },
             "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "1.2.x-dev"
-                }
-            },
             "autoload": {
                 "psr-4": {
                     "Doctrine\\Common\\Lexer\\": "lib/Doctrine/Common/Lexer"
@@ -1219,7 +1215,7 @@
             ],
             "support": {
                 "issues": "https://github.com/doctrine/lexer/issues",
-                "source": "https://github.com/doctrine/lexer/tree/1.2.1"
+                "source": "https://github.com/doctrine/lexer/tree/1.2.2"
             },
             "funding": [
                 {
@@ -1235,7 +1231,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2020-05-25T17:44:05+00:00"
+            "time": "2022-01-12T08:27:12+00:00"
         },
         {
             "name": "doctrine/migrations",
@@ -1444,38 +1440,39 @@
         },
         {
             "name": "doctrine/persistence",
-            "version": "2.2.3",
+            "version": "2.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/doctrine/persistence.git",
-                "reference": "5e7bdbbfe9811c06e1f745d1c166647d5c47d6ee"
+                "reference": "f8af155c1e7963f3d2b4415097d55757bbaa53d8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/doctrine/persistence/zipball/5e7bdbbfe9811c06e1f745d1c166647d5c47d6ee",
+                "url": "https://api.github.com/repos/doctrine/persistence/zipball/f8af155c1e7963f3d2b4415097d55757bbaa53d8",
-                "reference": "5e7bdbbfe9811c06e1f745d1c166647d5c47d6ee",
+                "reference": "f8af155c1e7963f3d2b4415097d55757bbaa53d8",
                 "shasum": ""
             },
             "require": {
-                "doctrine/annotations": "^1.0",
                 "doctrine/cache": "^1.11 || ^2.0",
                 "doctrine/collections": "^1.0",
                 "doctrine/deprecations": "^0.5.3",
                 "doctrine/event-manager": "^1.0",
                 "php": "^7.1 || ^8.0",
-                "psr/cache": "^1.0|^2.0|^3.0"
+                "psr/cache": "^1.0 || ^2.0 || ^3.0"
             },
             "conflict": {
+                "doctrine/annotations": "<1.0 || >=2.0",
                 "doctrine/common": "<2.10@dev"
             },
             "require-dev": {
                 "composer/package-versions-deprecated": "^1.11",
+                "doctrine/annotations": "^1.0",
                 "doctrine/coding-standard": "^6.0 || ^9.0",
                 "doctrine/common": "^3.0",
-                "phpstan/phpstan": "0.12.84",
+                "phpstan/phpstan": "1.2.0",
                 "phpunit/phpunit": "^7.5.20 || ^8.0 || ^9.0",
-                "symfony/cache": "^4.4|^5.0",
+                "symfony/cache": "^4.4 || ^5.0 || ^6.0",
-                "vimeo/psalm": "4.7.0"
+                "vimeo/psalm": "4.13.1"
             },
             "type": "library",
             "autoload": {
@@ -1525,9 +1522,9 @@
             ],
             "support": {
                 "issues": "https://github.com/doctrine/persistence/issues",
-                "source": "https://github.com/doctrine/persistence/tree/2.2.3"
+                "source": "https://github.com/doctrine/persistence/tree/2.3.0"
             },
-            "time": "2021-10-25T19:59:10+00:00"
+            "time": "2022-01-09T19:58:46+00:00"
         },
         {
             "name": "doctrine/sql-formatter",
@@ -1905,16 +1902,16 @@
         },
         {
             "name": "giggsey/libphonenumber-for-php",
-            "version": "8.12.40",
+            "version": "8.12.41",
             "source": {
                 "type": "git",
                 "url": "https://github.com/giggsey/libphonenumber-for-php.git",
-                "reference": "cafb3497dce678e9643ec3eba38be251a67d7469"
+                "reference": "c7b9f89a25e37e8bb650a378c3eabcbdafedeafd"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/giggsey/libphonenumber-for-php/zipball/cafb3497dce678e9643ec3eba38be251a67d7469",
+                "url": "https://api.github.com/repos/giggsey/libphonenumber-for-php/zipball/c7b9f89a25e37e8bb650a378c3eabcbdafedeafd",
-                "reference": "cafb3497dce678e9643ec3eba38be251a67d7469",
+                "reference": "c7b9f89a25e37e8bb650a378c3eabcbdafedeafd",
                 "shasum": ""
             },
             "require": {
@@ -1974,7 +1971,7 @@
                 "issues": "https://github.com/giggsey/libphonenumber-for-php/issues",
                 "source": "https://github.com/giggsey/libphonenumber-for-php"
             },
-            "time": "2021-12-23T11:54:39+00:00"
+            "time": "2022-01-11T10:10:37+00:00"
         },
         {
             "name": "giggsey/locale",
@@ -12447,12 +12444,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/phpstan/phpstan.git",
-                "reference": "8cc108ee97f222890cc38fa56c26407e291d4fda"
+                "reference": "707ce16c439d6e225f4dc81bd4b2e25b8befcd36"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/8cc108ee97f222890cc38fa56c26407e291d4fda",
+                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/707ce16c439d6e225f4dc81bd4b2e25b8befcd36",
-                "reference": "8cc108ee97f222890cc38fa56c26407e291d4fda",
+                "reference": "707ce16c439d6e225f4dc81bd4b2e25b8befcd36",
                 "shasum": ""
             },
             "require": {
@@ -12504,7 +12501,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-01-09T12:34:35+00:00"
+            "time": "2022-01-12T11:13:52+00:00"
         },
         {
             "name": "phpunit/php-code-coverage",

plugins/WebMonetization/templates/WebMonetization/widget.html.twig

@@ -2,7 +2,6 @@
     <details class="section-widget-title-details" title="Expand if you want to access more options.">
         <summary class="section-title-summary">
             <h2>Web Monetization</h2>
-            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
         </summary>
         <fieldset class="section-form">
             {{ form(the_form) }}

public/assets/default_theme/css/base.css

@@ -8,19 +8,6 @@ html {
     scroll-margin-top: var(--xxl);
 }
 
-@media(prefers-color-scheme:dark) {
-    select:not([multiple]) {
-        background: var(--gradient),url("../images/select_drop_dark.png") no-repeat center right 5px !important;
-        background-size: cover,16px !important;
-    }
-}
-@media(prefers-color-scheme:light) {
-    select:not([multiple]) {
-        background: var(--gradient),url("../images/select_drop_light.png") no-repeat center right 5px !important;
-        background-size: cover,16px !important;
-        background-blend-mode: saturation;
-    }
-}
 .icon {
     align-self: center;
     fill: var(--foreground);

public/assets/default_theme/css/pages/settings.css

@@ -6,17 +6,20 @@
 
 .section-settings,
 .section-settings-details {
-    margin-bottom: .6rem;
+    margin-bottom: 0.6rem;
-    border-radius: .6rem;
+    border-radius: 0.6rem;
-    padding: .6rem;
+    padding: 0.6rem;
     box-sizing: border-box;
 }
+
 .section-settings-details {
     border: 2px solid var(--border);
 }
+
 .section-settings-details-title {
     display: block;
 }
+
 .section-settings-details[open] {
     border-left: 2px solid var(--foreground);
 }
@@ -30,28 +33,30 @@
 }
 
 .section-settings hr {
-    margin-top: .6rem;
+    margin-top: 0.6rem;
-    margin-bottom: .6rem;
+    margin-bottom: 0.6rem;
 }
 
-.section-settings-details summary h3:first-letter ,.section-settings-details summary em:first-letter {
+.section-settings-details summary em:first-letter,
+.section-settings-details summary h3:first-letter {
     text-transform: uppercase;
 }
 
-.section-settings-details summary:focus .icon-details-open,.section-settings-details summary:hover .icon-details-open {
-    transition: all 200ms cubic-bezier(0,0.55,0.45,1);
-}
-
-.section-settings-details[open] svg {
-    transform: rotate(180deg);
-    animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
-}
-
 .section-settings-details[open] .set-nav li:last-of-type {
     margin-bottom: 0;
 }
 
-.section-settings-details:not([open]) svg {
+.section-settings-details summary:after {
+    content: "\2193";
+    float: right;
+}
+
+.section-settings-details[open] summary:after {
+    transform: rotate(180deg);
+    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
+}
+
+.section-settings-details:not([open]) summary:after {
     transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }

public/assets/default_theme/css/widgets/buttons.css

@@ -1,21 +1,23 @@
 input {
     all: unset;
 }
+
 input[type=checkbox] {
-    all: unset;
+    display: inline-block;
-    display: inline-block !important;
+    cursor: pointer;
-    cursor: pointer !important;
     width: 1em !important;
     height: 1em !important;
     background: var(--accent) !important;
-    background-repeat: no-repeat !important;
 }
+
 input[type=checkbox]:not(:hover, :focus) {
     background: var(--foreground) !important;
 }
+
 input[type=checkbox] {
     border: unset !important;
 }
+
 input[type=radio] {
     display: inline-block;
     width: var(--s) !important;
@@ -25,18 +27,21 @@ input[type=radio] {
     box-shadow: inset 0 0 0 2px var(--foreground) !important;
     border-radius: 50%;
 }
+
 input[type=radio]:checked {
     background: var(--background-hard);
 }
+
 input[type=file] {
     all: unset;
     display: block;
-    font-family: 'Open Sans',sans-serif !important;
+    font-family: 'Open Sans', sans-serif !important;
     font-weight: normal !important;
     padding: unset !important;
     border-radius: var(--s);
     background: var(--gradient) !important;
 }
+
 input[type=checkbox] {
     background-size: contain !important;
     margin-right: 4px !important;
@@ -45,12 +50,14 @@ input[type=checkbox] {
     -moz-mask-image: url("../../icons/check-off.svg") !important;
     mask-image: url("../../icons/check-off.svg") !important;
 }
+
 input[type=checkbox]:checked {
     -webkit-mask-image: url("../../icons/check-on.svg") !important;
     -o-mask-image: url("../../icons/check-on.svg") !important;
     -moz-mask-image: url("../../icons/check-on.svg") !important;
     mask-image: url("../../icons/check-on.svg") !important;
 }
+
 input[type=color] {
     appearance: none;
     width: var(--xxl);
@@ -59,50 +66,55 @@ input[type=color] {
     border: none;
     cursor: pointer;
 }
+
 input[type=color]::-webkit-color-swatch {
     border-radius: var(--s);
     border: none;
 }
+
 input[type=color]::-moz-color-swatch {
     border-radius: var(--s);
     border: none;
 }
+
 ::file-selector-button {
     cursor: pointer;
     background-color: unset;
     border: unset;
-    font-family: 'Open Sans',sans-serif !important;
+    font-family: 'Open Sans', sans-serif !important;
     font-weight: bold !important;
     color: var(--foreground);
     fill: var(--foreground);
     margin: 3px;
 }
+
 *|*::-moz-button-content {
     all: unset !important;
 }
+
 button {
     display: block !important;
     cursor: pointer !important;
     margin-left: auto !important;
     margin-top: var(--s);
 }
+
 button,
 label {
-    font-family: 'Poppins',sans-serif;
+    font-family: 'Poppins', sans-serif;
     font-weight: bold !important;
     color: currentColor;
 }
+
 select::-ms-expand {
     display: none;
 }
+
 button,
 input,
 select,
 textarea {
-    appearance: none;
+    display: inline-block;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    display: inline-flex;
     overflow: hidden;
     font-size: inherit;
     line-height: initial !important;
@@ -112,27 +124,30 @@ textarea {
     width: auto;
     max-width: border-box !important;
 }
+
 button,
 select,
 textarea {
     background: var(--gradient) !important;
 }
+
 button,
 input:not([type=checkbox], [type=radio]) {
     background: var(--gradient) !important;
 }
+
 select {
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
     border-radius: var(--s);
     max-width: 100% !important;
 }
+
 select[multiple] {
     overflow-y: scroll;
     height: 20rem;
 }
+
 button:focus,
 button:hover,
 input:focus,

public/assets/default_theme/css/widgets/sections.css

@@ -1,32 +1,39 @@
 .profile {
-    font-family: 'Open Sans',sans-serif;
+    font-family: 'Open Sans', sans-serif;
     margin-bottom: var(--s);
     border: 2px solid var(--border);
     border-radius: var(--s);
     padding: var(--unit);
     background: var(--gradient) !important;
 }
+
 .profile header {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     vertical-align: middle;
 }
+
 .profile-info {
     display: flex;
 }
+
 .profile-info-url {
     display: block;
 }
+
 .profile-info-url-nickname {
     font-size: var(--m);
 }
+
 .profile-info-url-remote {
     opacity: 0.66;
 }
+
 .profile-info-url > * {
     display: block;
 }
+
 .profile-stats {
     align-self: center;
     margin-left: auto;
@@ -34,25 +41,31 @@
     font-size: 0.937rem;
     opacity: 0.66;
 }
+
 .profile-stats-subscriptions,
 .profile-stats-subscribers {
     display: block;
 }
+
 .profile-stats-subscriptions strong,
 .profile-stats-subscribers strong {
     margin-right: 4px;
 }
+
 .profile-info-url,
 .profile-bio {
     word-break: break-all;
 }
+
 .profile-bio {
     margin-top: 4px;
 }
+
 .profile-tags {
     margin: unset;
     margin-top: 4px;
 }
+
 .button-container {
     border: none !important;
     mask-repeat: no-repeat !important;
@@ -63,9 +76,11 @@
     background-color: var(--foreground);
     opacity: 0.33;
 }
+
 .button-container:not(:first-of-type) {
     margin-left: var(--s);
 }
+
 .button-container:focus,
 .button-container:hover {
     border: none !important;
@@ -74,18 +89,21 @@
     opacity: 1;
     background-color: var(--accent);
 }
+
 .add-actor-button-container {
     -o-mask-image: url("../../icons/add-actor.svg");
     -moz-mask-image: url("../../icons/add-actor.svg");
     -webkit-mask-image: url("../../icons/add-actor.svg");
     mask-image: url("../../icons/add-actor.svg");
 }
+
 .remove-actor-button-container {
     -o-mask-image: url("../../icons/remove-actor.svg");
     -moz-mask-image: url("../../icons/remove-actor.svg");
     -webkit-mask-image: url("../../icons/remove-actor.svg");
     mask-image: url("../../icons/remove-actor.svg");
 }
+
 .avatar {
     max-width: 4rem;
     max-height: 4rem;
@@ -95,10 +113,12 @@
     margin-right: 5px;
     border-radius: 2px;
 }
+
 .section-title {
     font-weight: 700;
     margin-bottom: unset;
 }
+
 .section-widget {
     display: flex;
     flex-direction: column;
@@ -108,12 +128,15 @@
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
 }
+
 .section-widget hr {
     margin-bottom: var(--s);
 }
+
 .section-padding {
     padding: var(--s);
 }
+
 .section-widget-paging {
     display: block;
     font-family: 'Poppins', sans-serif;
@@ -122,9 +145,11 @@
     margin-top: var(--s);
     margin-left: auto;
 }
+
 .section-widget-title {
     margin-left: unset;
 }
+
 .section-widget-button-like {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
@@ -136,60 +161,81 @@
     border-radius: var(--s);
     border: 2px solid var(--border);
 }
-.section-widget-title-details summary{
+
+.section-widget-title-details summary {
     padding: 6px 12px;
 }
+
 .section-widget-subtitle-details summary {
     padding: 2px 8px;
 }
+
 .section-widget-subtitle-summary + * {
     border-radius: var(--s);
     background: var(--gradient);
     padding: 2px 8px;
 }
+
 .section-form .section-widget-subtitle-details summary {
     border: 2px solid var(--border);
 }
+
 .section-widget-title-details summary,
 .section-widget-subtitle-details summary {
-    align-items: center;
+    display: inline-block;
+    width: 100%;
     border-radius: var(--s);
-    background: var(--gradient) !important;
+    background: var(--gradient);
 }
-.section-widget-subtitle-details[open] svg,
+.section-widget-title-details summary > *,
-.section-widget-title-details[open] .icon-details-open {
+.section-widget-subtitle-details summary > * {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+.section-widget-title-details summary > *:last-child,
+.section-widget-subtitle-details summary > *:last-child {
+    margin-right: 4px;
+}
+
+.section-widget-title-details summary:after,
+.section-widget-subtitle-details summary:after {
+    content: "\2193";
+    float: right;
+}
+
+.section-widget-subtitle-details[open] summary:after,
+.section-widget-title-details[open] summary:after {
     transform: rotate(180deg);
-    animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
+    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
-.section-widget-subtitle-details:not([open]) svg,
+
-.section-widget-title-details:not([open]) .icon-details-open {
+.section-widget-subtitle-details:not([open]) summary:after,
+.section-widget-title-details:not([open]) summary:after {
     transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
-}
-.section-subtitle-summary,
-.section-title-summary {
-    display: flex;
 }
+
 .section-subtitle-summary ~ [class|="form-row"] {
     font-size: 0.937rem;
     max-font-size: 0.937rem !important;
     padding: var(--s);
 }
-.section-subtitle-summary strong,
+
-.section-title-summary h2 {
-    margin-right: auto;
-}
 .section-subtitle-summary a,
 .section-title-summary a {
     line-height: initial;
 }
+
 .section-subtitle-summary svg:last-child,
 .section-title-summary svg:last-child {
     margin-left: 4px;
 }
+
 .section-widget-subtitle-details .section-widget-subtitle-details:not(:last-of-type) {
     margin-bottom: var(--s);
 }
+
 .section-form {
     display: flex;
     flex-direction: column;
@@ -199,27 +245,33 @@
     width: 100%;
     padding: var(--s);
 }
+
 .section-form-legend {
     margin-top: unset;
     margin-bottom: var(--s);
     font-weight: bold;
 }
+
 .form-row {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--s);
 }
+
 .form-row-widget {
     display: block;
     width: 100%;
 }
+
 .form-row-help {
     margin-bottom: unset;
 }
+
 textarea.form-row-widget {
     height: 7rem;
     resize: vertical;
 }
+
 .form-row-widget-error,
 .form-error,
 .alert,
@@ -233,11 +285,13 @@ textarea.form-row-widget {
     margin-top: 6px;
     margin-bottom: 6px;
 }
+
 .footer ul {
     display: inline-flex;
     width: 100%;
     justify-content: flex-start;
 }
+
 .footer ul li {
     margin-right: 5px;
 }

public/assets/default_theme/icons/arrow-down.svg

@@ -0,0 +1,7 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg class="icon-details-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <title>Activate to view more</title>
+    <path fill-rule="evenodd"
+          d="M13.03 8.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.47 9.28a.75.75 0 011.06-1.06l2.97 2.97V3.75a.75.75 0 011.5 0v7.44l2.97-2.97a.75.75 0 011.06 0z"></path>
+</svg>

public/assets/icons/arrow-down.svg.twig

@@ -1,7 +1,7 @@
 <!-- https://github.com/primer/octicons -->
 <!-- MIT License -->
 <svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
-    <title>Activate to view more.</title>
+    <title>Activate to view more</title>
     <path fill-rule="evenodd"
           d="M13.03 8.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.47 9.28a.75.75 0 011.06-1.06l2.97 2.97V3.75a.75.75 0 011.5 0v7.44l2.97-2.97a.75.75 0 011.06 0z"></path>
 </svg>

templates/cards/navigation/view.html.twig

@@ -8,7 +8,6 @@
           {# User custom feeds #}
           <a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
         {% endif %}
-        {{ icon('arrow-down', 'icon icon-details-open') | raw }}
       </summary>
 
       <nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">

templates/cards/profile/view.html.twig

@@ -9,15 +9,25 @@
 {% set mention = mention(actor) %}
 
 {% block profile_view %}
-    <section id='profile-{{ actor.id }}' class='profile' title="{{ actor_nickname }}'s {{ 'profile information.' | trans }}">
+    <section id='profile-{{ actor.id }}' class='profile'
+             title="{% trans %} %actor_nickname%'s profile information{% endtrans %}">
         <header>
             <div class="profile-info">
-                <img src="{{ actor_avatar }}" class="profile-avatar avatar" alt="{% trans %} %actor_nickname%'s avatar. {% endtrans %}" width="{{actor_avatar_dimensions['width']}}" height="{{actor_avatar_dimensions['height']}}">
+                <img src="{{ actor_avatar }}" class="profile-avatar avatar"
+                     alt="{% trans %} %actor_nickname%'s avatar{% endtrans %}"
+                     title="{% trans %} %actor_nickname%'s avatar{% endtrans %}"
+                     width="{{ actor_avatar_dimensions['width'] }}"
+                     height="{{ actor_avatar_dimensions['height'] }}">
                 <div>
                     <a class="profile-info-url" href="{{ actor_uri }}">
-                        <strong class="profile-info-url-nickname" title="{{ actor_nickname }}{{ '\'s nickname.' | trans }}">{{ actor_nickname }}</strong>
+                        <strong class="profile-info-url-nickname"
+                                title="{% trans %} %actor_nickname%'s nickname {% endtrans %}">
+                            {{ actor_nickname }}
+                        </strong>
                         {% if not actor_is_local %}
-                            <span class="profile-info-url-remote">{{ mention }}</span>
+                            <span class="profile-info-url-remote">
+                                {{ mention }}
+                            </span>
                         {% endif %}
                     </a>
                     <ul class="profile-info-actions">
@@ -32,16 +42,24 @@
                 </div>
             </div>
             <div class="profile-stats">
-                <span class="profile-stats-subscriptions"><strong><a href="{{ actor.getSubscriptionsUrl() }}">{{ 'Subscribed' | trans }}</a></strong>{{ actor.getSubscribedCount() }}</span>
+                <span class="profile-stats-subscriptions" title="{% trans %} %actor_nickname%'s subscribed count{% endtrans %}">
-                <span class="profile-stats-subscribers"><strong><a href="{{ actor.getSubscribersUrl() }}">{{ 'Subscribers' | trans }}</a></strong>{{ actor.getSubscribersCount() }}</span>
+                    <strong>
+                        <a href="{{ actor.getSubscriptionsUrl() }}">{{ 'Subscribed' | trans }}</a>
+                    </strong>{{ actor.getSubscribedCount() }}
+                </span>
+                <span class="profile-stats-subscribers" title="{% trans %} %actor_nickname%'s subscribers count{% endtrans %}">
+                    <strong>
+                        <a href="{{ actor.getSubscribersUrl() }}">{{ 'Subscribers' | trans }}</a>
+                    </strong>{{ actor.getSubscribersCount() }}
+                </span>
             </div>
         </header>
         <div>
-            <section class="profile-bio">
+            <section class="profile-bio" title="{% trans %} %actor_nickname%'s bio{% endtrans %}">
                 <span>{{ actor.getBio() }}</span>
             </section>
 
-            <nav class="profile-tags">
+            <nav class="profile-tags" title="{% trans %} %actor_nickname%'s actor tags{% endtrans %}">
                 {% for tag in actor_tags %}
                     {% include 'cards/tag/actor_tag.html.twig' with { 'tag': tag, 'actor': actor } %}
                 {% endfor %}

templates/settings/macros.html.twig

@@ -6,7 +6,6 @@
         <summary>
             <strong class="section-settings-details-title">
                 {{ title | trans }}
-                {{ icon('arrow-down', 'icon icon-details-open') | raw }}
             </strong>
             <em>
                 {{ summary | trans }}