From 214992650db16bceca439a60d45fb78035d38af1 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 20 Apr 2022 14:03:47 +0100
Subject: [PATCH] Standardised dropdown list item styles, Extracted page editor
 toolbar

- Updated all dropdown list item actions into three specific styles:
  icon-item, text-item & label-item. Allows a stronger structure while
  prevents mixing of styles as we were getting for header dropdown in
  dark mode.
- Extracted out page editor top toolbar to its own view file & split
  editor switch options to different markdown options.
---
 resources/js/components/auto-suggest.js       |  2 +-
 resources/js/components/code-editor.js        |  2 +-
 resources/lang/en/entities.php                |  6 +-
 resources/sass/_lists.scss                    | 46 +++++++---
 resources/sass/_text.scss                     |  1 -
 .../views/attachments/manager-list.blade.php  |  2 +-
 resources/views/comments/comment.blade.php    |  7 +-
 resources/views/common/header.blade.php       | 22 +++--
 .../views/entities/export-menu.blade.php      |  8 +-
 resources/views/entities/sort.blade.php       |  2 +-
 .../mfa/parts/setup-method-row.blade.php      |  2 +-
 .../pages/parts/editor-toolbar.blade.php      | 86 +++++++++++++++++++
 resources/views/pages/parts/form.blade.php    | 60 +------------
 resources/views/pages/revisions.blade.php     | 10 ++-
 resources/views/settings/audit.blade.php      |  4 +-
 .../settings/recycle-bin/index.blade.php      |  6 +-
 16 files changed, 171 insertions(+), 95 deletions(-)
 create mode 100644 resources/views/pages/parts/editor-toolbar.blade.php

diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js
index 68de49b4a..d1c15c00a 100644
--- a/resources/js/components/auto-suggest.js
+++ b/resources/js/components/auto-suggest.js
@@ -131,7 +131,7 @@ class AutoSuggest {
             return this.hideSuggestions();
         }
 
