Merge branch 'organize-assets' into 'develop'

Organize "assets" within app/ directory

See merge request soapbox-pub/soapbox!1892

app/application.ts

@@ -4,7 +4,7 @@ import loadPolyfills from './soapbox/load_polyfills';
 require('./soapbox/iframe');
 
 // @ts-ignore
-require.context('./images/', true);
+require.context('./assets/images/', true);
 
 // Load stylesheet
 require('react-datepicker/dist/react-datepicker.css');

app/images/halloween/spider.svg

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="63.161953mm"
-   height="181.12712mm"
-   viewBox="0 0 63.161953 181.12712"
-   version="1.1"
-   id="svg1199"
-   inkscape:version="0.92.4 (unknown)"
-   sodipodi:docname="spider.svg">
-  <defs
-     id="defs1193" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35355339"
-     inkscape:cx="188.63933"
-     inkscape:cy="154.00309"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1366"
-     inkscape:window-height="705"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
-     inkscape:snap-global="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata1196">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-54.223528,-39.965002)">
-    <path
-       style="stroke-width:0.99999994"
-       d="m 329.96094,151.04883 -7.95132,372.20898 c -30.02705,2.9243 -45.57271,12.92382 -64.25977,32.67188 -25.16762,33.38088 -18.43249,69.4298 -0.4707,100.66992 12.24879,17.03193 32.3984,27.97627 53.07033,34.15036 0,0 -5.52814,0.0857 -11.58984,9.46094 -18.91001,-5.43999 -38.07073,-9.95039 -57.14063,-14.82032 -10.49976,0.9523 -28.58163,18.8274 -36.67969,24.9004 0.27746,13.19067 1.67361,27.14135 3.33008,39.15039 1.1699,-1.57002 0.83916,-3.5804 1.03906,-5.40039 0.9,-10.79003 0.60034,-21.66016 1.99024,-32.41016 9.28,-6.03999 17.7906,-13.20072 26.7207,-19.7207 18.99884,1.97067 39.37112,9.36858 55.91016,13.35156 -0.49,2.41999 -1.38047,5.27974 -4.23047,5.67969 -18.4,4.60002 -36.81969,9.10007 -55.17969,13.83007 -4.86555,6.81697 -23.47884,41.76065 -22.16992,48 3.32807,9.25919 3.76668,29.35751 8.58984,35.70899 -0.65616,-11.27353 -1.26587,-23.12102 -2.88086,-33.41016 4.366,-15.53732 14.77165,-31.85507 21.21094,-44.72851 16.36837,-5.03014 33.6873,-8.93673 49.58008,-11.32032 -0.0299,3.31998 -0.081,6.66013 -0.20117,9.99024 -10.89612,8.5036 -30.45632,23.65603 -40.40821,30.44922 -2.57681,15.80044 -3.38605,33.75066 -4.2207,48.55078 2.50279,8.85582 13.19431,23.74406 18.17156,23.90823 -2.93816,-7.30216 -8.51629,-14.68425 -10.88086,-21.31836 -0.17087,-16.87764 2.99403,-32.98356 3.70114,-48.41015 11.61344,-9.80937 25.4679,-15.10577 35.89062,-24.25 2.26541,6.18864 7.32913,9.97253 10.32813,15.05859 -2.15,3.10001 -5.51922,5.79 -5.94922,9.75 2.88,4.37998 6.60955,8.25101 10.68945,11.54102 -0.85,-3.43 -2.26023,-6.68056 -3.24023,-10.06055 l 6.20117,-7.18945 c 10.18753,5.69922 19.39911,4.81707 28.78906,0.75976 2.12,2.45 4.30149,5.11952 5.27149,8.26953 -0.85,3.26 -2.7418,6.14966 -3.5918,9.42969 4.21,-3.40003 8.09071,-7.32883 11.4707,-11.54883 -0.72,-4.08 -4.4693,-6.80104 -5.27929,-10.79101 3.66,-4.43003 7.97023,-8.42941 10.24023,-13.85938 5.68622,5.4072 34.43902,22.24881 34.94922,26.88086 0.36518,16.19209 3.11897,31.74502 2,46.75 -4.46916,8.68536 -7.12999,16.57554 -14.39063,22.67969 9.90723,0.50906 17.4253,-14.74937 21.52152,-22.69328 -0.18697,-17.91233 -0.74645,-33.39521 -1.16992,-49.66992 -13.47001,-10.57002 -27.16094,-20.89017 -40.46094,-31.66016 0.59,-3.81003 0.49976,-7.6583 0.50977,-11.48828 15.73,4.66001 31.80992,8.14868 47.66992,12.38867 7.58475,10.99663 15.5151,31.43552 20.24023,42.75977 0.43698,13.66208 -3.68079,27.5449 -4.08008,40.14062 1.49998,-1.33999 1.6498,-3.42013 2.17969,-5.24023 1.88197,-11.16719 9.61842,-29.63645 8.13086,-37.92969 -6.21997,-14.23003 -11.95978,-28.75009 -18.42969,-42.83008 -19.30273,-6.68031 -40.27482,-12.85569 -58.39062,-17.73047 -0.65,-1.72002 -1.1801,-3.47951 -1.5,-5.26953 17.78,-3.66999 35.60009,-7.40034 53.33008,-11.32031 5.35892,-0.14205 29.14876,22.09172 28.98047,23.98047 1.30016,6.78634 -2.08415,29.71011 1.61914,33.13086 2.05988,-11.02999 3.41097,-22.17002 5.12109,-33.25 -0.32862,-6.33401 -29.16337,-28.29439 -33.91016,-30.79102 -20.42635,4.13166 -40.67884,9.74123 -59.80078,12.63086 -5.16629,-4.96887 -11.64306,-7.41991 -17.4707,-10.33984 26.33,-1.87998 52.09,-16.02008 66.25,-38.58008 9.5235,-13.96814 12.87637,-29.769 13.1992,-45.79102 0.33714,-20.46694 -8.12112,-40.39069 -21.6211,-55.4707 -18.78284,-17.43524 -31.48782,-23.12017 -55.43945,-26.73828 l 6.93151,-372.80078 z"
-       id="path1768"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
-       transform="scale(0.26458333)" />
-  </g>
-</svg>

