Rename app/ --> src/

src/styles/accessibility.scss

@@ -0,0 +1,14 @@
+$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
+
+%white-emoji-outline {
+  filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff);
+  transform: scale(0.71);
+}
+
+.emojione {
+  @each $emoji in $black-emojis {
+    &[title=':#{$emoji}:'] {
+      @extend %white-emoji-outline;
+    }
+  }
+}

src/styles/application.scss

@@ -0,0 +1,31 @@
+@import 'variables';
+@import 'fonts';
+@import 'basics';
+@import 'loading';
+@import 'ui';
+@import 'emoji-picker';
+@import 'rtl';
+@import 'accessibility';
+@import 'navigation';
+@import 'autosuggest';
+
+// COMPONENTS
+@import 'components/buttons';
+@import 'components/modal';
+@import 'components/compose-form';
+@import 'components/status';
+@import 'components/reply-mentions';
+@import 'components/detailed-status';
+@import 'components/media-gallery';
+@import 'components/notification';
+@import 'components/display-name';
+@import 'components/columns';
+@import 'components/search';
+@import 'components/video-player';
+@import 'components/audio-player';
+@import 'components/crypto-donate';
+@import 'components/aliases';
+@import 'components/icon';
+@import 'forms';
+@import 'utilities';
+@import 'components/datepicker';

src/styles/autosuggest.scss

@@ -0,0 +1,38 @@
+.react-datepicker__input-container input {
+  // display: block;
+  // box-sizing: border-box;
+  // width: 100%;
+  // margin: 0;
+  // background: transparent;
+  // color: var(--primary-text-color);
+  // padding: 10px;
+  // font-family: inherit;
+  // font-size: 16px;
+  // resize: vertical;
+  // border: 0;
+  // outline: 0;
+
+  // &:focus {
+  //   outline: 0;
+  // }
+
+  // @media screen and (max-width: 600px) {
+  //   font-size: 16px;
+  // }
+}
+
+.autosuggest-emoji {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 18px;
+  font-size: 14px;
+}
+
+.autosuggest-emoji img {
+  display: block;
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+}

src/styles/basics.scss