-        this.list.innerHTML = suggestions.map(value => `<li><button type="button">${escapeHtml(value)}</button></li>`).join('');
+        this.list.innerHTML = suggestions.map(value => `<li><button type="button" class="text-item">${escapeHtml(value)}</button></li>`).join('');
         this.list.style.display = 'block';
         for (const button of this.list.querySelectorAll('button')) {
             button.addEventListener('blur', this.hideSuggestionsIfFocusedLost.bind(this));
diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index f44de813d..4ee3531c5 100644
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -96,7 +96,7 @@ class CodeEditor {
         this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
         this.historyList.innerHTML = historyKeys.map(key => {
              const localTime = (new Date(parseInt(key))).toLocaleTimeString();
-             return `<li><button type="button" data-time="${key}">${localTime}</button></li>`;
+             return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
         }).join('');
     }
 
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 8de379bbb..3921828d8 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -196,8 +196,10 @@ return [
     'pages_edit_draft_save_at' => 'Draft saved at ',
     'pages_edit_delete_draft' => 'Delete Draft',
     'pages_edit_discard_draft' => 'Discard Draft',
-    'pages_edit_switch_to_markdown' => 'Switch to Markdown editor',
-    'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG editor',
+    'pages_edit_switch_to_markdown' => 'Switch to Markdown Editor',
+    'pages_edit_switch_to_markdown_clean' => '(Clean Markdown Content)',
+    'pages_edit_switch_to_markdown_stable' => '(Stable Markdown Content)',
+    'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
     'pages_edit_set_changelog' => 'Set Changelog',
     'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
     'pages_edit_enter_changelog' => 'Enter Changelog',
diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 9cff52972..26d12a25d 100644
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -593,13 +593,22 @@ ul.pagination {
   li.active a {
     font-weight: 600;
   }
-  a, button {
-    display: block;
-    padding: $-xs $-m;
+  button {
+    width: 100%;
+    text-align: start;
+  }
+  li.border-bottom {
+    border-bottom: 1px solid #DDD;
+  }
+  li hr {
+    margin: $-xs 0;
+  }
+  .icon-item, .text-item, .label-item {
+    padding: 8px $-m;
     @include lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
-    line-height: 1.6;
+    line-height: 1.4;
     cursor: pointer;
     &:hover, &:focus {
       text-decoration: none;
@@ -616,15 +625,30 @@ ul.pagination {
       width: 16px;
     }
   }
-  button {
-    width: 100%;
-    text-align: start;
+  .text-item {
+    display: block;
   }
-  li.border-bottom {
-    border-bottom: 1px solid #DDD;
+  .label-item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto min-content;
+    gap: $-m;
   }
-  li hr {
-    margin: $-xs 0;
+  .label-item > *:nth-child(2) {
+    opacity: 0.7;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .icon-item {
+    display: grid;
+    align-items: start;
+    grid-template-columns: 16px auto;
+    gap: $-m;
+    svg {
+      margin-inline-end: 0;
+      margin-block-start: 1px;
+    }
   }
 }
 
diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 884808bb4..51f315614 100644
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -163,7 +163,6 @@ em, i, .italic {
 
 small, p.small, span.small, .text-small {
   font-size: 0.75rem;
-  @include lightDark(color, #5e5e5e, #999);
 }
 
 sup, .superscript {
diff --git a/resources/views/attachments/manager-list.blade.php b/resources/views/attachments/manager-list.blade.php
index b48fde9c0..ebb1c24aa 100644
--- a/resources/views/attachments/manager-list.blade.php
+++ b/resources/views/attachments/manager-list.blade.php
@@ -28,7 +28,7 @@
                             class="drag-card-action text-center text-neg">@icon('close')</button>
                     <div refs="dropdown@menu" class="dropdown-menu">
                         <p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
-                        <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete">{{ trans('common.confirm') }}</button>
+                        <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 9f4a12357..6189c65d4 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -31,7 +31,12 @@
                         <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
                         <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
                             <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
-                            <li><button action="delete" type="button" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</button></li>
+                            <li>
+                                <button action="delete" type="button" class="text-button text-neg icon-item">
+                                    @icon('delete')
+                                    <div>{{ trans('common.delete') }}</div>
+                                </button>
+                            </li>
                         </ul>
                     </div>
                 @endif
diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index d55f3ae2d..b5ac520c1 100644
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -62,26 +62,36 @@
                         </span>
                         <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
                             <li>
-                                <a href="{{ url('/favourites') }}">@icon('star'){{ trans('entities.my_favourites') }}</a>
+                                <a href="{{ url('/favourites') }}" class="icon-item">
+                                    @icon('star')
+                                    <div>{{ trans('entities.my_favourites') }}</div>
+                                </a>
                             </li>
                             <li>
-                                <a href="{{ $currentUser->getProfileUrl() }}">@icon('user'){{ trans('common.view_profile') }}</a>
+                                <a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
+                                    @icon('user')
+                                    <div>{{ trans('common.view_profile') }}</div>
+                                </a>
                             </li>
                             <li>
-                                <a href="{{ $currentUser->getEditUrl() }}">@icon('edit'){{ trans('common.edit_profile') }}</a>
+                                <a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
+                                    @icon('edit')
+                                    <div>{{ trans('common.edit_profile') }}</div>
+                                </a>
                             </li>
                             <li>
                                 <form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
                                       method="post">
                                     {{ csrf_field() }}
-                                    <button class="text-muted icon-list-item text-primary">
-                                        @icon('logout'){{ trans('auth.logout') }}
+                                    <button class="icon-item">
+                                        @icon('logout')
+                                        <div>{{ trans('auth.logout') }}</div>
                                     </button>
                                 </form>
                             </li>
                             <li><hr></li>
                             <li>
-                                @include('common.dark-mode-toggle')
+                                @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
                             </li>
                         </ul>
                     </div>
diff --git a/resources/views/entities/export-menu.blade.php b/resources/views/entities/export-menu.blade.php
index 2b0f5c19d..dd7231095 100644
--- a/resources/views/entities/export-menu.blade.php
+++ b/resources/views/entities/export-menu.blade.php
@@ -5,9 +5,9 @@
         <span>{{ trans('entities.export') }}</span>
     </div>
     <ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
-        <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" rel="noopener">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" rel="noopener">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" rel="noopener">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" rel="noopener">{{ trans('entities.export_md') }} <span class="text-muted float right">.md</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
     </ul>
 </div>
diff --git a/resources/views/entities/sort.blade.php b/resources/views/entities/sort.blade.php
index bf9087397..f81ed797f 100644
--- a/resources/views/entities/sort.blade.php
+++ b/resources/views/entities/sort.blade.php
@@ -16,7 +16,7 @@
                 <div refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
                 <ul refs="dropdown@menu" class="dropdown-menu">
                     @foreach($options as $key => $label)
-                        <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}">{{ $label }}</a></li>
+                        <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" class="text-item">{{ $label }}</a></li>
                     @endforeach
                 </ul>
             </div>
diff --git a/resources/views/mfa/parts/setup-method-row.blade.php b/resources/views/mfa/parts/setup-method-row.blade.php
index e195174c1..271ec1bf4 100644
--- a/resources/views/mfa/parts/setup-method-row.blade.php
+++ b/resources/views/mfa/parts/setup-method-row.blade.php
@@ -19,7 +19,7 @@
                     <form action="{{ url('/mfa/' . $method . '/remove') }}" method="post">
                         {{ csrf_field() }}
                         {{ method_field('delete') }}
-                        <button class="text-primary small delete">{{ trans('common.confirm') }}</button>
+                        <button class="text-primary small text-item">{{ trans('common.confirm') }}</button>
                     </form>
                 </div>
             </div>
diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
new file mode 100644
index 000000000..d7fb76c29
--- /dev/null
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -0,0 +1,86 @@
+<div class="primary-background-light toolbar page-edit-toolbar">
+    <div class="grid third no-break v-center">
+
+        <div class="action-buttons text-left px-m py-xs">
+            <a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
+               class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
+        </div>
+
+        <div class="text-center px-m">
+            <div component="dropdown"
+                 option:dropdown:move-menu="true"
+                 class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
+                <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</button>
+                @icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
+                <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+                    <li>
+                        <button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
+                            @icon('save')
+                            <div>{{ trans('entities.pages_edit_save_draft') }}</div>
+                        </button>
+                    </li>
+                    @if($isDraft)
+                        <li>
+                            <a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
+                                @icon('delete')
+                                {{ trans('entities.pages_edit_delete_draft') }}
+                            </a>
+                        </li>
+                    @endif
+                    <li refs="page-editor@discardDraftWrap" class="{{ $isDraft ? '' : 'hidden' }}">
+                        <button refs="page-editor@discardDraft" type="button" class="text-neg icon-item">
+                            @icon('cancel')
+                            <div>{{ trans('entities.pages_edit_discard_draft') }}</div>
+                        </button>
+                    </li>
+                    @if(userCan('editor-change'))
+                        <li>
+                            @if($editor === 'wysiwyg')
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" class="icon-item">
+                                    @icon('swap-horizontal')
+                                    <div>
+                                        {{ trans('entities.pages_edit_switch_to_markdown') }}
+                                        <br>
+                                        <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
+                                    </div>
+                                </a>
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" class="icon-item">
+                                    @icon('swap-horizontal')
+                                    <div>
+                                        {{ trans('entities.pages_edit_switch_to_markdown') }}
+                                        <br>
+                                        <small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
+                                    </div>
+                                </a>
+                            @else
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" class="icon-item">
+                                    @icon('swap-horizontal')
+                                    <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
+                                </a>
+                            @endif
+                        </li>
+                    @endif
+                </ul>
+            </div>
+        </div>
+
+        <div class="action-buttons px-m py-xs">
+            <div component="dropdown" dropdown-move-menu class="dropdown-container">
+                <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
+                <ul refs="dropdown@menu" class="wide dropdown-menu">
+                    <li class="px-l py-m">
+                        <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
+                        <input refs="page-editor@changelogInput"
+                               name="summary"
+                               id="summary-input"
+                               type="text"
+                               placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
+                    </li>
+                </ul>
+                <span>{{-- Prevents button jumping on menu show --}}</span>
+            </div>
+
+            <button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index ebad2bd72..2c2ab9b92 100644
--- a/resources/views/pages/parts/form.blade.php
+++ b/resources/views/pages/parts/form.blade.php
@@ -15,64 +15,8 @@
      option:page-editor:draft-discarded-text="{{ trans('entities.pages_draft_discarded') }}"
      option:page-editor:set-changelog-text="{{ trans('entities.pages_edit_set_changelog') }}">
 
-    {{--Header Bar--}}
-    <div class="primary-background-light toolbar page-edit-toolbar">
-        <div class="grid third no-break v-center">
-
-            <div class="action-buttons text-left px-m py-xs">
-                <a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
-                   class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
-            </div>
-
-            <div class="text-center px-m py-xs">
-                <div component="dropdown"
-                     option:dropdown:move-menu="true"
-                     class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
-                    <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button"><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</button>
-                    @icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
-                    <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
-                        <li>
-                            <button refs="page-editor@saveDraft" type="button" class="text-pos">@icon('save'){{ trans('entities.pages_edit_save_draft') }}</button>
-                        </li>
-                        @if($isDraft)
-                        <li>
-                            <a href="{{ $model->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('entities.pages_edit_delete_draft') }}</a>
-                        </li>
-                        @endif
-                        <li refs="page-editor@discardDraftWrap" class="{{ $isDraft ? '' : 'hidden' }}">
-                            <button refs="page-editor@discardDraft" type="button" class="text-neg">@icon('cancel'){{ trans('entities.pages_edit_discard_draft') }}</button>
-                        </li>
-                        @if(userCan('editor-change'))
-                            <li>
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor={{ $editor === 'wysiwyg' ? 'markdown' : 'wysiwyg' }}">
-                                    @icon('swap-horizontal'){{ $editor === 'wysiwyg' ? trans('entities.pages_edit_switch_to_markdown') : trans('entities.pages_edit_switch_to_wysiwyg') }}
-                                </a>
-                            </li>
-                        @endif
-                    </ul>
-                </div>
-            </div>
-
-            <div class="action-buttons px-m py-xs">
-                <div component="dropdown" dropdown-move-menu class="dropdown-container">
-                    <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
-                    <ul refs="dropdown@menu" class="wide dropdown-menu">
-                        <li class="px-l py-m">
-                            <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
-                            <input refs="page-editor@changelogInput"
-                                   name="summary"
-                                   id="summary-input"
-                                   type="text"
-                                   placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
-                        </li>
-                    </ul>
-                    <span>{{-- Prevents button jumping on menu show --}}</span>
-                </div>
-
-                <button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
-            </div>
-        </div>
-    </div>
+    {{--Header Toolbar--}}
+    @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
 
     {{--Title input--}}
     <div class="title-input page-title clearfix">
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php
index 5508f362d..87949837b 100644
--- a/resources/views/pages/revisions.blade.php
+++ b/resources/views/pages/revisions.blade.php
@@ -58,7 +58,10 @@
                                                 <form action="{{ $revision->getUrl('/restore') }}" method="POST">
                                                     {!! csrf_field() !!}
                                                     <input type="hidden" name="_method" value="PUT">
-                                                    <button type="submit" class="text-button text-primary">@icon('history'){{ trans('entities.pages_revisions_restore') }}</button>
+                                                    <button type="submit" class="text-primary icon-item">
+                                                        @icon('history')
+                                                        <div>{{ trans('entities.pages_revisions_restore') }}</div>
+                                                    </button>
                                                 </form>
                                             </li>
                                         </ul>
@@ -72,7 +75,10 @@
                                                 <form action="{{ $revision->getUrl('/delete/') }}" method="POST">
                                                     {!! csrf_field() !!}
                                                     <input type="hidden" name="_method" value="DELETE">
-                                                    <button type="submit" class="text-button text-neg">@icon('delete'){{ trans('common.delete') }}</button>
+                                                    <button type="submit" class="text-neg icon-item">
+                                                        @icon('delete')
+                                                        <div>{{ trans('common.delete') }}</div>
+                                                    </button>
                                                 </form>
                                             </li>
                                         </ul>
diff --git a/resources/views/settings/audit.blade.php b/resources/views/settings/audit.blade.php
index ca5dba527..506a735a2 100644
--- a/resources/views/settings/audit.blade.php
+++ b/resources/views/settings/audit.blade.php
@@ -14,9 +14,9 @@
                 <label for="">{{ trans('settings.audit_event_filter') }}</label>
                 <button refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" class="input-base text-left">{{ $listDetails['event'] ?: trans('settings.audit_event_filter_no_filter') }}</button>
                 <ul refs="dropdown@menu" class="dropdown-menu">
-                    <li @if($listDetails['event'] === '') class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => '']) }}">{{ trans('settings.audit_event_filter_no_filter') }}</a></li>
+                    <li @if($listDetails['event'] === '') class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => '']) }}" class="text-item">{{ trans('settings.audit_event_filter_no_filter') }}</a></li>
                     @foreach($activityTypes as $type)
-                        <li @if($type === $listDetails['event']) class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => $type]) }}">{{ $type }}</a></li>
+                        <li @if($type === $listDetails['event']) class="active" @endif><a href="{{ sortUrl('/settings/audit', $listDetails, ['event' => $type]) }}" class="text-item">{{ $type }}</a></li>
                     @endforeach
                 </ul>
             </div>