app/images/halloween/twinkle.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg46269" viewBox="0 0 340.00001 394.2857" height="111.27618mm" width="95.955559mm">
-  <defs id="defs46271">
-    <linearGradient id="linearGradient46839">
-      <stop id="stop46841" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46843" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <linearGradient id="linearGradient46831">
-      <stop id="stop46833" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46835" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <linearGradient id="linearGradient46823">
-      <stop id="stop46825" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46827" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <radialGradient gradientTransform="matrix(4.9019612,0,0,4.9019612,-600.72836,-1264.1473)" gradientUnits="userSpaceOnUse" r="72.85714" fy="330.93362" fx="152.85715" cy="330.93362" cx="152.85715" id="radialGradient46829" xlink:href="#linearGradient46823"/>
-    <radialGradient gradientTransform="matrix(3.3636365,0,0,3.3636365,-602.85717,-938.05096)" gradientUnits="userSpaceOnUse" r="62.857143" fy="429.50507" fx="251.42857" cy="429.50507" cx="251.42857" id="radialGradient46837" xlink:href="#linearGradient46831"/>
-    <radialGradient gradientTransform="matrix(1.7317072,0,0,1.7317072,-145.78397,-287.44272)" gradientUnits="userSpaceOnUse" r="58.57143" fy="470.93369" fx="132.85715" cy="470.93369" cx="132.85715" id="radialGradient46845" xlink:href="#linearGradient46839"/>
-  </defs>
-  <metadata id="metadata46274">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g transform="translate(-8.5714264,-218.07648)" id="layer1">
-    <circle r="140" cy="358.07648" cx="148.57143" id="path46817" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46829);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-    <circle r="105.71429" cy="506.64789" cx="242.85715" id="path46819" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46837);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-    <circle r="58.57143" cy="528.07654" cx="84.285713" id="path46821" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46845);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-  </g>
-</svg>

