Fix some styling

src/components/BottomLabel.css

@@ -1,6 +1,6 @@
 .bottom-label {
   position: absolute;
-  bottom: .25rem;
+  bottom: 1rem;
   display: flex;
   align-items: center;
   gap: .5rem;
@@ -19,8 +19,8 @@
 }
 
 .dot {
-  width: 2px;
-  height: 2px;
+  width: 3px;
+  height: 3px;
   background: currentColor;
   border-radius: 100px;
 }

src/components/DisabledScreen.css

@@ -5,11 +5,11 @@
   font-size: 16px;
 }
 
-.disabled svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: 0 auto;
+.disabled .icon {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  display: inline-block;
   color: #B44868;
 }
 
@@ -19,4 +19,4 @@
 
 .disabled strong {
   color: white;
-}
+}

src/components/DisabledScreen.tsx

@@ -4,7 +4,9 @@ import { Icon } from './Icon';
 export function DisabledScreen() {
   return (
     <div className="disabled">
-      <Icon name="warningCircle" />
+      <div className="icon">
+        <Icon name="warningCircle" />
+      </div>
       <p>
         The <strong>movie-web extension</strong> can not be used on this page
       </p>

src/components/SetupScreen.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
 import { Button } from '~components/Button';
+import { Icon } from '~components/Icon';
 
 import './SetupScreen.css';
-import { Icon } from '~components/Icon';
 
 export function SetupScreen() {
   const open = useCallback(() => {