nicolium: media modal display fix

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/ui/spinner.scss

@@ -1,104 +0,0 @@
-/**
- * iOS style loading spinner.
- * Adapted from: https://loading.io/css/
- * With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
- */
-
-.spinner {
-  @apply inline-block relative w-20 h-20;
-}
-
-.spinner > div {
-  @apply absolute origin-[50%_50%] w-full h-full;
-  animation: spinner 1.2s linear infinite;
-}
-
-.spinner > div::after {
-  display: block;
-  position: absolute;
-  border-radius: 9999px;
-  content: ' ';
-  top: 3.75%;
-  left: 46.25%;
-  width: 7.5%;
-  height: 22.5%;
-  background: rgb(var(--color-gray-700));
-
-  .dark & {
-    background: rgb(var(--color-gray-400));
-  }
-
-  .dark button & {
-    background: white;
-  }
-}
-
-.spinner > div:nth-child(1) {
-  transform: rotate(0deg);
-  animation-delay: -1.1s;
-}
-
-.spinner > div:nth-child(2) {
-  transform: rotate(30deg);
-  animation-delay: -1s;
-}
-
-.spinner > div:nth-child(3) {
-  transform: rotate(60deg);
-  animation-delay: -0.9s;
-}
-
-.spinner > div:nth-child(4) {
-  transform: rotate(90deg);
-  animation-delay: -0.8s;
-}
-
-.spinner > div:nth-child(5) {
-  transform: rotate(120deg);
-  animation-delay: -0.7s;
-}
-
-.spinner > div:nth-child(6) {
-  transform: rotate(150deg);
-  animation-delay: -0.6s;
-}
-
-.spinner > div:nth-child(7) {
-  transform: rotate(180deg);
-  animation-delay: -0.5s;
-}
-
-.spinner > div:nth-child(8) {
-  transform: rotate(210deg);
-  animation-delay: -0.4s;
-}
-
-.spinner > div:nth-child(9) {
-  transform: rotate(240deg);
-  animation-delay: -0.3s;
-}
-
-.spinner > div:nth-child(10) {
-  transform: rotate(270deg);
-  animation-delay: -0.2s;
-}
-
-.spinner > div:nth-child(11) {
-  transform: rotate(300deg);
-  animation-delay: -0.1s;
-}
-
-.spinner > div:nth-child(12) {
-  transform: rotate(330deg);
-  animation-delay: 0s;
-}
-
-@keyframes spinner {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}

packages/nicolium/src/components/ui/spinner.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Text from './text';
-
-import './spinner.scss';
-
 interface ISpinner {
   /** Width and height of the spinner in pixels. */
   size?: number;
@@ -14,17 +10,17 @@ interface ISpinner {
 
 /** Spinning loading placeholder. */
 const Spinner = ({ size = 30, withText = true }: ISpinner) => (
-  <div className='flex flex-col items-center justify-center gap-2'>
-    <div className='spinner' style={{ width: size, height: size }}>
+  <div className='⁂-spinner__container'>
+    <div className='⁂-spinner' style={{ width: size, height: size }}>
       {Array.from(Array(12).keys()).map((i) => (
         <div key={i}>&nbsp;</div>
       ))}
     </div>
 
     {withText && (
-      <Text theme='muted' tracking='wide'>
+      <p>
         <FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' />
-      </Text>
+      </p>
     )}
   </div>
 );

packages/nicolium/src/styles/new/components.scss

@@ -1466,3 +1466,132 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
     transition: left 100ms ease-in-out;
   }
 }
+
+/**
+ * iOS style loading spinner.
+ * Adapted from: https://loading.io/css/
+ * With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
+ */
+
+.⁂-spinner {
+  position: relative;
+  display: inline-block;
+  width: 5rem;
+  height: 5rem;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  & > div {
+    position: absolute;
+    transform-origin: 50% 50%;
+
+    width: 100%;
+    height: 100%;
+
+    animation: spinner 1.2s linear infinite;
+
+    &::after {
+      content: ' ';
+
+      position: absolute;
+      top: 3.75%;
+      left: 46.25%;
+
+      display: block;
+
+      width: 7.5%;
+      height: 22.5%;
+      border-radius: 9999px;
+
+      background: rgb(var(--color-gray-700));
+
+      .dark & {
+        background: rgb(var(--color-gray-400));
+      }
+
+      .dark button & {
+        background: white;
+      }
+    }
+
+    &:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+
+    &:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+
+    &:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+
+    &:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+
+    &:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+
+    &:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+
+    &:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+
+    &:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+
+    &:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+
+    &:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+  }
+
+  p {
+    @include mixins.text($theme: muted, $tracking: wide);
+  }
+}
+
+@keyframes spinner {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

packages/nicolium/src/styles/new/modals.scss

@@ -176,6 +176,10 @@
       outline: none;
     }
   }
+
+  .⁂-spinner__container {
+    position: absolute;
+  }
 }
 
 .⁂-dropdown-menu-modal {