Merge pull request #3352 from pixelfed/staging

Staging

CHANGELOG.md

@@ -7,6 +7,7 @@
 - LDAP Authentication ([#3296](https://github.com/pixelfed/pixelfed/pull/3296))
 
 ### Metro 2.0 UI
+- Dark Mode ([cb540373](https://github.com/pixelfed/pixelfed/commit/cb540373))
 - Added Hovercards ([16ced7b4](https://github.com/pixelfed/pixelfed/commit/16ced7b4))
 - Fix word-break on statuses ([16ced7b4](https://github.com/pixelfed/pixelfed/commit/16ced7b4))
 - Add pronouns to hovercards ([33f863e8](https://github.com/pixelfed/pixelfed/commit/33f863e8))

app/Http/Controllers/PublicApiController.php

@@ -378,7 +378,7 @@ class PublicApiController extends Controller
                                return $status;
                           })
                           ->filter(function($s) use($filtered) {
-                                return $s && in_array($s['account']['id'], $filtered) == false;
+                                return $s && isset($s['account']) && in_array($s['account']['id'], $filtered) == false;
                           })
                           ->values();
 
@@ -402,7 +402,7 @@ class PublicApiController extends Controller
             $res = collect($feed)
             ->map(function($k) use($user) {
                 $status = StatusService::get($k);
-                if($user) {
+                if($status && isset($status['account']) && $user) {
                     $status['favourited'] = (bool) LikeService::liked($user->profile_id, $k);
                     $status['bookmarked'] = (bool) BookmarkService::get($user->profile_id, $k);
                     $status['reblogged'] = (bool) ReblogService::get($user->profile_id, $k);
@@ -411,7 +411,7 @@ class PublicApiController extends Controller
                 return $status;
             })
             ->filter(function($s) use($filtered) {
-                return isset($s['account']) && in_array($s['account']['id'], $filtered) == false;
+                return $s && isset($s['account']) && in_array($s['account']['id'], $filtered) == false;
             })
             ->values()
             ->toArray();

public/mix-manifest.json

@@ -6,7 +6,7 @@
     "/js/profile.js": "/js/profile.js?id=42bd878e316ea68be770c1b572a9e61e",
     "/js/status.js": "/js/status.js?id=64ae070933b89df06481c6035f897a2f",
     "/js/timeline.js": "/js/timeline.js?id=ab7a627c078da5cf1a556d496b031442",
-    "/js/compose.js": "/js/compose.js?id=3dc9309013469640610d584aab18648e",
+    "/js/compose.js": "/js/compose.js?id=07a87bcfbf033c6abeaf073b2e96a83b",
     "/js/compose-classic.js": "/js/compose-classic.js?id=f11c60795e27213e446054259fdc8b50",
     "/js/search.js": "/js/search.js?id=4bb81cba317cf1ad35f2c98dce78fd9d",
     "/js/developers.js": "/js/developers.js?id=dd22facb8cf2746992404468a9373ac5",
@@ -20,22 +20,22 @@
     "/js/admin.js": "/js/admin.js?id=fd88b96423314b41cc763a0714554a04",
     "/js/rempro.js": "/js/rempro.js?id=f8a8839ec4d1fc5a2fe75a5355fbf39c",
     "/js/rempos.js": "/js/rempos.js?id=6adb34adf68f74778365143b28fb5b9b",
-    "/js/spa.js": "/js/spa.js?id=88db2cf01039bf44d1443edd64199de1",
+    "/js/spa.js": "/js/spa.js?id=b4ae3271cccd13ad19bf79d7daccebc9",
     "/js/stories.js": "/js/stories.js?id=814a25875cac8987d85c801dcb453114",
     "/js/manifest.js": "/js/manifest.js?id=03b8ee72f882070cabba951c4e5291ed",
-    "/js/home-m9we36ik.js": "/js/home-m9we36ik.js?id=b18af9518d93e9fcb267a8156dfabde3",
-    "/js/compose-m9we36ik.js": "/js/compose-m9we36ik.js?id=53d95fb508bd7009a0e024680a1b6f3b",
-    "/js/post-m9we36ik.js": "/js/post-m9we36ik.js?id=e37c88869f2fab8b92b1e636bc38919b",
-    "/js/profile-m9we36ik.js": "/js/profile-m9we36ik.js?id=7b235dd94dc73e3c89a1b9a44b252b12",
-    "/js/dmym-m9we36ik.js": "/js/dmym-m9we36ik.js?id=081261095b6dbd094accbc7eb54e2ca1",
-    "/js/dmyh-m9we36ik.js": "/js/dmyh-m9we36ik.js?id=13b9657d46bce8896f7bd138187b1cb3",
-    "/js/daci-m9we36ik.js": "/js/daci-m9we36ik.js?id=9ff144ffc5863d5c6848e6627126d65b",
-    "/js/dffc-m9we36ik.js": "/js/dffc-m9we36ik.js?id=9c2a3d8fab38ad5c6495d9be7b3c53e9",
-    "/js/dsfc-m9we36ik.js": "/js/dsfc-m9we36ik.js?id=537ef05bf7ff35c0bb994d6328acdaa0",
-    "/js/dssc-m9we36ik.js": "/js/dssc-m9we36ik.js?id=1ddbfa658ed31cad5c992a7066a41fe7",
+    "/js/home-m9we36ik.js": "/js/home-m9we36ik.js?id=031e8005eae16c601f6775154fc783ba",
+    "/js/compose-m9we36ik.js": "/js/compose-m9we36ik.js?id=884530b8963f483c8c20bf16300e51ea",
+    "/js/post-m9we36ik.js": "/js/post-m9we36ik.js?id=6a9d7dd2a1315a3b871eb08d47246e60",
+    "/js/profile-m9we36ik.js": "/js/profile-m9we36ik.js?id=3346f2f95a9364c50f938cb89889a915",
+    "/js/dmym-m9we36ik.js": "/js/dmym-m9we36ik.js?id=4b4f1712fb32979a4fababe4676d6728",
+    "/js/dmyh-m9we36ik.js": "/js/dmyh-m9we36ik.js?id=9ce762725ef238676780a24217a9bad6",
+    "/js/daci-m9we36ik.js": "/js/daci-m9we36ik.js?id=c1895fd839f97ad32bb661b965f88f18",
+    "/js/dffc-m9we36ik.js": "/js/dffc-m9we36ik.js?id=573a438abc6c0ce6dd6caf1bb8ea9e8e",
+    "/js/dsfc-m9we36ik.js": "/js/dsfc-m9we36ik.js?id=95727d76cc5ac8a1ba2e69f0fa43d4da",
+    "/js/dssc-m9we36ik.js": "/js/dssc-m9we36ik.js?id=bc46dfbe22b65eb77e93f70bc6ac7df3",
     "/css/appdark.css": "/css/appdark.css?id=65bb8633bbd34c87111591cab68cf3dc",
     "/css/app.css": "/css/app.css?id=f2e24fbb268e9946443459877f623d98",
-    "/css/spa.css": "/css/spa.css?id=c1320213cd53b5dbb38057e8054bb0db",
+    "/css/spa.css": "/css/spa.css?id=8f0ae3d3a6614e8a1fe6687d58f6b806",
     "/css/admin.css": "/css/admin.css?id=c370da65565066b3fbcf2808bd0a4468",
     "/css/landing.css": "/css/landing.css?id=56100236f07142e041bb3716e64466a3",
     "/js/vendor.js": "/js/vendor.js?id=81240eb42d2f62ea6368d88a29c16892"

resources/assets/js/components/ComposeModal.vue

@@ -1878,11 +1878,11 @@ export default {
 		}
 		a.list-group-item:hover {
 			text-decoration: none;
-			background-color: #f8f9fa !important;
+			background-color: #f8f9fa;
 		}
 		.compose-action:hover {
 			cursor: pointer;
-			background-color: #f8f9fa !important;
+			background-color: #f8f9fa;
 		}
 		.collections-list-group {
 			max-height: 500px;

resources/assets/js/components/presenter/PhotoAlbumPresenter.vue

@@ -21,8 +21,8 @@
 			:hash="status.media_attachments[0].blurhash"
 			:alt="altText(status)"/>
 	</div>
-	<div v-else class="w-100 h-100 p-0">
-		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
+	<div v-else class="w-100 h-100 p-0 album-wrapper">
+		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0" :id="'carousel-' + status.id">
 			<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
 
 				<img
@@ -31,71 +31,67 @@
 					:src="img.url"
 					:alt="altText(img)"
 					loading="lazy"
+					:data-bp="img.url"
 					onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 
-				<p v-if="!status.sensitive && sensitive"
-					@click="status.sensitive = true"
-					style="
-					margin-top: 0;
-					padding: 10px;
-					color: #fff;
-					font-size: 10px;
-					text-align: right;
-					position: absolute;
-					top: 0;
-					right: 0;
-					border-top-left-radius: 5px;
-					cursor: pointer;
-					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				">
-					<i class="fas fa-eye-slash fa-lg"></i>
-				</p>
-
-				<p
-					v-if="status.media_attachments[0].license"
-					style="
-					margin-bottom: 0;
-					padding: 0 5px;
-					color: #fff;
-					font-size: 10px;
-					text-align: right;
-					position: absolute;
-					bottom: 0;
-					right: 0;
-					border-top-left-radius: 5px;
-					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				">
-					<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
-				</p>
 			</slide>
 		</carousel>
+		<div class="album-overlay">
+			<p v-if="!status.sensitive && sensitive"
+				@click="status.sensitive = true"
+				style="
+				margin-top: 0;
+				padding: 10px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				top: 0;
+				right: 0;
+				border-top-left-radius: 5px;
+				cursor: pointer;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<i class="fas fa-eye-slash fa-lg"></i>
+			</p>
+
+			<p @click.prevent="toggleLightbox"
+				style="
+				margin-top: 0;
+				padding: 10px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				left: 0;
+				top: 0;
+				border-bottom-right-radius: 5px;
+				cursor: pointer;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<i class="fas fa-expand fa-lg"></i>
+			</p>
+
+			<p
+				v-if="status.media_attachments[0].license"
+				style="
+				margin-bottom: 0;
+				padding: 0 5px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				border-top-left-radius: 5px;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
+			</p>
+		</div>
 	</div>
 </template>
 
-<style type="text/css" scoped>
-  .card-img-top {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-  .content-label-wrapper {
-  	position: relative;
-  }
-  .content-label {
-  	margin: 0;
-  	position: absolute;
-  	top:50%;
-  	left:50%;
-  	transform: translate(-50%, -50%);
-  	display: flex;
-  	flex-direction: column;
-  	align-items: center;
-  	justify-content: center;
-  	width: 100%;
-  	height: 100%;
-  	z-index: 2;
-  	background: rgba(0, 0, 0, 0.2)
-  }
-</style>
 
 <script type="text/javascript">
 	import BigPicture from 'bigpicture';
@@ -125,7 +121,9 @@
 
 			toggleLightbox(e) {
 				BigPicture({
-					el: e.target
+					el: e.target,
+					gallery: '#carousel-' + this.status.id,
+					position: this.$refs.carousel.currentPage
 				})
 			},
 
@@ -161,3 +159,31 @@
 		}
 	}
 </script>
+
+<style type="text/css" scoped>
+  .card-img-top {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+  .content-label-wrapper {
+  	position: relative;
+  }
+  .content-label {
+  	margin: 0;
+  	position: absolute;
+  	top:50%;
+  	left:50%;
+  	transform: translate(-50%, -50%);
+  	display: flex;
+  	flex-direction: column;
+  	align-items: center;
+  	justify-content: center;
+  	width: 100%;
+  	height: 100%;
+  	z-index: 2;
+  	background: rgba(0, 0, 0, 0.2)
+  }
+  .album-wrapper {
+  	position: relative;
+  }
+</style>

resources/assets/js/i18n/uk.json

@@ -1,150 +1,170 @@
 {
     "common": {
-        "comment": "Comment",
-        "commented": "Commented",
-        "comments": "Comments",
-        "like": "Like",
-        "liked": "Liked",
-        "likes": "Likes",
-        "share": "Share",
-        "shared": "Shared",
-        "shares": "Shares",
-        "unshare": "Unshare",
-        "cancel": "Cancel",
-        "copyLink": "Copy Link",
-        "delete": "Delete",
-        "error": "Error",
-        "errorMsg": "Something went wrong. Please try again later.",
-        "oops": "Oops!",
-        "other": "Other",
-        "readMore": "Read more",
-        "success": "Success",
-        "sensitive": "Sensitive",
-        "sensitiveContent": "Sensitive Content",
-        "sensitiveContentWarning": "This post may contain sensitive content"
+        "comment": "\u041a\u043e\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438",
+        "commented": "\u041f\u0440\u043e\u043a\u043e\u043c\u0435\u043d\u0442\u043e\u0432\u0430\u043d\u043e",
+        "comments": "\u041a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456",
+        "like": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u0442\u0438",
+        "liked": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043e",
+        "likes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
+        "share": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438",
+        "shared": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043e",
+        "shares": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043d\u044f",
+        "unshare": "\u041d\u0435 \u043f\u043e\u0448\u0438\u0440\u044e\u0432\u0430\u0442\u0438",
+        "bookmark": "\u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0430",
+        "cancel": "\u0421\u043a\u0430\u0441\u0443\u0432\u0430\u0442\u0438",
+        "copyLink": "\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f",
+        "delete": "\u0412\u0438\u0434\u0430\u043b\u0438\u0442\u0438",
+        "error": "\u041f\u043e\u043c\u0438\u043b\u043a\u0430",
+        "errorMsg": "\u0429\u043e\u0441\u044c \u043f\u0456\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u041f\u043e\u0432\u0442\u043e\u0440\u0456\u0442\u044c \u0441\u043f\u0440\u043e\u0431\u0443 \u0437\u0433\u043e\u0434\u043e\u043c",
+        "oops": "\u0419\u043e\u0439!",
+        "other": "\u0406\u043d\u0448\u0435",
+        "readMore": "\u0414\u043e\u043a\u043b\u0430\u0434\u043d\u0456\u0448\u0435",
+        "success": "\u0423\u0441\u043f\u0456\u0445",
+        "proceed": "\u041f\u0440\u043e\u0434\u043e\u0432\u0436\u0438\u0442\u0438",
+        "next": "\u0414\u0430\u043b\u0456",
+        "close": "\u0417\u0430\u043a\u0440\u0438\u0442\u0438",
+        "clickHere": "\u043d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c \u0442\u0443\u0442",
+        "sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0435",
+        "sensitiveContent": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
+        "sensitiveContentWarning": "\u0426\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u043c\u043e\u0436\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0447\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442"
     },
     "site": {
-        "terms": "Terms of Use",
-        "privacy": "Privacy Policy"
+        "terms": "\u0423\u043c\u043e\u0432\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f",
+        "privacy": "\u041f\u043e\u043b\u0456\u0442\u0438\u043a\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u0456"
     },
     "navmenu": {
-        "search": "Search",
-        "admin": "Admin Dashboard",
-        "homeFeed": "Home Feed",
-        "localFeed": "Local Feed",
-        "globalFeed": "Global Feed",
-        "discover": "Discover",
-        "directMessages": "Direct Messages",
-        "notifications": "Notifications",
-        "groups": "Groups",
-        "stories": "Stories",
-        "profile": "Profile",
-        "drive": "Drive",
-        "settings": "Settings",
-        "compose": "Create New",
-        "logout": "Logout",
-        "about": "About",
-        "help": "Help",
-        "language": "Language",
-        "privacy": "Privacy",
-        "terms": "Terms",
-        "backToPreviousDesign": "Go back to previous design"
+        "search": "\u041f\u043e\u0448\u0443\u043a",
+        "admin": "\u0410\u0434\u043c\u0456\u043d\u043f\u0430\u043d\u0435\u043b\u044c",
+        "homeFeed": "\u0414\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "localFeed": "\u041c\u0456\u0441\u0446\u0435\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "globalFeed": "\u0421\u0432\u0456\u0442\u043e\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "discover": "\u0426\u0456\u043a\u0430\u0432\u0435",
+        "directMessages": "\u041f\u0440\u044f\u043c\u0456 \u043b\u0438\u0441\u0442\u0438",
+        "notifications": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f",
+        "groups": "\u0413\u0440\u0443\u043f\u0438",
+        "stories": "\u0421\u0442\u043e\u0440\u0456",
+        "profile": "\u041f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "drive": "\u0421\u0445\u043e\u0432\u0438\u0449\u0435",
+        "settings": "\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438",
+        "compose": "\u0421\u0442\u0432\u043e\u0440\u0438\u0442\u0438",
+        "logout": "\u0412\u0438\u0439\u0442\u0438",
+        "about": "\u041f\u0440\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a",
+        "help": "\u0414\u043e\u0432\u0456\u0434\u043a\u0430",
+        "language": "\u041c\u043e\u0432\u0430",
+        "privacy": "\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u0456\u0441\u0442\u044c",
+        "terms": "\u0423\u043c\u043e\u0432\u0438",
+        "backToPreviousDesign": "\u041f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043c\u0438\u043d\u0443\u043b\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d"
     },
     "directMessages": {
-        "inbox": "Inbox",
-        "sent": "Sent",
-        "requests": "Requests"
+        "inbox": "\u0412\u0445\u0456\u0434\u043d\u0456",
+        "sent": "\u041d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u0456",
+        "requests": "\u0417\u0430\u043f\u0438\u0442\u0438"
     },
     "notifications": {
-        "liked": "liked your",
-        "commented": "commented on your",
-        "reacted": "reacted to your",
-        "shared": "shared your",
-        "tagged": "tagged you in a",
-        "updatedA": "updated a",
-        "sentA": "sent a",
-        "followed": "followed",
-        "mentioned": "mentioned",
-        "you": "you",
-        "yourApplication": "Your application to join",
-        "applicationApproved": "was approved!",
-        "applicationRejected": "was rejected. You can re-apply to join in 6 months.",
-        "dm": "dm",
-        "groupPost": "group post",
-        "modlog": "modlog",
-        "post": "post",
-        "story": "story"
+        "liked": "\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0443\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f \u043f\u0456\u0434 \u0432\u0430\u0448",
+        "commented": "\u043a\u043e\u043c\u0435\u043d\u0442\u0443\u0454 \u0432\u0430\u0448",
+        "reacted": "\u0440\u0435\u0430\u0433\u0443\u0454 \u043d\u0430 \u0432\u0430\u0448",
+        "shared": "\u043f\u043e\u0448\u0438\u0440\u044e\u0454 \u0432\u0430\u0448",
+        "tagged": "\u043f\u043e\u0437\u043d\u0430\u0447\u0430\u0454 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437",
+        "updatedA": "\u043e\u043d\u043e\u0432\u043b\u044e\u0454",
+        "sentA": "\u043d\u0430\u0434\u0441\u0438\u043b\u0430\u0454",
+        "followed": "\u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0443\u0454",
+        "mentioned": "\u0437\u0433\u0430\u0434\u0443\u0454",
+        "you": "\u0432\u0430\u0441",
+        "yourApplication": "\u0412\u0430\u0448\u0443 \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u0439\u043d\u0443 \u0437\u0430\u044f\u0432\u043a\u0443",
+        "applicationApproved": "\u043f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0436\u0435\u043d\u043e!",
+        "applicationRejected": "\u0432\u0456\u0434\u0445\u0438\u043b\u0435\u043d\u043e. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u0438 \u0441\u043f\u0440\u043e\u0431\u0443 \u0447\u0435\u0440\u0435\u0437 6 \u043c\u0456\u0441\u044f\u0446\u0456\u0432.",
+        "dm": "\u043b\u0438\u0441\u0442",
+        "groupPost": "\u0434\u043e\u043f\u0438\u0441 \u0443 \u0433\u0440\u0443\u043f\u0456",
+        "modlog": "\u043c\u043e\u0434\u0436\u0443\u0440\u043d\u0430\u043b",
+        "post": "\u0434\u043e\u043f\u0438\u0441",
+        "story": "\u0441\u0442\u043e\u0440\u0456",
+        "noneFound": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u044c \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e"
     },
     "post": {
-        "shareToFollowers": "Share to followers",
-        "shareToOther": "Share to other",
-        "noLikes": "No likes yet",
-        "uploading": "Uploading"
+        "shareToFollowers": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
+        "shareToOther": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0456\u043d\u0448\u0438\u043c",
+        "noLikes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u044c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
+        "uploading": "\u0412\u0438\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f"
     },
     "profile": {
-        "posts": "Posts",
-        "followers": "Followers",
-        "following": "Following",
-        "admin": "Admin",
-        "collections": "Collections",
-        "follow": "Follow",
-        "unfollow": "Unfollow",
-        "editProfile": "Edit Profile",
-        "followRequested": "Follow Requested",
-        "joined": "Joined",
-        "emptyCollections": "We can't seem to find any collections",
-        "emptyPosts": "We can't seem to find any posts"
+        "posts": "\u0414\u043e\u043f\u0438\u0441\u0438",
+        "followers": "\u0410\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u044f",
+        "following": "\u041f\u0456\u0434\u043f\u0438\u0441\u043a\u0438",
+        "admin": "\u0410\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u044f",
+        "collections": "\u0417\u0431\u0456\u0440\u043a\u0438",
+        "follow": "\u0421\u0442\u0435\u0436\u0438\u0442\u0438",
+        "unfollow": "\u041d\u0435 \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
+        "editProfile": "\u0420\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "followRequested": "\u0417\u0430\u043f\u0438\u0442 \u043d\u0430 \u0441\u0442\u0435\u0436\u0435\u043d\u043d\u044f",
+        "joined": "\u0414\u043e\u043b\u0443\u0447\u0430\u0454\u0442\u044c\u0441\u044f",
+        "emptyCollections": "\u0417\u0431\u0456\u0440\u043e\u043a \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
+        "emptyPosts": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
     },
     "menu": {
-        "viewPost": "View Post",
-        "viewProfile": "View Profile",
-        "moderationTools": "Moderation Tools",
-        "report": "Report",
-        "archive": "Archive",
-        "unarchive": "Unarchive",
-        "embed": "Embed",
-        "selectOneOption": "Select one of the following options",
-        "unlistFromTimelines": "Unlist from Timelines",
-        "addCW": "Add Content Warning",
-        "removeCW": "Remove Content Warning",
-        "markAsSpammer": "Mark as Spammer",
-        "markAsSpammerText": "Unlist + CW existing and future posts",
-        "spam": "Spam",
-        "sensitive": "Sensitive Content",
-        "abusive": "Abusive or Harmful",
-        "underageAccount": "Underage Account",
-        "copyrightInfringement": "Copyright Infringement",
-        "impersonation": "Impersonation",
-        "scamOrFraud": "Scam or Fraud",
-        "confirmReport": "Confirm Report",
-        "confirmReportText": "Are you sure you want to report this post?",
-        "reportSent": "Report Sent!",
-        "reportSentText": "We have successfully received your report.",
-        "reportSentError": "There was an issue reporting this post.",
-        "modAddCWConfirm": "Are you sure you want to add a content warning to this post?",
-        "modCWSuccess": "Successfully added content warning",
-        "modRemoveCWConfirm": "Are you sure you want to remove the content warning on this post?",
-        "modRemoveCWSuccess": "Successfully removed content warning",
-        "modUnlistConfirm": "Are you sure you want to unlist this post?",
-        "modUnlistSuccess": "Successfully unlisted post",
-        "modMarkAsSpammerConfirm": "Are you sure you want to mark this user as a spammer? All existing and future posts will be unlisted on timelines and a content warning will be applied.",
-        "modMarkAsSpammerSuccess": "Successfully marked account as spammer",
-        "toFollowers": "to Followers",
-        "showCaption": "Show Caption",
-        "showLikes": "Show Likes",
-        "compactMode": "Compact Mode",
-        "embedConfirmText": "By using this embed, you agree to our",
-        "deletePostConfirm": "Are you sure you want to delete this post?",
-        "archivePostConfirm": "Are you sure you want to archive this post?",
-        "unarchivePostConfirm": "Are you sure you want to unarchive this post?"
+        "viewPost": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u0434\u043e\u043f\u0438\u0441",
+        "viewProfile": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "moderationTools": "\u0417\u0430\u0441\u043e\u0431\u0438 \u043c\u043e\u0434\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f",
+        "report": "\u0421\u043a\u0430\u0440\u0433\u0430",
+        "archive": "\u0410\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
+        "unarchive": "\u0420\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
+        "embed": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442",
+        "selectOneOption": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043e\u0434\u0438\u043d \u0456\u0437 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0445 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0456\u0432",
+        "unlistFromTimelines": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a",
+        "addCW": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0433\u0442\u0438 \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442",
+        "removeCW": "\u0412\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
+        "markAsSpammer": "\u041f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u044f\u043a \u0441\u043f\u0430\u043c",
+        "markAsSpammerText": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0456 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438, \u0434\u043e\u0434\u0430\u044e\u0447\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
+        "spam": "\u0421\u043f\u0430\u043c",
+        "sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
+        "abusive": "\u041e\u0431\u0440\u0430\u0436\u0430\u0454 \u0447\u0438 \u0448\u043a\u043e\u0434\u0438\u0442\u044c",
+        "underageAccount": "\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043d\u0456\u0439 \u0432\u0456\u043a",
+        "copyrightInfringement": "\u041f\u043e\u0440\u0443\u0448\u0443\u0454 \u0430\u0432\u0442\u043e\u0440\u0441\u044c\u043a\u0456 \u043f\u0440\u0430\u0432\u0430",
+        "impersonation": "\u0412\u0434\u0430\u0454 \u043a\u043e\u0433\u043e\u0441\u044c",
+        "scamOrFraud": "\u0428\u0430\u0445\u0440\u0430\u0439\u0441\u0442\u0432\u043e",
+        "confirmReport": "\u041f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0438 \u0441\u043a\u0430\u0440\u0433\u0443",
+        "confirmReportText": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043a\u0430\u0440\u0436\u0438\u0442\u0438\u0441\u044c \u043d\u0430 \u0434\u043e\u043f\u0438\u0441?",
+        "reportSent": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e!",
+        "reportSentText": "\u041c\u0438 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u043b\u0438 \u0432\u0430\u0448\u0443 \u0441\u043a\u0430\u0440\u0433\u0443.",
+        "reportSentError": "\u0412\u0438\u043d\u0438\u043a\u043b\u0430 \u043f\u043e\u043c\u0438\u043b\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u0456 \u0441\u043a\u0430\u0440\u0433\u0438.",
+        "modAddCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0446\u044c\u043e\u043c\u0443 \u0434\u043e\u043f\u0438\u0441\u0443?",
+        "modCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0434\u043e\u0434\u0430\u043d\u043e",
+        "modRemoveCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0456\u0437 \u0446\u044c\u043e\u0433\u043e \u0434\u043e\u043f\u0438\u0441\u0443?",
+        "modRemoveCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0435\u043d\u043e",
+        "modUnlistConfirm": "\u0422\u043e\u0447\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441?",
+        "modUnlistSuccess": "\u0414\u043e\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u043d\u043e",
+        "modMarkAsSpammerConfirm": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0446\u0435\u0439 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u044f\u043a \u0441\u043f\u0430\u043c? \u0423\u0441\u0456 \u043d\u0430\u044f\u0432\u043d\u0456 \u0439 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438 \u0431\u0443\u0434\u0435 \u0441\u0445\u043e\u0432\u0430\u043d\u043e \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a, \u0456 \u0457\u043c \u0431\u0443\u0434\u0435 \u0434\u043e\u0434\u0430\u043d\u043e \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442.",
+        "modMarkAsSpammerSuccess": "\u041e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u044f\u043a \u0441\u043f\u0430\u043c",
+        "toFollowers": "\u0434\u043e \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
+        "showCaption": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u043f\u0456\u0434\u043f\u0438\u0441",
+        "showLikes": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u0432\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
+        "compactMode": "\u041a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0438\u0439 \u0440\u0435\u0436\u0438\u043c",
+        "embedConfirmText": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u044e\u0447\u0438 \u043a\u0443\u0434\u0438\u0441\u044c \u0434\u043e\u043f\u0438\u0441, \u0432\u0438 \u043f\u043e\u0433\u043e\u0434\u0436\u0443\u0454\u0442\u0435 \u043d\u0430\u0448\u0456",
+        "deletePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u0434\u0430\u043b\u0438\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
+        "archivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
+        "unarchivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0440\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?"
     },
     "story": {
-        "add": "Add Story"
+        "add": "\u0414\u043e\u0434\u0430\u0442\u0438 \u0441\u0442\u043e\u0440\u0456"
     },
     "timeline": {
-        "peopleYouMayKnow": "People you may know"
+        "peopleYouMayKnow": "\u0419\u043c\u043e\u0432\u0456\u0440\u043d\u0456 \u0437\u043d\u0430\u0439\u043e\u043c\u0456",
+        "onboarding": {
+            "welcome": "\u0412\u0456\u0442\u0430\u0454\u043c\u043e",
+            "thisIsYourHomeFeed": "\u0426\u0435 \u0432\u0430\u0448\u0430 \u0434\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430 \u2014 \u0442\u0443\u0442 \u0431\u0443\u0434\u0443\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u0438 \u0432\u0456\u0434 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0445 \u0437\u0430\u043f\u0438\u0441\u0456\u0432, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0438 \u0441\u0442\u0435\u0436\u0438\u0442\u0435, \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0434\u043e\u0434\u0430\u043d\u043d\u044f.",
+            "letUsHelpYouFind": "\u041c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0442\u0438 \u0432\u0430\u043c \u0437\u043d\u0430\u0439\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u0438\u0445 \u043b\u044e\u0434\u0435\u0439, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0430\u0440\u0442\u043e \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
+            "refreshFeed": "\u041e\u043d\u043e\u0432\u0438\u0442\u0438 \u043c\u043e\u044e \u0441\u0442\u0440\u0456\u0447\u043a\u0443"
+        }
     },
     "hashtags": {
-        "emptyFeed": "We can't seem to find any posts for this hashtag"
+        "emptyFeed": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0456\u0437 \u0446\u0438\u043c \u0445\u0435\u0448\u0442\u0435\u0433\u043e\u043c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
+    },
+    "report": {
+        "report": "\u0421\u043a\u0430\u0440\u0433\u0430",
+        "selectReason": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043f\u0456\u0434\u0441\u0442\u0430\u0432\u0443",
+        "reported": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e",
+        "sendingReport": "\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0441\u043a\u0430\u0440\u0433\u0438",
+        "thanksMsg": "\u0414\u044f\u043a\u0443\u0454\u043c\u043e \u0437\u0430 \u0441\u043a\u0430\u0440\u0433\u0443: \u0432\u0438 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454\u0442\u0435 \u0432\u0431\u0435\u0437\u043f\u0435\u0447\u0438\u0442\u0438 \u043d\u0430\u0448\u0443 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0443!",
+        "contactAdminMsg": "\u042f\u043a\u0449\u043e \u0431\u0430\u0436\u0430\u0454\u0442\u0435 \u0441\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0443\u0432\u0430\u0442\u0438 \u0437 \u0430\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u0454\u044e \u043f\u0440\u043e \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u0447\u0438 \u0441\u043a\u0430\u0440\u0433\u0443"
     }
 }

resources/assets/sass/spa.scss

@@ -1,18 +1,123 @@
 @import "lib/ibmplexsans";
 
-body {
-	background: rgba(243,244,246,1);
-	font-family: 'IBM Plex Sans', sans-serif;
+:root {
+	--light: #fff;
+	--dark: #000;
+	--body-bg: rgba(243,244,246,1);
+	--body-color: #212529;
+	--nav-bg: #fff;
+	--bg-light: #f8f9fa;
+
+	--primary: #3B82F6;
+	--light-gray: #f8f9fa;
+	--text-lighter: #94a3b8;
+
+	--card-bg: #fff;
+	--light-hover-bg: #f9fafb;
+	--btn-light-border: #fff;
+	--input-border: #e2e8f0;
+	--comment-bg: #eff2f5;
+	--border-color: #dee2e6;
+	--card-header-accent: #f9fafb;
+
+	--dropdown-item-hover-bg: #e9ecef;
+	--dropdown-item-hover-color: #16181b;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #334155;
 }
 
-.primary {
-	color: #3B82F6;
+@media (prefers-color-scheme: dark) {
+	:root {
+		--light: #000;
+		--dark: #fff;
+		--body-bg: #000;
+		--body-color: #9ca3af;
+		--nav-bg: #000;
+		--bg-light: #212124;
+
+		--light-gray: #212124;
+		--text-lighter: #818181;
+
+		--card-bg: #161618;
+		--light-hover-bg: #212124;
+		--btn-light-border: #161618;
+		--input-border: #161618;
+		--comment-bg: #212124;
+		--border-color: #212124;
+		--card-header-accent: #212124;
+
+		--dropdown-item-hover-bg: #000;
+		--dropdown-item-hover-color: #818181;
+		--dropdown-item-color: #64748b;
+		--dropdown-item-active-color: #fff;
+	}
+}
+
+.force-light-mode {
+	--light: #fff;
+	--dark: #000;
+	--body-bg: rgba(243,244,246,1);
+	--body-color: #212529;
+	--nav-bg: #fff;
+	--bg-light: #f8f9fa;
+
+	--primary: #3B82F6;
+	--light-gray: #f8f9fa;
+	--text-lighter: #94a3b8;
+
+	--card-bg: #fff;
+	--light-hover-bg: #f9fafb;
+	--btn-light-border: #fff;
+	--input-border: #e2e8f0;
+	--comment-bg: #eff2f5;
+	--border-color: #dee2e6;
+	--card-header-accent: #f9fafb;
+
+	--dropdown-item-hover-bg: #e9ecef;
+	--dropdown-item-hover-color: #16181b;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #334155;
+}
+
+.force-dark-mode {
+	--light: #000;
+	--dark: #fff;
+	--body-bg: #000;
+	--body-color: #9ca3af;
+	--nav-bg: #000;
+	--bg-light: #212124;
+
+	--light-gray: #212124;
+	--text-lighter: #818181;
+
+	--card-bg: #161618;
+	--light-hover-bg: #212124;
+	--btn-light-border: #161618;
+	--input-border: #161618;
+	--comment-bg: #212124;
+	--border-color: #212124;
+	--card-header-accent: #212124;
+
+	--dropdown-item-hover-bg: #000;
+	--dropdown-item-hover-color: #818181;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #b3b3b3;
+}
+
+body {
+	background: var(--body-bg);
+	font-family: 'IBM Plex Sans', sans-serif;
+	color: var(--body-color);
 }
 
 .web-wrapper {
 	margin-bottom: 10rem;
 }
 
+.container-fluid {
+	max-width: 1440px !important;
+}
+
 .jumbotron {
 	border-radius: 18px;
 }
@@ -27,23 +132,162 @@ body {
 	}
 }
 
+.navbar-laravel {
+	background-color: var(--nav-bg);
+}
+
 .sticky-top {
 	z-index: 2;
 }
 
-.container-fluid {
-	max-width: 1440px !important;
+.navbar-light .navbar-brand {
+	color: var(--dark);
+
+	&:hover {
+		color: var(--dark);
+	}
+}
+
+.primary {
+	color: var(--primary);
 }
 
 .text-lighter {
-	color: #94a3b8 !important;
+	color: var(--text-lighter) !important;
+}
+
+.text-dark {
+    color: var(--body-color) !important;
+
+    &:hover {
+    	color: var(--dark) !important;
+    }
+}
+
+a.text-dark:hover {
+    color: var(--dark) !important;
 }
 
 .badge-primary {
-	background-color: #3B82F6;
+	background-color: var(--primary);
 }
 
-.btn-primary.primary {
-	background-color: #3B82F6;
+.btn-primary {
+	background-color: var(--primary);
 	color: #fff !important;
 }
+
+.btn-outline-light {
+	border-color: var(--light-gray);
+}
+
+.border {
+    border: 1px solid var(--border-color) !important;
+}
+
+.bg-white,
+.bg-light {
+	background-color: var(--bg-light) !important;
+	border-color: var(--bg-light) !important;
+}
+
+.btn-light {
+	background-color: var(--light-gray);
+	border-color: var(--btn-light-border);
+	color: var(--body-color);
+
+	&:hover {
+		color: var(--body-color);
+		background-color: var(--card-bg);
+		border-color: var(--btn-light-border);
+	}
+}
+
+.autocomplete-input {
+	border: 1px solid var(--light-gray) !important;
+	color: var(--body-color);
+}
+
+.autocomplete-result-list {
+	background: var(--light) !important;
+}
+
+.dropdown-menu,
+span.twitter-typeahead .tt-menu,
+.form-control {
+	border: 1px solid var(--border-color) !important;
+	color: var(--body-color);
+	background-color: var(--card-bg);
+}
+
+.tribute-container li,
+.dropdown-item,
+span.twitter-typeahead .tt-suggestion {
+	color: var(--body-color);
+}
+
+.dropdown-item:hover,
+span.twitter-typeahead .tt-suggestion:hover,
+.dropdown-item:focus,
+span.twitter-typeahead .tt-suggestion:focus {
+	color: var(--dropdown-item-hover-color);
+    background-color: var(--dropdown-item-hover-bg);
+    text-decoration: none;
+}
+
+.popover,
+.modal-content,
+.form-control:focus,
+.tribute-container ul,
+.list-group-item,
+.card,
+.card-header,
+.card-footer,
+.ph-item {
+	background-color: var(--card-bg);
+}
+
+.badge-light,
+.breadcrumb,
+.ph-avatar,
+.ph-picture,
+.ph-row div {
+	background-color: var(--light-gray);
+}
+
+.card-header,
+.border-top,
+.border-bottom {
+	border-color: var(--border-color) !important;
+}
+
+.modal-header {
+	border-color: var(--border-color);
+}
+
+.compose-action:hover {
+	background-color: var(--light-gray) !important;
+}
+
+.dropdown-divider {
+	border-color: var(--dropdown-item-hover-bg);
+}
+
+.metro-nav {
+	&.flex-column {
+		background-color: var(--card-bg);
+
+		.nav-item {
+			.nav-link:hover {
+				background-color: var(--light-hover-bg);
+			}
+		}
+	}
+}
+
+.child-reply-form {
+	.form-control {
+		border-color: var(--input-border);
+		color: var(--body-color);
+	}
+}

resources/views/settings/labs.blade.php

@@ -6,14 +6,7 @@
 		<p class="lead">Experimental features</p>
 	</div>
 	<hr>
-	<div class="alert alert-warning px-3 h6">
-		We are deprecating Labs in a future version. Some features will no longer be supported. For more information, click <a href="{{route('help.labs-deprecation')}}" class="font-weight-bold">here</a>.
-	</div>
-	<div class="py-3">
-		<p class="font-weight-bold text-muted text-center">UI</p>
-		<hr>
-	</div>
-	<form method="post">
+	<form method="post" id="form">
 		@csrf
 		<div class="form-check pb-3">
 			<input class="form-check-input" type="checkbox" name="dark_mode" id="dark_mode" {{request()->hasCookie('dark-mode') ? 'checked':''}}>
@@ -22,265 +15,30 @@
 			</label>
 			<p class="text-muted small help-text">Use dark mode theme.</p>
 		</div>
-		@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
-			@if($profile->profile_layout == 'moment')
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}">
-				<label class="form-check-label font-weight-bold" for="profile_layout">
-					{{__('Use MomentUI for posts and your profile')}}
-				</label>
-				<p class="text-muted small help-text">MomentUI offers an alternative layout for posts and your profile.</p>
-			</div>
-			<div class="form-check pb-3">
-				<label class="form-check-label font-weight-bold mb-3" for="profile_layout">
-					{{__('MomentUI Profile Header Color')}}
-				</label>
-				<div class="row">
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-pixelfed rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Default</p>
-							<input class="form-check-input mx-0 pl-0" type="radio" name="moment_bg" value="default" {{$profile->header_bg == 'default' || !$profile->header_bg ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-azure rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Azure</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="azure" {{$profile->header_bg == 'azure' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-passion rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Passion</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="passion" {{$profile->header_bg == 'passion' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-reef rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Reef</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="reef" {{$profile->header_bg == 'reef' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-lush rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Lush</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="lush" {{$profile->header_bg == 'lush' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-neon rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Neon</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="neon" {{$profile->header_bg == 'neon' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-flare rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Flare</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="flare" {{$profile->header_bg == 'flare' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-morning rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Morning</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="morning" {{$profile->header_bg == 'morning' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-tranquil rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Tranquil</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="tranquil" {{$profile->header_bg == 'tranquil' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-mauve rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Mauve</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="mauve" {{$profile->header_bg == 'mauve' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-argon rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Argon</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="argon" {{$profile->header_bg == 'argon' ? 'checked':''}}>
-						</div>
-					</div>
-					<div class="col-6 col-sm-3 pb-5">
-						<div class="">
-							<p class="form-check-label">
-								<div class="bg-moment-royal rounded-circle box-shadow" style="width:60px; height:60px"></div>
-							</p>
-							<p class="mb-0 small text-muted">Royal</p>
-							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="royal" {{$profile->header_bg == 'royal' ? 'checked':''}}>
-						</div>
-					</div>
-				</div>
-				<p class="text-muted small help-text">Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.</p>
-			</div>
-			@else
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}" disabled>
-				<label class="form-check-label font-weight-bold" for="profile_layout">
-					{{__('Use MomentUI for posts and your profile')}}
-				</label>
-				<p class="text-muted small help-text"><span class="badge badge-secondary">DEPRECATED</span> MomentUI offers an alternative layout for posts and your profile.</p>
-			</div>
-			@endif
-			
-			@if(config('exp.rec') == true)
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" name="show_suggestions" id="show_suggestions">
-				<label class="form-check-label font-weight-bold" for="show_suggestions">
-					{{__('Profile Suggestions')}}
-				</label>
-				<p class="text-muted small help-text">Show Profile Suggestions.</p>
-			</div>
-			@endif
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" name="show_readmore" id="show_readmore">
-				<label class="form-check-label font-weight-bold" for="show_readmore">
-					{{__('Use Read More')}}
-				</label>
-				<p class="text-muted small help-text">Collapses captions/comments more than 3 lines.</p>
-			</div>
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" id="distraction_free" disabled>
-				<label class="form-check-label font-weight-bold">Simple Mode (Timelines only)</label>
-				<p class="text-muted small help-text"><span class="badge badge-secondary">REMOVED</span> An experimental content-first timeline layout</p>
-			</div>
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" id="show_tips">
-				<label class="form-check-label font-weight-bold">Show Announcements</label>
-				<p class="text-muted small help-text">Show Announcements on Timelines (Desktop Only)</p>
-			</div>
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" id="force_metro">
-				<label class="form-check-label font-weight-bold">Force Metro Layout</label>
-				<p class="text-muted small help-text">Force MetroUI layout for profiles and posts.</p>
-			</div>
-			@if(config('exp.rec') == true)
-			<div class="py-3">
-				<p class="font-weight-bold text-muted text-center">Discovery</p>
-				<hr>
-			</div>
-			<div class="form-check pb-3">
-				<input class="form-check-input" type="checkbox" name="profile_suggestions" id="profile_suggestions" {{$profile->is_suggestable ? 'checked' : ''}}>
-				<label class="form-check-label font-weight-bold" for="profile_suggestions">
-					{{__('Visible on Profile Suggestions')}}
-				</label>
-				<p class="text-muted small help-text">Allow your profile to be listed in Profile Suggestions.</p>
-			</div>
-			@endif
-		@endif
+
 		<div class="form-group row">
 			<div class="col-12">
 				<hr>
-				<button type="submit" class="btn btn-primary font-weight-bold py-1 btn-block">Save Changes</button>
+				<button type="button" class="btn btn-primary font-weight-bold py-1 btn-block" id="save-btn">Save Changes</button>
 			</div>
 		</div>
 	</form>
 	@endsection
 
 @push('scripts')
-
-@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
 <script type="text/javascript">
 $(document).ready(function() {
-	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
-	let showReadMore = localStorage.getItem('pf_metro_ui.exp.rm') == 'false' ? false : true;
-	let distractionFree = localStorage.getItem('pf_metro_ui.exp.df') == 'true' ? true : false;
-	let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true' ? true : false;
-
-	if(showSuggestions == true) {
-		$('#show_suggestions').attr('checked', true);
+	let darkMode = localStorage.getItem('pf_m2s.color-scheme') == 'dark' ? true : false;
+	if(darkMode == true) {
+		$('#dark_mode').attr('checked', true);
 	}
 
-	if(showReadMore == true) {
-		$('#show_readmore').attr('checked', true);
-	}
-
-	if(distractionFree == true) {
-		localStorage.removeItem('pf_metro_ui.exp.df');
-	}
-
-	if(localStorage.getItem('metro-tips') !== 'false') {
-		$('#show_tips').attr('checked', true);
-	}
-
-	if(forceMetro == true) {
-		$('#force_metro').attr('checked', true);
-	}
-
-	$('#show_suggestions').on('change', function(e) {
-		if(e.target.checked) {
-			localStorage.removeItem('pf_metro_ui.exp.rec');
-		} else {
-			localStorage.setItem('pf_metro_ui.exp.rec', false);
-		}
+	$('#save-btn').click(function() {
+		let darkMode = document.querySelector('#dark_mode').checked;
+		let colorScheme = darkMode ? 'dark' : 'light';
+		localStorage.setItem('pf_m2s.color-scheme', colorScheme);
+		$('#form').submit();
 	});
-
-	$('#show_readmore').on('change', function(e) {
-		if(e.target.checked) {
-			localStorage.removeItem('pf_metro_ui.exp.rm');
-		} else {
-			localStorage.setItem('pf_metro_ui.exp.rm', false);
-		}
-	});
-
-	$('#distraction_free').on('change', function(e) {
-		if(e.target.checked) {
-			localStorage.setItem('pf_metro_ui.exp.df', true);
-		} else {
-			localStorage.removeItem('pf_metro_ui.exp.df');
-		}
-	});
-
-	$('#show_tips').on('change', function(e) {
-		if(e.target.checked) {
-			localStorage.setItem('metro-tips', true);
-		} else {
-			localStorage.removeItem('metro-tips');
-		}
-	});
-
-	$('#force_metro').on('change', function(e) {
-		if(e.target.checked) {
-			localStorage.setItem('pf_metro_ui.exp.forceMetro', true);
-		} else {
-			localStorage.removeItem('pf_metro_ui.exp.forceMetro');
-		}
-	})
 });
 </script>
-@endif
-@endpush
+@endpush