app/soapbox/components/sidebar-navigation.tsx

@@ -97,7 +97,7 @@ const SidebarNavigation = () => {
     if (features.publicTimeline && features.federating) {
       menu.push({
         to: '/timeline/fediverse',
-        icon: require('icons/fediverse.svg'),
+        icon: require('assets/icons/fediverse.svg'),
         text: intl.formatMessage(messages.fediverse),
       });
     }

app/soapbox/components/sidebar_menu.tsx

@@ -228,7 +228,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/timeline/fediverse'
-                      icon={require('icons/fediverse.svg')}
+                      icon={require('assets/icons/fediverse.svg')}
                       text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                       onClick={onClose}
                     />

app/soapbox/components/site-logo.tsx

@@ -18,8 +18,8 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode
-    ? require('images/soapbox-logo-white.svg')
-    : require('images/soapbox-logo.svg');
+    ? require('assets/images/soapbox-logo-white.svg')
+    : require('assets/images/soapbox-logo.svg');
 
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {

app/soapbox/components/verification_badge.tsx

@@ -18,7 +18,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const icon = soapboxConfig.verifiedIcon || require('icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || require('assets/icons/verified.svg');
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';

app/soapbox/features/developers/settings-store.tsx

@@ -132,13 +132,6 @@ const SettingsStore: React.FC = () => {
           </ListItem>
         </div>
 
-        {/* <ListItem
-          label={<FormattedMessage id='preferences.fields.halloween_label' defaultMessage='Halloween mode' />}
-          hint={<FormattedMessage id='preferences.hints.halloween' defaultMessage='Beware: SPOOKY! Supports light/dark toggle.' />}
-        >
-          <SettingToggle settings={settings} settingPath={['halloween']} onChange={onToggleChange} />
-        </ListItem> */}
-
         <ListItem
           label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
           hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}

app/soapbox/middleware/sounds.ts

@@ -39,21 +39,21 @@ export default function soundsMiddleware(): ThunkMiddleware {
   const soundCache: Record<string, HTMLAudioElement> = {
     boop: createAudio([
       {
-        src: require('../../sounds/boop.ogg'),
+        src: require('../../assets/sounds/boop.ogg'),
         type: 'audio/ogg',
       },
       {
-        src: require('../../sounds/boop.mp3'),
+        src: require('../../assets/sounds/boop.mp3'),
         type: 'audio/mpeg',
       },
     ]),
     chat: createAudio([
       {
-        src: require('../../sounds/chat.oga'),
+        src: require('../../assets/sounds/chat.oga'),
         type: 'audio/ogg',
       },
       {
-        src: require('../../sounds/chat.mp3'),
+        src: require('../../assets/sounds/chat.mp3'),
         type: 'audio/mpeg',
       },
     ]),

app/soapbox/normalizers/__tests__/account.test.ts

@@ -2,8 +2,8 @@ import { Record as ImmutableRecord, fromJS } from 'immutable';
 
 import { normalizeAccount } from '../account';
 
-const AVATAR_MISSING = require('images/avatar-missing.png');
-const HEADER_MISSING = require('images/header-missing.png');
+const AVATAR_MISSING = require('assets/images/avatar-missing.png');
+const HEADER_MISSING = require('assets/images/header-missing.png');
 
 describe('normalizeAccount()', () => {
   it('adds base fields', () => {

app/soapbox/normalizers/account.ts

@@ -98,7 +98,7 @@ const normalizePleromaLegacyFields = (account: ImmutableMap<string, any>) => {
 const normalizeAvatar = (account: ImmutableMap<string, any>) => {
   const avatar = account.get('avatar');
   const avatarStatic = account.get('avatar_static');
-  const missing = require('images/avatar-missing.png');
+  const missing = require('assets/images/avatar-missing.png');
 
   return account.withMutations(account => {
     account.set('avatar', avatar || avatarStatic || missing);
@@ -110,7 +110,7 @@ const normalizeAvatar = (account: ImmutableMap<string, any>) => {
 const normalizeHeader = (account: ImmutableMap<string, any>) => {
   const header = account.get('header');
   const headerStatic = account.get('header_static');
-  const missing = require('images/header-missing.png');
+  const missing = require('assets/images/header-missing.png');
 
   return account.withMutations(account => {
     account.set('header', header || headerStatic || missing);

app/soapbox/service_worker/web_push_notifications.ts

@@ -180,21 +180,21 @@ const handlePush = (event: PushEvent) => {
 /** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
-  icon: `/${require('../../images/web-push/web-push-icon_expand.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_expand.png')}`,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
 /** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
-  icon: `/${require('../../images/web-push/web-push-icon_reblog.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_reblog.png')}`,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
 /** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
-  icon: `/${require('../../images/web-push/web-push-icon_favourite.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_favourite.png')}`,
   title: formatMessage('status.favourite', preferred_locale),
 });
 

app/styles/application.scss

@@ -72,9 +72,6 @@
 @import 'components/radio-button';
 @import 'components/directory';
 
-// Holiday
-@import 'holiday/halloween';
-
 // Truth custom styles
 @import 'truth';
 

app/styles/components/compose-form.scss

@@ -135,12 +135,12 @@
       position: relative;
 
       &.video {
-        background-image: url('../images/video-placeholder.png');
+        background-image: url('../assets/images/video-placeholder.png');
         background-size: cover;
       }
 
       &.audio {
-        background-image: url('../images/audio-placeholder.png');
+        background-image: url('../assets/images/audio-placeholder.png');
         background-size: cover;
       }
     }

app/styles/fonts.scss

@@ -3,26 +3,26 @@
 // OpenDyslexic
 @font-face {
   font-family: 'OpenDyslexic';
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-weight: bold;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-weight: bold;
   font-style: italic;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-style: italic;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
 }
 
 // TYPEOGRAPHY MIXINS
@@ -62,11 +62,11 @@
 // Soapbox icon font
 @font-face {
   font-family: 'soapbox';
-  src: url('../fonts/soapbox/soapbox.eot?pryg6i');
-  src: url('../fonts/soapbox/soapbox.eot?pryg6i#iefix') format('embedded-opentype'),
-    url('../fonts/soapbox/soapbox.ttf?pryg6i') format('truetype'),
-    url('../fonts/soapbox/soapbox.woff?pryg6i') format('woff'),
-    url('../fonts/soapbox/soapbox.svg?pryg6i#soapbox') format('svg');
+  src: url('../assets/fonts/soapbox/soapbox.eot?pryg6i');
+  src: url('../assets/fonts/soapbox/soapbox.eot?pryg6i#iefix') format('embedded-opentype'),
+    url('../assets/fonts/soapbox/soapbox.ttf?pryg6i') format('truetype'),
+    url('../assets/fonts/soapbox/soapbox.woff?pryg6i') format('woff'),
+    url('../assets/fonts/soapbox/soapbox.svg?pryg6i#soapbox') format('svg');
   font-weight: normal;
   font-style: normal;
 }

app/styles/holiday/halloween.scss

@@ -1,144 +0,0 @@
-.halloween,
-.site-preview.halloween {
-  // Set brand color to orange
-  --brand-color_h: 29.727272727272727;
-  --brand-color_s: 100%;
-  --brand-color_l: 43.13725490196079%;
-
-  // Stars BG
-  background-color: #904700; // Color matches twinkle.svg
-  background-image: url('../images/halloween/starfield.png');
-  background-size: cover;
-  background-attachment: fixed;
-  background-position: center;
-
-  // Full-screen pseudo-elements to hold BG graphics
-  &::before,
-  &::after,
-  > .app-holder::before,
-  > .app-holder::after {
-    content: '';
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-size: cover;
-    background-position: center;
-    width: 100%;
-    height: 100%;
-    z-index: -100;
-  }
-
-  // Spiderweb BG
-  &::before {
-    background-image: url('../images/halloween/spiderweb.svg');
-  }
-
-  // Twinkle effect by masking with semi-transparent animated circles
-  &::after {
-    z-index: -101;
-    background: transparent url("../images/halloween/twinkle.svg") repeat top center;
-    animation: halloween-twinkle 200s linear infinite;
-  }
-
-  > .app-holder {
-    // Vignette
-    &::before {
-      background-image: radial-gradient(
-        circle,
-        transparent 0%,
-        transparent 60%,
-        var(--vignette-color) 100%
-      );
-    }
-
-    // Floating clouds BG
-    &::after {
-      background: transparent url("../images/halloween/clouds.png") repeat top center;
-      animation: halloween-clouds 200s linear infinite;
-    }
-
-    // Dangling spider
-    .ui .page__top::after,
-    .ui .page__columns::after {
-      content: '';
-      display: block;
-      width: 100px;
-      height: 100px;
-      right: 20px;
-      background-image: url('../images/halloween/spider.svg');
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: top right;
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    .ui .page__columns::after {
-      position: fixed;
-      top: 50px;
-    }
-
-    .ui .page__top::after {
-      position: absolute;
-      bottom: -100px;
-    }
-
-    .ui .page__top + .page__columns::after {
-      display: none;
-    }
-
-    .profile-info-panel {
-      color: #fff;
-
-      &-content__name h1 {
-        span:first-of-type {
-          color: hsla(0, 0%, 100%, 0.6);
-        }
-
-        small {
-          color: #fff;
-        }
-      }
-
-      &-content__bio {
-        color: #fff;
-      }
-
-      &-content__bio a,
-      &-content__fields a {
-        color: hsl(
-          var(--brand-color_h),
-          var(--brand-color_s),
-          calc(var(--brand-color_l) + 8%)
-        );
-      }
-    }
-  }
-
-  .column-header > button.grouped,
-  .column-header > .btn.grouped {
-    color: #fff;
-
-    &:hover {
-      color: #fff;
-    }
-
-    &::before {
-      background-color: var(--brand-color);
-    }
-  }
-}
-
-// Animations
-@keyframes halloween-twinkle {
-  from { background-position: 0 0; }
-  to { background-position: -10000px 5000px; }
-}
-
-@keyframes halloween-clouds {
-  from { background-position: 0 0; }
-  to { background-position: 10000px 0; }
-}

app/styles/ui.scss

@@ -232,7 +232,7 @@ article:last-child > .domain {
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
     max-height: $media-modal-media-max-height;
-    background: url('../images/void.png') repeat;
+    background: url('../assets/images/void.png') repeat;
     object-fit: contain;
   }
 

webpack/rules/assets.ts

@@ -11,7 +11,7 @@ const rules: RuleSetRule[] = [{
   test: /\.(png|svg)/,
   type: 'asset/resource',
   include: [
-    resolve('app', 'images'),
+    resolve('app', 'assets', 'images'),
     resolve('node_modules', 'emoji-datasource'),
   ],
   generator: {
@@ -21,7 +21,7 @@ const rules: RuleSetRule[] = [{
   test: /\.(ttf|eot|svg|woff|woff2)/,
   type: 'asset/resource',
   include: [
-    resolve('app', 'fonts'),
+    resolve('app', 'assets', 'fonts'),
     resolve('node_modules', 'fork-awesome'),
     resolve('node_modules', 'line-awesome'),
     resolve('node_modules', '@fontsource'),
@@ -32,7 +32,7 @@ const rules: RuleSetRule[] = [{
 }, {
   test: /\.(ogg|oga|mp3)/,
   type: 'asset/resource',
-  include: resolve('app', 'sounds'),
+  include: resolve('app', 'assets', 'sounds'),
   generator: {
     filename: 'packs/sounds/[name]-[contenthash:8][ext]',
   },
@@ -46,7 +46,7 @@ const rules: RuleSetRule[] = [{
 }, {
   test: /\.svg$/,
   type: 'asset/resource',
-  include: resolve('app', 'icons'),
+  include: resolve('app', 'assets', 'icons'),
   generator: {
     filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },