[Glitch] Upgrade to Stylelint 15 with Prettier

Port 0c9d455ea5540e854c2d879cd1df015ea493f622 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

17 files changed, 268 insertions, 125 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index c2a6593b1..89faaae6a 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -30,7 +30,9 @@
     border: 0;
     padding: 0;
 
-    & > .account__avatar-wrapper { margin: 0 8px 0 0 }
+    & > .account__avatar-wrapper {
+      margin: 0 8px 0 0;
+    }
 
     & > .display-name {
       height: 24px;
@@ -379,7 +381,7 @@
       &::before,
       &::after {
         display: block;
-        content: "";
+        content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -710,22 +712,22 @@
         padding: 2px 6px;
         color: $darker-text-color;
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: lighten($darker-text-color, 7%);
-    background-color: rgba($darker-text-color, 0.15);
-  }
+        &:hover,
+        &:active,
+        &:focus {
+          color: lighten($darker-text-color, 7%);
+          background-color: rgba($darker-text-color, 0.15);
+        }
 
-  &:focus {
-    background-color: rgba($darker-text-color, 0.3);
-  }
+        &:focus {
+          background-color: rgba($darker-text-color, 0.3);
+        }
 
-  &[disabled] {
-    color: darken($darker-text-color, 13%);
-    background-color: transparent;
-    cursor: default;
-  }
+        &[disabled] {
+          color: darken($darker-text-color, 13%);
+          background-color: transparent;
+          cursor: default;
+        }
       }
 
       .flex-spacer {
diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index 85af9afc8..feaff81f5 100644
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -181,7 +181,11 @@
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
+      background-color: mix(
+        lighten($ui-base-color, 12%),
+        $ui-highlight-color,
+        80%
+      );
 
       .reactions-bar__item__count {
         color: lighten($highlight-text-color, 8%);
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 42a591931..263a9ce78 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -286,7 +286,7 @@ $ui-header-height: 55px;
 
     &::before {
       display: block;
-      content: "";
+      content: '';
       position: absolute;
       bottom: -13px;
       left: 0;
@@ -296,7 +296,11 @@ $ui-header-height: 55px;
       pointer-events: none;
       height: 28px;
       z-index: 1;
-      background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
+      background: radial-gradient(
+        ellipse,
+        rgba($ui-highlight-color, 0.23) 0%,
+        rgba($ui-highlight-color, 0) 60%
+      );
     }
   }
 
@@ -435,10 +439,10 @@ $ui-header-height: 55px;
   }
 }
 
-
 .layout-single-column .column-header__notif-cleaning-buttons {
   @media screen and (min-width: $no-gap-breakpoint) {
-    b, i {
+    b,
+    i {
       margin-right: 5px;
     }
 
@@ -622,7 +626,8 @@ $ui-header-height: 55px;
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) {
+    // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -916,7 +921,7 @@ $ui-header-height: 55px;
 
   p {
     font-size: 16px;
-   line-height: 24px;
+    line-height: 24px;
     font-weight: 400;
     color: $darker-text-color;
   }
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 40adf28c9..4b800dcd8 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -32,12 +32,12 @@
 .spoiler-input {
   height: 0;
   transform-origin: bottom;
-  opacity: 0.0;
+  opacity: 0;
 
   &.spoiler-input--visible {
     height: 36px;
     margin-bottom: 11px;
-    opacity: 1.0;
+    opacity: 1;
   }
 
   input {
@@ -59,8 +59,12 @@
       color: $dark-text-color;
     }
 
-    &:focus { outline: 0 }
-    @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+    &:focus {
+      outline: 0;
+    }
+    @include single-column('screen and (max-width: 630px)') {
+      font-size: 16px;
+    }
   }
 }
 
@@ -98,7 +102,7 @@
     color: $highlight-text-color;
   }
 
-  input[type=checkbox] {
+  input[type='checkbox'] {
     display: none;
   }
 
@@ -118,7 +122,9 @@
 
     &.active {
       border-color: $highlight-text-color;
-      background: $highlight-text-color url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>") center center no-repeat;
+      background: $highlight-text-color
+        url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>")
+        center center no-repeat;
     }
   }
 }
@@ -137,7 +143,9 @@
   margin-bottom: 5px;
   overflow: hidden;
 
-  & > .account.small { color: $inverted-text-color; }
+  & > .account.small {
+    color: $inverted-text-color;
+  }
 }
 
 .reply-indicator__cancel {
@@ -159,7 +167,9 @@
   padding-top: 5px;
   overflow: hidden;
 
-  p, pre, blockquote {
+  p,
+  pre,
+  blockquote {
     margin-bottom: 20px;
     white-space: pre-wrap;
 
@@ -168,12 +178,17 @@
     }
   }
 
-  h1, h2, h3, h4, h5 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
     margin-top: 20px;
     margin-bottom: 20px;
   }
 
-  h1, h2 {
+  h1,
+  h2 {
     font-weight: 700;
     font-size: 18px;
   }
@@ -182,7 +197,9 @@
     font-size: 16px;
   }
 
-  h3, h4, h5 {
+  h3,
+  h4,
+  h5 {
     font-weight: 500;
   }
 
@@ -197,11 +214,13 @@
     }
   }
 
-  b, strong {
+  b,
+  strong {
     font-weight: 700;
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -215,7 +234,8 @@
     vertical-align: super;
   }
 
-  ul, ol {
+  ul,
+  ol {
     margin-left: 1em;
 
     p {
@@ -235,13 +255,17 @@
     color: $lighter-text-color;
     text-decoration: none;
 
-    &:hover { text-decoration: underline }
+    &:hover {
+      text-decoration: underline;
+    }
 
     &.mention {
       &:hover {
         text-decoration: none;
 
-        span { text-decoration: underline }
+        span {
+          text-decoration: underline;
+        }
       }
     }
   }
@@ -321,7 +345,7 @@
     font-size: 18px;
     line-height: 24px;
     text-align: center;
-    opacity: .8;
+    opacity: 0.8;
   }
 }
 
@@ -358,7 +382,9 @@
   &:hover,
   &:focus,
   &:active,
-  &.selected { background: darken($ui-secondary-color, 10%) }
+  &.selected {
+    background: darken($ui-secondary-color, 10%);
+  }
 
   > .account,
   > .emoji,
@@ -396,7 +422,9 @@
 
   & > .account.small {
     .display-name {
-      & > span { color: $lighter-text-color }
+      & > span {
+        color: $lighter-text-color;
+      }
     }
   }
 }
@@ -430,7 +458,9 @@
     background-repeat: no-repeat;
     overflow: hidden;
 
-    & > .close { mix-blend-mode: difference }
+    & > .close {
+      mix-blend-mode: difference;
+    }
   }
 
   .icon-button {
@@ -455,12 +485,22 @@
     left: 0;
     right: 0;
     box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+    background: linear-gradient(
+      0deg,
+      rgba($base-shadow-color, 0.8) 0,
+      rgba($base-shadow-color, 0.35) 80%,
+      transparent
+    );
   }
 }
 
 .compose-form__upload__actions {
-  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+  background: linear-gradient(
+    180deg,
+    rgba($base-shadow-color, 0.8) 0,
+    rgba($base-shadow-color, 0.35) 80%,
+    transparent
+  );
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -543,7 +583,8 @@
     margin: 0 3px;
     border-width: 0 0 0 1px;
     border-style: none none none solid;
-    border-color: transparent transparent transparent darken($simple-background-color, 24%);
+    border-color: transparent transparent transparent
+      darken($simple-background-color, 24%);
     padding: 0;
     width: 0;
     height: 27px;
@@ -604,7 +645,9 @@
     flex: 1 1 auto;
     color: $lighter-text-color;
 
-    &:not(:first-child) { margin-left: 10px }
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
 
     strong {
       display: block;
@@ -621,11 +664,15 @@
     .privacy-dropdown__option__content {
       color: $primary-text-color;
 
-      strong { color: $primary-text-color }
+      strong {
+        color: $primary-text-color;
+      }
     }
   }
 
-  &.active:hover { background: lighten($ui-highlight-color, 4%) }
+  &.active:hover {
+    background: lighten($ui-highlight-color, 4%);
+  }
 }
 
 .compose-form__publish {
diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss
index 803e075c9..4c914f163 100644
--- a/app/javascript/flavours/glitch/styles/components/directory.scss
+++ b/app/javascript/flavours/glitch/styles/components/directory.scss
@@ -11,7 +11,11 @@
 }
 
 .scrollable .account-card__bio::after {
-  background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent);
+  background: linear-gradient(
+    to left,
+    lighten($ui-base-color, 8%),
+    transparent
+  );
 }
 
 .filter-form {
@@ -39,8 +43,8 @@
   text-overflow: ellipsis;
   cursor: pointer;
 
-  input[type=radio],
-  input[type=checkbox] {
+  input[type='radio'],
+  input[type='checkbox'] {
     display: none;
   }
 
diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss
index a4a1cfc84..eddc1a2a8 100644
--- a/app/javascript/flavours/glitch/styles/components/doodle.scss
+++ b/app/javascript/flavours/glitch/styles/components/doodle.scss
@@ -38,7 +38,8 @@ $doodleBg: #d9e1e8;
         margin-right: 2px;
       }
 
-      input[type="number"],input[type="text"] {
+      input[type='number'],
+      input[type='text'] {
         width: 40px;
       }
       span.val {
@@ -52,7 +53,7 @@ $doodleBg: #d9e1e8;
   .doodle-palette {
     padding-right: 0 !important;
     border: 1px solid black;
-    line-height: .2rem;
+    line-height: 0.2rem;
     flex-grow: 0;
     background: white;
 
@@ -60,14 +61,15 @@ $doodleBg: #d9e1e8;
       appearance: none;
       width: 1rem;
       height: 1rem;
-      margin: 0; padding: 0;
+      margin: 0;
+      padding: 0;
       text-align: center;
       color: black;
       text-shadow: 0 0 1px white;
       cursor: pointer;
-      box-shadow: inset 0 0 1px rgba(white, .5);
+      box-shadow: inset 0 0 1px rgba(white, 0.5);
       border: 1px solid black;
-      outline-offset:-1px;
+      outline-offset: -1px;
 
       &.foreground {
         outline: 1px dashed white;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index cf996fb71..2c2f25168 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -34,7 +34,8 @@
   }
 
   @include single-column('screen and (max-width: 630px)') {
-    :root & {  //  Overrides `.wide` for single-column view
+    :root & {
+      //  Overrides `.wide` for single-column view
       flex: auto;
       width: 100%;
       min-width: 0;
@@ -43,7 +44,9 @@
     }
   }
 
-  .react-swipeable-view-container & { height: 100% }
+  .react-swipeable-view-container & {
+    height: 100%;
+  }
 }
 
 .drawer--header {
@@ -84,8 +87,14 @@
   margin-bottom: 10px;
   flex: none;
 
-  @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 }
-  @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+  @include limited-single-column(
+    'screen and (max-width: #{$no-gap-breakpoint})'
+  ) {
+    margin-bottom: 0;
+  }
+  @include single-column('screen and (max-width: 630px)') {
+    font-size: 16px;
+  }
 }
 
 .search-popout {
@@ -192,7 +201,9 @@
 }
 
 .drawer__inner__mastodon {
-  background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%)
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
+    no-repeat bottom / 100% auto;
   flex: 1;
   min-height: 47px;
   display: none;
@@ -240,13 +251,27 @@
 @for $i from 0 through 3 {
   .mbstobon-#{$i} .drawer__inner__mastodon {
     @if $i == 3 {
-      background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
+      background: url('~flavours/glitch/images/wave-drawer.png')
+          no-repeat
+          bottom /
+          100%
+          auto,
+        lighten($ui-base-color, 13%);
     } @else {
-      background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
+      background: url('~flavours/glitch/images/wave-drawer-glitched.png')
+          no-repeat
+          bottom /
+          100%
+          auto,
+        lighten($ui-base-color, 13%);
     }
 
     & > .mastodon {
-      background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+      background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
+        no-repeat
+        left
+        bottom /
+        contain;
 
       @if $i != 3 {
         filter: contrast(50%) brightness(50%);
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss
index c037e03f9..4427f2080 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji.scss
@@ -2,7 +2,7 @@
   font-size: inherit;
   vertical-align: middle;
   object-fit: contain;
-  margin: -.2ex .15em .2ex;
+  margin: -0.2ex 0.15em 0.2ex;
   width: 16px;
   height: 16px;
 
diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
index 790650cfa..6bb9827b3 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
@@ -46,7 +46,7 @@
   text-align: center;
   padding: 12px 4px;
   overflow: hidden;
-  transition: color .1s ease-out;
+  transition: color 0.1s ease-out;
   cursor: pointer;
   background: transparent;
   border: 0;
@@ -174,7 +174,7 @@
 
   &:hover::before {
     z-index: 0;
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
@@ -246,8 +246,8 @@
   padding: 5px 6px;
   padding-top: 70px;
 
- .emoji-mart-no-results-label {
-    margin-top: .2em;
+  .emoji-mart-no-results-label {
+    margin-top: 0.2em;
   }
 
   .emoji-mart-emoji:hover::before {
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index d4c0d77c8..c52f39512 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -370,7 +370,7 @@ body > [data-popper-placement] {
 
 .ellipsis {
   &::after {
-    content: "…";
+    content: '…';
   }
 }
 
@@ -480,11 +480,11 @@ body > [data-popper-placement] {
   justify-content: center;
   flex-direction: column;
   scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none;  /* IE 10+ */
+  -ms-overflow-style: none; /* IE 10+ */
 
   * {
     scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* IE 10+ */
+    -ms-overflow-style: none; /* IE 10+ */
   }
 
   &::-webkit-scrollbar,
@@ -950,7 +950,8 @@ body > [data-popper-placement] {
     overflow-y: auto;
   }
 
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) {
+    // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -971,7 +972,8 @@ body > [data-popper-placement] {
 }
 
 .scrollable.fullscreen {
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) {
+    // hack to fix Chrome <57
     contain: none;
   }
 }
@@ -1014,7 +1016,8 @@ body > [data-popper-placement] {
   transition: background-color 0.2s ease;
 }
 
-.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
+  .react-toggle-track {
   background-color: darken($ui-base-color, 10%);
 }
 
@@ -1022,7 +1025,8 @@ body > [data-popper-placement] {
   background-color: darken($ui-highlight-color, 2%);
 }
 
-.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
+  .react-toggle-track {
   background-color: $ui-highlight-color;
 }
 
@@ -1654,8 +1658,8 @@ button.icon-button.active i.fa-retweet {
 .icon-badge {
   position: absolute;
   display: block;
-  right: -.25em;
-  top: -.25em;
+  right: -0.25em;
+  top: -0.25em;
   background-color: $ui-highlight-color;
   border-radius: 50%;
   font-size: 75%;
@@ -1688,7 +1692,7 @@ button.icon-button.active i.fa-retweet {
     border-radius: 50%;
     width: 0.625rem;
     height: 0.625rem;
-    margin: -.1ex .15em .1ex;
+    margin: -0.1ex 0.15em 0.1ex;
   }
 
   &__content {
@@ -1797,9 +1801,15 @@ noscript {
 }
 
 @keyframes flicker {
-  0% { opacity: 1; }
-  30% { opacity: 0.75; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.75;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @import 'boost';
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index f36b21e1c..cd441a0c0 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -11,12 +11,14 @@
   max-height: 450px;
   overflow: hidden;
 
-  label, legend {
+  label,
+  legend {
     display: block;
     font-size: 14px;
   }
 
-  .boolean label, .radio_buttons label {
+  .boolean label,
+  .radio_buttons label {
     position: relative;
     padding-left: 28px;
     padding-top: 3px;
@@ -58,7 +60,7 @@
   cursor: pointer;
   text-decoration: none;
   outline: none;
-  transition: background .3s;
+  transition: background 0.3s;
 
   .text-icon-button {
     color: inherit;
@@ -74,7 +76,8 @@
     color: $primary-text-color;
   }
 
-  &.close, &.close:hover {
+  &.close,
+  &.close:hover {
     background: $error-value-color;
     color: $primary-text-color;
   }
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 9776e2265..0216daa12 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -348,7 +348,7 @@
   padding: 0;
   border: 0;
   font-size: 0;
-  transition: opacity .2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 
   &.active {
     opacity: 1;
@@ -372,7 +372,6 @@
   .video-player__volume__handle {
     bottom: 23px;
   }
-
 }
 
 .audio-player {
@@ -506,10 +505,15 @@
     left: 0;
     right: 0;
     box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
+    background: linear-gradient(
+      0deg,
+      rgba($base-shadow-color, 0.85) 0,
+      rgba($base-shadow-color, 0.45) 60%,
+      transparent
+    );
     padding: 0 15px;
     opacity: 0;
-    transition: opacity .1s ease;
+    transition: opacity 0.1s ease;
 
     &.active {
       opacity: 1;
@@ -655,7 +659,7 @@
     }
 
     &::before {
-      content: "";
+      content: '';
       width: 50px;
       background: rgba($white, 0.35);
       border-radius: 4px;
@@ -725,7 +729,7 @@
     position: relative;
 
     &::before {
-      content: "";
+      content: '';
       width: 100%;
       background: rgba($white, 0.35);
       border-radius: 4px;
@@ -762,7 +766,7 @@
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
       .no-reduce-motion & {
-        transition: opacity .1s ease;
+        transition: opacity 0.1s ease;
       }
 
       &.active {
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 69d237dec..fc9ba3a18 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -269,7 +269,8 @@
 }
 
 .onboarding-modal__page__wrapper-0 {
-  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom /
+    auto 250px;
   height: 100%;
   padding: 0;
 }
@@ -989,7 +990,8 @@
 
   font-size: 14px;
 
-  label, input {
+  label,
+  input {
     vertical-align: middle;
   }
 }
@@ -1020,7 +1022,9 @@
     width: auto;
     outline: 0;
     font-family: inherit;
-    background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
+    background: $simple-background-color
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
+      no-repeat right 8px center / auto 16px;
     border: 1px solid darken($simple-background-color, 14%);
     border-radius: 4px;
     padding: 6px 10px;
@@ -1280,7 +1284,7 @@
     text-decoration: none;
 
     &:hover {
-      text-decoration: underline
+      text-decoration: underline;
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
index 96cf06742..c99e99131 100644
--- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
+++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
@@ -85,14 +85,14 @@
     counter-increment: list-counter;
 
     &::before {
-      content: counter(list-counter) ".";
+      content: counter(list-counter) '.';
       position: absolute;
       left: 0;
     }
   }
 
   ul > li::before {
-    content: "";
+    content: '';
     position: absolute;
     background-color: $darker-text-color;
     border-radius: 50%;
diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss
index 67b01c886..490951fb4 100644
--- a/app/javascript/flavours/glitch/styles/components/sensitive.scss
+++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss
@@ -17,8 +17,10 @@
   font-size: 12px;
   line-height: 18px;
   text-transform: uppercase;
-  opacity: .9;
-  transition: opacity .1s ease;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
 
-  .media-gallery:hover & { opacity: 1 }
+  .media-gallery:hover & {
+    opacity: 1;
+  }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 74e5d0884..036b3f6ef 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -140,7 +140,7 @@
   .scrollable {
     overflow: visible;
 
-    @supports(display: grid) {
+    @supports (display: grid) {
       contain: content;
     }
   }
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index bb5bbc0ac..9280ef836 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -67,7 +67,9 @@
     margin: -3px 0 0;
   }
 
-  p, pre, blockquote {
+  p,
+  pre,
+  blockquote {
     margin-bottom: 20px;
     white-space: pre-wrap;
     unicode-bidi: plaintext;
@@ -86,12 +88,17 @@
       margin-bottom: 20px;
     }
 
-    h1, h2, h3, h4, h5 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
       margin-top: 20px;
       margin-bottom: 20px;
     }
 
-    h1, h2 {
+    h1,
+    h2 {
       font-weight: 700;
       font-size: 1.2em;
     }
@@ -100,7 +107,9 @@
       font-size: 1.1em;
     }
 
-    h3, h4, h5 {
+    h3,
+    h4,
+    h5 {
       font-weight: 500;
     }
 
@@ -115,11 +124,13 @@
       }
     }
 
-    b, strong {
+    b,
+    strong {
       font-weight: 700;
     }
 
-    em, i {
+    em,
+    i {
       font-style: italic;
     }
 
@@ -133,7 +144,8 @@
       vertical-align: super;
     }
 
-    ul, ol {
+    ul,
+    ol {
       margin-left: 2em;
 
       p {
@@ -317,8 +329,12 @@
   }
 
   @keyframes fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   opacity: 1;
@@ -381,9 +397,14 @@
       right: 0;
       top: 0;
       bottom: 0;
-      background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
+      background-image: linear-gradient(
+        to bottom,
+        rgba($base-shadow-color, 0.75),
+        rgba($base-shadow-color, 0.65) 24px,
+        rgba($base-shadow-color, 0.8)
+      );
       pointer-events: none;
-      content: "";
+      content: '';
     }
 
     .display-name:hover .display-name__html {
@@ -397,25 +418,34 @@
       padding-top: 0;
 
       &:after {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
-        background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
+        background: linear-gradient(
+          rgba($ui-base-color, 0),
+          rgba($ui-base-color, 1)
+        );
         pointer-events: none;
       }
-      
+
       a:hover {
         text-decoration: none;
       }
     }
     &:focus > .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
+      background: linear-gradient(
+        rgba(lighten($ui-base-color, 4%), 0),
+        rgba(lighten($ui-base-color, 4%), 1)
+      );
     }
     &.status-direct > .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
+      background: linear-gradient(
+        rgba(lighten($ui-base-color, 8%), 0),
+        rgba(lighten($ui-base-color, 8%), 1)
+      );
     }
 
     .notification__message {
@@ -832,7 +862,8 @@ a.status__display-name,
       bottom: -1px;
     }
 
-    a .fa, a:hover .fa {
+    a .fa,
+    a:hover .fa {
       color: inherit;
     }
   }
@@ -850,9 +881,9 @@ a.status-card {
   cursor: zoom-in;
   display: block;
   text-decoration: none;
-    width: 100%;
-    height: auto;
-    margin: 0;
+  width: 100%;
+  height: auto;
+  margin: 0;
 }
 
 .status-card-video {
@@ -1063,7 +1094,7 @@ a.status-card.compact:hover {
 
   &.unread {
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: 0;