@@ -0,0 +1,33 @@
+body {
+  @apply antialiased;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+body.with-modals {
+  @apply overflow-hidden;
+}
+
+// Note: this is needed for React HotKeys performance. Removing this
+// will cause severe performance degradation on Safari.
+div[tabindex='-1']:focus {
+  outline: 0;
+}
+
+::selection {
+  @apply bg-primary-600 text-white;
+}
+
+noscript {
+  text-align: center;
+}
+
+.emojione {
+  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
+}
+
+// Virtuoso empty placeholder fix.
+// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
+div[data-viewport-type='window'] {
+  position: static !important;
+}

src/styles/components/aliases.scss

@@ -0,0 +1,14 @@
+.aliases {
+  &__accounts {
+    overflow-y: auto;
+
+    &.empty-column-indicator {
+      min-height: unset;
+      overflow-y: unset;
+    }
+  }
+}
+
+.aliases-settings-panel {
+  flex: 1;
+}

src/styles/components/audio-player.scss

@@ -0,0 +1,51 @@
+.audio-player {
+  @apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
+  direction: ltr;
+
+  &.editable {
+    @apply rounded-none h-full;
+  }
+
+  .video-player__volume::before,
+  .video-player__seek::before {
+    @apply bg-white/10;
+  }
+
+  .video-player__seek__buffer {
+    @apply bg-white/20;
+  }
+
+  .video-player__buttons button {
+    @apply text-current opacity-[75];
+
+    &:active,
+    &:hover,
+    &:focus {
+      @apply text-current opacity-100;
+    }
+  }
+
+  .video-player__time-sep,
+  .video-player__time-total,
+  .video-player__time-current {
+    @apply text-current;
+  }
+
+  .video-player__seek::before,
+  .video-player__seek__buffer,
+  .video-player__seek__progress {
+    @apply top-0;
+  }
+
+  .video-player__seek__handle {
+    @apply -top-1;
+  }
+
+  .video-player__controls {
+    @apply pt-2.5 bg-transparent;
+  }
+}
+
+.media-spoiler-audio {
+  @apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
+}

src/styles/components/buttons.scss

@@ -0,0 +1,8 @@
+button {
+  font-family: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+}

src/styles/components/columns.scss

@@ -0,0 +1,26 @@
+.empty-column-indicator,
+.error-column {
+  @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
+
+  @supports (display: grid) { // hack to fix Chrome <57
+    contain: strict;
+  }
+
+  & > span {
+    @apply max-w-[400px];
+  }
+
+  a {
+    @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
+  }
+}
+
+.error-column {
+  flex-direction: column;
+
+  .svg-icon {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 30px;
+  }
+}

src/styles/components/compose-form.scss

@@ -0,0 +1,179 @@
+.compose-form {
+  &__warning {
+    @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
+
+    strong {
+      @apply font-medium;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          @apply font-bold;
+        }
+      }
+    }
+
+    a {
+      font-weight: 500;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__modifiers {
+    @apply text-gray-900 text-sm;
+    font-family: inherit;
+  }
+
+  &__upload-wrapper { overflow: hidden; }
+
+  &__uploads-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    &.contains-media {
+      padding: 5px;
+    }
+  }
+
+  &__upload {
+    flex: 1 1 0;
+    min-width: 40%;
+    margin: 5px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+
+    &__actions {
+      @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
+
+      &.active {
+        @apply opacity-100;
+      }
+
+      .icon-button {
+        @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
+      }
+    }
+
+    &-description {
+      @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
+
+      &.active {
+        @apply opacity-100;
+      }
+
+      textarea {
+        @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
+
+        &::placeholder {
+          @apply text-white/60;
+        }
+      }
+    }
+
+    &-preview {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__upload-thumbnail {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 160px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    &.video {
+      background-image: url('../assets/images/video-placeholder.png');
+      background-size: cover;
+    }
+
+    &.audio {
+      background-image: url('../assets/images/audio-placeholder.png');
+      background-size: cover;
+    }
+  }
+}
+
+.privacy-dropdown {
+  &.active {
+    &.top .privacy-dropdown__value {
+      @apply rounded-t-md;
+    }
+
+    .privacy-dropdown__dropdown {
+      @apply block shadow-md;
+    }
+  }
+
+  &__dropdown {
+    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
+
+    &.top {
+      transform-origin: 50% 100%;
+    }
+
+    &.bottom {
+      transform-origin: 50% 0;
+    }
+  }
+
+  &__option {
+    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
+
+    &.active {
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
+
+    &:hover,
+    &.active {
+      .privacy-dropdown__option__content,
+      .privacy-dropdown__option__content strong {
+        @apply text-black dark:text-white;
+      }
+    }
+
+    &.active {
+      @apply hover:bg-gray-200 dark:hover:bg-gray-700;
+    }
+
+    &__icon {
+      @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
+    }
+
+    &__content {
+      @apply flex-auto text-primary-600 dark:text-primary-400;
+
+      strong {
+        @apply block font-medium text-black dark:text-white;
+
+        @each $lang in $cjk-langs {
+          &:lang(#{$lang}) {
+            @apply font-bold;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/components/crypto-donate.scss

@@ -0,0 +1,47 @@
+.crypto-address {
+  @apply flex flex-col p-5;
+
+  &__head {
+    @apply flex items-center mb-1.5;
+  }
+
+  &__title {
+    @apply font-bold;
+  }
+
+  &__icon {
+    @apply flex items-start justify-center w-6 mr-2.5;
+
+    img {
+      @apply w-full;
+    }
+  }
+
+  &__actions {
+    @apply flex ml-auto;
+
+    a {
+      @apply text-gray-400 ml-2;
+    }
+
+    .svg-icon {
+      @apply h-4.5 w-4.5;
+    }
+  }
+
+  &__note {
+    @apply mb-2.5;
+  }
+
+  &__qrcode {
+    @apply flex items-center justify-center mb-3 p-2.5;
+  }
+
+  &__address {
+    @apply mt-auto;
+  }
+}
+
+.crypto-donate-modal .crypto-address {
+  @apply p-0;
+}

src/styles/components/datepicker.scss

@@ -0,0 +1,148 @@
+.react-datepicker {
+  @apply dark:bg-gray-900 dark:border-gray-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
+}
+
+.react-datepicker__input-container > input {
+  @apply dark:bg-gray-900 dark:text-gray-100 block w-full sm:text-sm border-gray-400 dark:border-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500;
+
+  &.has-error {
+    @apply text-red-600 border-red-600;
+  }
+}
+
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
+  @apply border-b-white dark:border-b-gray-900;
+}
+
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
+  @apply border-b-gray-200 dark:border-b-gray-700;
+}
+
+.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+  @apply rounded-tr-lg;
+}
+
+.react-datepicker__header {
+  @apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+  @apply text-gray-900 dark:text-gray-300 font-bold text-sm;
+}
+
+.react-datepicker__current-month {
+  margin-top: 2px;
+}
+
+.react-datepicker__navigation {
+  @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-gray-900/50;
+}
+
+.react-datepicker__navigation-icon {
+  margin-top: -3px;
+}
+
+.react-datepicker__navigation-icon--previous::before {
+  right: -5px;
+}
+
+.react-datepicker__navigation-icon--next::before {
+  left: -5px;
+}
+
+.react-datepicker__navigation--previous {
+  left: 16px;
+}
+
+.react-datepicker__navigation--next {
+  right: 16px;
+
+  &--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+    right: 100px;
+  }
+}
+
+.react-datepicker__year-read-view--down-arrow,
+.react-datepicker__month-read-view--down-arrow,
+.react-datepicker__month-year-read-view--down-arrow,
+.react-datepicker__navigation-icon::before {
+  border-width: 2px 2px 0 0;
+  height: 7px;
+  width: 7px;
+  top: 8px;
+}
+
+.react-datepicker__header__dropdown {
+  @apply py-4;
+}
+
+.react-datepicker__day-names,
+.react-datepicker__week {
+  @apply flex justify-between;
+}
+
+.react-datepicker__time {
+  @apply dark:bg-gray-900;
+}
+
+.react-datepicker__time-container {
+  @apply dark:border-gray-700;
+}
+
+.react-datepicker__day-name,
+.react-datepicker__day,
+.react-datepicker__time-name {
+  @apply text-gray-900 dark:text-gray-300;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.react-datepicker__time-list-item--disabled,
+.react-datepicker__day--disabled {
+  @apply text-gray-400 dark:text-gray-500;
+}
+
+.react-datepicker__day:hover,
+.react-datepicker__month-text:hover,
+.react-datepicker__quarter-text:hover,
+.react-datepicker__year-text:hover,
+.react-datepicker__time-list-item:hover {
+  @apply bg-gray-100 dark:bg-gray-700 rounded;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--selected,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--selected,
+.react-datepicker__year-text--in-selecting-range,
+.react-datepicker__year-text--in-range {
+  @apply bg-primary-600 hover:bg-primary-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-black rounded;
+}
+
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected {
+  @apply bg-primary-50 hover:bg-primary-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-primary-600 dark:text-primary-400;
+}
+
+.react-datepicker__close-icon {
+  @apply rtl:left-0 rtl:right-auto rtl:pr-0 rtl:pl-[6px];
+}
+
+.react-datepicker__close-icon::after {
+  @apply bg-transparent text-gray-600 dark:text-gray-400 text-base;
+  font-family: 'Font Awesome 5 Free';
+  content: '';
+  font-weight: 900;
+}

src/styles/components/detailed-status.scss

@@ -0,0 +1,15 @@
+.thread {
+  @apply bg-white dark:bg-primary-900;
+
+  &__status {
+    @apply relative pb-4;
+
+    .status__wrapper {
+      @apply shadow-none p-0;
+    }
+  }
+
+  .status__content-wrapper {
+    @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
+  }
+}

src/styles/components/display-name.scss

@@ -0,0 +1,18 @@
+.display-name {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+
+  bdi {
+    min-width: 0;
+  }
+
+  &__account {
+    position: relative;
+    font-weight: 600;
+    font-size: 14px;
+  }
+}

src/styles/components/icon.scss

@@ -0,0 +1,21 @@
+.svg-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.2s;
+
+  svg {
+    // Apparently this won't skew the image as long as it has a viewbox
+    width: 100%;
+    height: 100%;
+    transition: 0.2s;
+  }
+}
+
+.icon-button > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/styles/components/media-gallery.scss

@@ -0,0 +1,152 @@
+$media-compact-size: 50px;
+
+.media-gallery {
+  @apply rounded-lg;
+  box-sizing: border-box;
+  overflow: hidden;
+  isolation: isolate;
+  position: relative;
+  width: 100%;
+  height: auto;
+
+  &__item {
+    @apply rounded-sm;
+    border: 0;
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    position: relative;
+    overflow: hidden;
+
+    &__icons {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      .svg-icon {
+        @apply h-24 w-24;
+      }
+    }
+
+    &-overflow {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.75);
+      z-index: 2;
+      color: #333;
+      text-align: center;
+      font-weight: bold;
+      font-size: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    &-thumbnail {
+      @apply text-gray-400;
+      cursor: zoom-in;
+      display: block;
+      text-decoration: none;
+      line-height: 0;
+      position: relative;
+      z-index: 1;
+      height: 100%;
+      width: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__preview {
+    @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__gifv {
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  &__item-gifv-thumbnail {
+    @apply rounded-md;
+    cursor: zoom-in;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    transform: none;
+    top: 0;
+  }
+
+  &__gifv__label,
+  &__filename__label,
+  &__file-extension__label {
+    @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
+    font-size: 11px;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
+  }
+
+  &__gifv {
+    &.autoplay {
+      .media-gallery__gifv__label {
+        display: none;
+      }
+    }
+
+    &:hover {
+      .media-gallery__gifv__label {
+        opacity: 1;
+      }
+    }
+  }
+
+  &--compact {
+    height: $media-compact-size !important;
+    background: transparent;
+
+    .media-gallery__item {
+      width: $media-compact-size !important;
+      height: $media-compact-size !important;
+      inset: auto !important;
+      float: left !important;
+      margin-right: 5px;
+
+      &-overflow {
+        font-size: 20px;
+      }
+
+      &__icons .svg-icon {
+        @apply h-8 w-8;
+      }
+    }
+
+    .media-gallery__file-extension__label {
+      display: none;
+    }
+  }
+}

src/styles/components/modal.scss

@@ -0,0 +1,177 @@
+.modal-root__modal {
+  pointer-events: auto;
+  display: flex;
+  z-index: 9999;
+  max-height: 100%;
+  overflow-y: hidden;
+}
+
+.media-modal {
+  .audio-player.detailed,
+  .extended-video-player {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .audio-player {
+    max-width: 800px;
+    max-height: 600px;
+  }
+
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
+
+    video {
+      @apply max-w-full max-h-[80%];
+    }
+  }
+}
+
+.error-modal {
+  @apply text-gray-900;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    width: 80vw;
+    max-width: 520px;
+    max-height: 420px;
+    position: relative;
+    text-align: center;
+
+    & > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      user-select: text;
+    }
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    padding: 25px;
+
+    & > div {
+      min-width: 33px;
+    }
+  }
+}
+
+.actions-modal {
+  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white dark:bg-gray-900 shadow-xl rounded-2xl;
+  max-height: calc(100vh - 3rem);
+
+  &__item-label {
+    font-weight: 500;
+  }
+
+  .dropdown-menu__separator {
+    @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
+  }
+
+  &__status {
+    @apply overflow-y-auto max-h-[300px];
+  }
+
+  ul {
+    @apply my-2 flex-shrink-0 overflow-y-auto;
+    max-height: calc(100vh - 147px);
+
+    &.with-status { max-height: calc(80vh - 75px); }
+
+    li:not(:empty) {
+      a,
+      button {
+        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
+
+        &.destructive {
+          @apply text-danger-600 dark:text-danger-400;
+        }
+
+        .svg-icon:first-child {
+          @apply min-w-[1.25rem] w-5 h-5;
+
+          svg {
+            stroke-width: 1.5;
+          }
+        }
+      }
+
+      button[type='button'] {
+        @apply w-full justify-center text-center;
+      }
+    }
+  }
+}
+
+.reply-mentions-modal__accounts {
+  display: block;
+  flex-direction: row;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 300px;
+}
+
+.remote-interaction-modal {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+
+    button {
+      align-self: flex-end;
+    }
+  }
+
+  &__divider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 -10px;
+
+    &::before,
+    &::after {
+      @apply border-b border-gray-300 dark:border-gray-600;
+      content: '';
+      flex: 1;
+    }
+  }
+
+  @media screen and (width <= 895px) {
+    margin: 0;
+    border-radius: 6px;
+    height: unset !important;
+    width: 440px !important;
+  }
+
+  @media screen and (width <= 480px) {
+    width: 330px !important;
+  }
+}

src/styles/components/notification.scss

@@ -0,0 +1,3 @@
+.notification .status__wrapper {
+  @apply p-0 shadow-none rounded-none;
+}

src/styles/components/reply-mentions.scss

@@ -0,0 +1,18 @@
+.reply-mentions {
+  @apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
+
+  &__account {
+    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
+    direction: ltr;
+  }
+}
+
+.status__wrapper {
+  .reply-mentions {
+    display: block;
+
+    span {
+      cursor: pointer;
+    }
+  }
+}

src/styles/components/search.scss

@@ -0,0 +1,44 @@
+.search {
+  position: relative;
+}
+
+.search__icon {
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus {
+    outline: 0 !important;
+  }
+
+  .svg-icon {
+    @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
+    @include font-size(16);
+    cursor: default;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    width: 18px;
+    height: 18px;
+    opacity: 0;
+    pointer-events: none;
+
+    &.active {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+
+  .svg-icon--search.active {
+    pointer-events: none;
+  }
+
+  .svg-icon--backspace {
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+  }
+}

src/styles/components/status.scss

@@ -0,0 +1,146 @@
+.status {
+  @apply min-h-[54px] cursor-default;
+
+  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
+    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
+    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
+    padding-right: 26px; // 10px + 16px
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  opacity: 1;
+  animation: fade 150ms linear;
+}
+
+[column-type='filled'] .status__wrapper,
+[column-type='filled'] .status-placeholder {
+  @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
+}
+
+.status-check-box {
+  @apply flex items-center justify-between;
+
+  .status-check-box__status {
+    @apply py-2;
+
+    .media-gallery {
+      max-width: 250px;
+    }
+
+    .status__content {
+      @apply p-0 text-gray-700 dark:text-gray-500 text-sm whitespace-normal;
+    }
+
+    .video-player,
+    .audio-player {
+      margin-top: 8px;
+      max-width: 250px;
+    }
+
+    .media-gallery__item-thumbnail {
+      cursor: default;
+    }
+  }
+}
+
+.status-check-box-toggle {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  padding: 10px;
+}
+
+.focusable:focus,
+.focusable-within:focus-within {
+  outline: 0; /* Required b/c HotKeys lib sets this outline */
+  @apply ring-2 ring-primary-300;
+}
+
+.status-card {
+  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 no-underline overflow-hidden;
+}
+
+a.status-card {
+  @apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
+}
+
+.status-card-video,
+.status-card-audio {
+  iframe {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.status-card__image {
+  flex: 0 0 40%;
+  position: relative;
+  overflow: hidden;
+
+  & > .svg-icon {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    transform-origin: 50% 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    svg {
+      stroke-width: 1px;
+    }
+  }
+}
+
+.status-card.horizontal {
+  display: block;
+}
+
+.status-card.compact {
+  @apply border-gray-200 dark:border-gray-800;
+}
+
+.status-card__image-image {
+  @apply block w-full h-full object-cover bg-cover bg-center;
+}
+
+.status-card--link {
+  @apply flex flex-col md:flex-row;
+}
+
+.material-status {
+  padding-bottom: 10px;
+
+  &__status {
+    padding: 15px 0 10px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+  }
+
+  .status {
+    padding: 8px 10px;
+
+    &__content {
+      padding-top: 10px;
+    }
+  }
+}
+
+.attachment-thumbs {
+  position: relative;
+
+  &__clickable-region {
+    cursor: pointer;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/styles/components/video-player.scss

@@ -0,0 +1,307 @@
+.detailed,
+.fullscreen {
+  .video-player__volume__current,
+  .video-player__volume::before {
+    bottom: 27px;
+  }
+
+  .video-player__volume__handle {
+    bottom: 23px;
+  }
+}
+
+.video-player {
+  @apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
+  direction: ltr;
+
+  &.editable {
+    @apply rounded-none;
+    height: 100% !important;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  video {
+    display: block;
+    z-index: 1;
+    position: relative;
+  }
+
+  &.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+
+    video {
+      max-width: 100% !important;
+      max-height: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+      outline: 0;
+    }
+  }
+
+  &--inline {
+    video {
+      object-fit: contain;
+      max-height: 100%;
+    }
+  }
+
+  &__controls {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
+    padding: 0 15px;
+    opacity: 0;
+    transition: opacity 0.1s ease;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &__buttons-bar {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    margin: 0 -5px;
+
+    .video-player__download__icon {
+      color: inherit;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .player-button {
+      display: inline-block;
+      outline: 0;
+      flex: 0 0 auto;
+      background: transparent;
+      padding: 5px 6px;
+      font-size: 16px;
+      border: 0;
+      color: rgba(#fff, 0.75);
+
+      .svg-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: #fff;
+      }
+    }
+  }
+
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+  }
+
+  &__time-sep,
+  &__time-total,
+  &__time-current {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__time-current {
+    color: #fff;
+  }
+
+  &__time-sep {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  &__time-sep,
+  &__time-total {
+    color: #fff;
+  }
+
+  &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-right: 16px;
+    }
+
+    &::before {
+      content: '';
+      width: 50px;
+      background: rgba(#fff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &__current {
+      @apply bg-accent-500;
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &__handle {
+      @apply bg-accent-500;
+      position: absolute;
+      z-index: 3;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 50%;
+      left: 0;
+      margin-left: -6px;
+      transform: translate(0, -50%);
+      box-shadow: 1px 2px 6px #0003;
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
+    }
+  }
+
+  &__link {
+    padding: 2px 10px;
+
+    a {
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      color: #fff;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__seek {
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 100%;
+      background: rgba(#fff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      top: 14px;
+    }
+
+    &__progress,
+    &__buffer {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      top: 14px;
+    }
+
+    &__progress {
+      @apply bg-accent-500;
+    }
+
+    &__buffer {
+      background: rgba(#fff, 0.2);
+    }
+
+    &__handle {
+      @apply bg-accent-500;
+      position: absolute;
+      z-index: 3;
+      opacity: 0;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 10px;
+      margin-left: -6px;
+      box-shadow: 1px 2px 6px #0003;
+
+      .no-reduce-motion & {
+        transition: opacity 0.1s ease;
+      }
+
+      &.active {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .video-player__seek__handle {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.detailed,
+  &.fullscreen {
+    .video-player__buttons {
+      .player-button {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
+
+.media-spoiler-video {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  border: 0;
+  display: block;
+}

src/styles/emoji-picker.scss

@@ -0,0 +1,10 @@
+em-emoji-picker {
+  --rgb-background: 255 255 255;
+  --rgb-accent: var(--color-primary-600);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dark em-emoji-picker {
+  --rgb-background: var(--color-primary-900);
+}

src/styles/fonts.scss

@@ -0,0 +1,13 @@
+@use 'sass:math';
+
+// TYPEOGRAPHY MIXINS
+
+// Use these mixins to define font-size and line-height
+// html and body declaration allows developer to pass px value as argument
+// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
+@mixin font-size($size) {
+  $rem: math.div($size, 10);
+  $px: $size;
+  font-size: #{$px + 'px'};
+  font-size: #{$rem + 'rem'};
+}

src/styles/forms.scss

@@ -0,0 +1,29 @@
+select {
+  @apply pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+.form-error::before,
+.form-error::after {
+  border: solid transparent;
+  bottom: 100%;
+  content: '';
+  height: 0;
+  left: 10px;
+  pointer-events: none;
+  width: 0;
+  position: absolute;
+}
+
+.form-error::before {
+  --tw-bg-opacity: 1;
+  border-bottom-color: rgba(254, 202, 202, var(--tw-bg-opacity));
+  border-width: 6px;
+  margin-left: -1px;
+}
+
+.input.with_label.toggle .label_input {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+}

src/styles/loading.scss

@@ -0,0 +1,176 @@
+.loading-indicator-wrapper {
+  @apply h-screen w-screen flex justify-center items-center;
+}
+
+.loading-indicator {
+  @apply text-gray-50 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
+}
+
+.loading-indicator__container {
+  @apply w-10 h-10 relative;
+}
+
+.loading-indicator__figure {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent;
+  border: 0 solid;
+  border-width: 6px;
+  border-color: #e5e7eb;
+}
+
+.no-reduce-motion .loading-indicator span {
+  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.no-reduce-motion .loading-indicator__figure {
+  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.loading-indicator-wrapper .loading-indicator {
+  @apply h-screen w-screen items-center;
+
+  &__figure {
+    @apply border-gray-200;
+  }
+}
+
+@keyframes loader-figure {
+  0% {
+    @apply bg-gray-200 w-0 h-0;
+  }
+
+  29% {
+    @apply bg-gray-200;
+  }
+
+  30% {
+    @apply w-12 h-12 bg-transparent opacity-100;
+    border-width: 6px;
+  }
+
+  100% {
+    @apply w-12 h-12 border-0 opacity-0 bg-transparent;
+  }
+}
+
+@keyframes loader-label {
+  0% { opacity: 0.25; }
+  30% { opacity: 1; }
+  100% { opacity: 0.25; }
+}
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    transform: scale(0.91);
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    transform: scale(0.98);
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    transform: scale(0.87);
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+}
+
+.no-reduce-motion .pulse-loading {
+  transform-origin: center center;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+@keyframes shake-bottom {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 100%;
+  }
+
+  10% {
+    transform: rotate(2deg);
+  }
+
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+
+  80% {
+    transform: rotate(-2deg);
+  }
+
+  90% {
+    transform: rotate(2deg);
+  }
+}
+
+.no-reduce-motion .shake-bottom {
+  transform-origin: 50% 100%;
+  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
+}
+
+.load-more {
+  @apply block w-full m-0 p-4 border-0 box-border text-gray-900 bg-transparent;
+
+  .svg-icon {
+    @apply mx-auto;
+  }
+}
+
+.regeneration-indicator {
+  @apply text-gray-900;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: default;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border-radius: 10px;
+
+  @media screen and (max-width: 580px) {
+    border-radius: 0;
+  }
+
+  & > div {
+    width: 100%;
+    background: transparent;
+    padding-top: 0;
+  }
+
+  &__label {
+    strong {
+      @apply block mb-2.5 text-gray-900;
+    }
+
+    span {
+      font-size: 15px;
+      font-weight: 400;
+    }
+  }
+}
+
+.ptr,
+.ptr__children {
+  overflow: visible !important;
+}

src/styles/navigation.scss

@@ -0,0 +1,40 @@
+.thumb-navigation {
+  @apply fixed lg:hidden bottom-0 bg-white/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
+  padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #fff;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__link {
+    @apply px-2 py-2.5 space-y-1 flex flex-col flex-1 items-center text-gray-600 text-lg;
+
+    // padding: 8px 10px;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-content: end;
+    // color: var(--primary-text-color);
+    // text-decoration: none;
+    // font-size: 20px;
+    // width: 55px;
+
+    // span {
+    //   margin-top: 1px;
+    //   text-align: center;
+    //   font-size: 1.2rem;
+    // }
+
+    // .svg-icon {
+    //   width: 24px;
+    //   height: 24px;
+
+    //   svg {
+    //     stroke-width: 1px;
+    //   }
+    // }
+  }
+}

src/styles/rtl.scss

@@ -0,0 +1,13 @@
+body.rtl {
+  direction: rtl;
+
+  .status {
+    padding-left: 10px;
+    padding-right: 68px;
+  }
+
+  .table th,
+  .table td {
+    text-align: right;
+  }
+}

src/styles/tailwind.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .break-word-nested > p {
+    word-break: break-word;
+  }
+
+  .shadow-inset {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
+  }
+
+  .truncate-child > * {
+    @apply truncate;
+  }
+
+  .d-screen {
+    height: 100vh; /* Backwards compatibility */
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: 100dvh;
+  }
+
+  .bg-gradient-light {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(var(--color-gradient-start) / 0.1) 35%,
+      rgba(var(--color-gradient-end) / 0.1) 70%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-dark {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(var(--color-gradient-start) / 0.1) 45%,
+      rgba(var(--color-gradient-start) / 0.2) 55%,
+      rgba(0, 0, 0, 0) 70%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-sm {
+    background: linear-gradient(
+      112deg,
+      rgba(var(--color-gradient-start) / 0.1) 0%,
+      rgba(var(--color-gradient-end) / 0.1) 50%
+    );
+  }
+}

src/styles/ui.scss

@@ -0,0 +1,122 @@
+.icon-button {
+  @apply text-black dark:text-white;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: 100ms ease-in;
+  opacity: 0.4;
+
+  &__text {
+    padding-left: 2px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    opacity: 0.6;
+    transition: color 200ms ease-out;
+  }
+
+  &.disabled {
+    opacity: 0.2;
+    cursor: default;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+}
+
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}
+
+.ellipsis::after { content: '…'; }
+
+.image-loader {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .image-loader__preview-canvas {
+    @apply max-w-full max-h-[80%];
+    background: url('../assets/images/void.png') repeat;
+    object-fit: contain;
+  }
+
+  &.image-loader--amorphous .image-loader__preview-canvas {
+    display: none;
+  }
+}
+
+.zoomable-image {
+  @apply relative w-full h-full flex items-center justify-center;
+
+  img {
+    @apply w-auto h-auto max-w-full max-h-[80%] object-contain shadow-2xl;
+  }
+}
+
+.react-swipeable-view-container {
+  & {
+    height: 100%;
+  }
+}
+
+.react-swipeable-view-container > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.ui {
+  display: block;
+  width: 100%;
+  padding: 0 0 calc(var(--thumb-navigation-height) + 86px);
+
+  .page {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+.slist__append {
+  flex: 1 1 auto;
+  position: relative;
+  padding: 30px 15px;
+}
+
+.setting-text {
+  @apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent;
+  font-family: inherit;
+  padding: 7px 0;
+
+  @media screen and (max-width: 600px) {
+    font-size: 16px;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0;
+}
+
+@keyframes flicker {
+  0% { opacity: 1; }
+  30% { opacity: 0.75; }
+  100% { opacity: 1; }
+}

src/styles/utilities.scss

@@ -0,0 +1,22 @@
+.w-10i {
+  width: 2.5rem !important;
+}
+
+.z-1000 {
+  z-index: 1000;
+}
+
+.divide-x-dot > *:not(:last-child)::after {
+  content: '·';
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+.mention {
+  @apply text-primary-600 dark:text-accent-blue hover:underline;
+}
+
+.emoji-lg img.emojione {
+  width: 36px !important;
+  height: 36px !important;
+}

src/styles/variables.scss

@@ -0,0 +1,10 @@
+// Language codes that uses CJK fonts
+/* stylelint-disable-next-line value-keyword-case -- locale filenames */
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// CSS variables
+// NOTE: Prefer CSS variables whenever possible.
+// They're future-proof and more flexible.
+:root {
+  --thumb-navigation-height: calc(60px + env(safe-area-inset-bottom));
+}