diff --git a/resources/views/settings/recycle-bin/index.blade.php b/resources/views/settings/recycle-bin/index.blade.php
index 5f2ec333f..56e2437fe 100644
--- a/resources/views/settings/recycle-bin/index.blade.php
+++ b/resources/views/settings/recycle-bin/index.blade.php
@@ -22,7 +22,7 @@
 
                             <form action="{{ url('/settings/recycle-bin/empty') }}" method="POST">
                                 {!! csrf_field() !!}
-                                <button type="submit" class="text-primary small delete">{{ trans('common.confirm') }}</button>
+                                <button type="submit" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
                             </form>
                         </div>
                     </div>
@@ -93,8 +93,8 @@
                         <div component="dropdown" class="dropdown-container">
                             <button type="button" refs="dropdown@toggle" class="button outline">{{ trans('common.actions') }}</button>
                             <ul refs="dropdown@menu" class="dropdown-menu">
-                                <li><a class="block" href="{{ $deletion->getUrl('/restore') }}">{{ trans('settings.recycle_bin_restore') }}</a></li>
-                                <li><a class="block" href="{{ $deletion->getUrl('/destroy') }}">{{ trans('settings.recycle_bin_permanently_delete') }}</a></li>
+                                <li><a class="text-item" href="{{ $deletion->getUrl('/restore') }}">{{ trans('settings.recycle_bin_restore') }}</a></li>
+                                <li><a class="text-item" href="{{ $deletion->getUrl('/destroy') }}">{{ trans('settings.recycle_bin_permanently_delete') }}</a></li>
                             </ul>
                         </div>
                     </td>