[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.
2022-01-12 16:07:28 +00:00 · 2022-01-12 16:07:28 +00:00 · 600a1511cb
commit 600a1511cb
parent 59b8bdf99b
14 changed files with 188 additions and 117 deletions
--- a/components/Collection/templates/collection/widget_add_to.html.twig
+++ b/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) }}
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/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) }}
--- a/components/Search/templates/search/show.html.twig
+++ b/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) }}
--- a/composer.lock
+++ b/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",
-                "reference": "e864bbf5904cb8f5bb334f99209b48018522f042",
+                "url": "https://api.github.com/repos/doctrine/lexer/zipball/9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
+                "reference": "9c50f840f257bbb941e6f4a0e94ccf5db5c3f76c",
                "shasum": ""
            },
            "require": {
-                "php": "^7.2 || ^8.0"
+                "php": "^7.1 || ^8.0"
            },
            "require-dev": {
-                "doctrine/coding-standard": "^6.0",
-                "phpstan/phpstan": "^0.11.8",
-                "phpunit/phpunit": "^8.2"
+                "doctrine/coding-standard": "^9.0",
+                "phpstan/phpstan": "1.3",
+                "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",
-                "reference": "5e7bdbbfe9811c06e1f745d1c166647d5c47d6ee",
+                "url": "https://api.github.com/repos/doctrine/persistence/zipball/f8af155c1e7963f3d2b4415097d55757bbaa53d8",
+                "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",
-                "vimeo/psalm": "4.7.0"
+                "symfony/cache": "^4.4 || ^5.0 || ^6.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",
-                "reference": "cafb3497dce678e9643ec3eba38be251a67d7469",
+                "url": "https://api.github.com/repos/giggsey/libphonenumber-for-php/zipball/c7b9f89a25e37e8bb650a378c3eabcbdafedeafd",
+                "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",
-                "reference": "8cc108ee97f222890cc38fa56c26407e291d4fda",
+                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/707ce16c439d6e225f4dc81bd4b2e25b8befcd36",
+                "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",
--- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
+++ b/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) }}
--- a/public/assets/default_theme/css/base.css
+++ b/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);
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@ -6,17 +6,20 @@

 .section-settings,
 .section-settings-details {
-    margin-bottom: .6rem;
-    border-radius: .6rem;
-    padding: .6rem;
+    margin-bottom: 0.6rem;
+    border-radius: 0.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-bottom: .6rem;
+    margin-top: 0.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 {
-    transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
+.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);
 }
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@ -1,21 +1,23 @@
 input {
    all: unset;
 }
+
 input[type=checkbox] {
-    all: unset;
-    display: inline-block !important;
-    cursor: pointer !important;
+    display: inline-block;
+    cursor: pointer;
    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;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    display: inline-flex;
+    display: inline-block;
    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,
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/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[open] .icon-details-open {
+.section-widget-title-details summary > *,
+.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);
-}
-.section-subtitle-summary,
-.section-title-summary {
-    display: flex;
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
+
 .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;
 }
--- a/public/assets/default_theme/icons/arrow-down.svg
+++ b/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>
--- a/public/assets/icons/arrow-down.svg.twig
+++ b/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>
--- a/templates/cards/navigation/view.html.twig
+++ b/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 }}">
--- a/templates/cards/profile/view.html.twig
+++ b/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-subscribers"><strong><a href="{{ actor.getSubscribersUrl() }}">{{ 'Subscribers' | trans }}</a></strong>{{ actor.getSubscribersCount() }}</span>
+                <span class="profile-stats-subscriptions" title="{% trans %} %actor_nickname%'s subscribed count{% endtrans %}">
+                    <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 %}
--- a/templates/settings/macros.html.twig
+++ b/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 }}