refactor(App): update updater banner style

Stremio · Jan 30, 2025 · e496c67 · e496c67
1 parent 7b80784
commit e496c67
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/src/App/UpdaterBanner/UpdaterBanner.less b/src/App/UpdaterBanner/UpdaterBanner.less
@@ -2,38 +2,45 @@
     height: 4rem;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 1rem;
     padding: 0 1rem;
     font-size: 1rem;
     font-weight: bold;
     color: var(--primary-foreground-color);
     background-color: var(--primary-accent-color);
 
-    .buttons {
+    .button {
         display: flex;
         flex-direction: row;
-        gap: 0.75rem;
+        align-items: center;
+        justify-content: center;
+        height: 2.75rem;
+        padding: 0 1rem;
+        border-radius: var(--border-radius);
+        color: var(--primary-background-color);
+        background-color: var(--primary-foreground-color);
+        transition: all 0.1s ease-out;
 
-        .button {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            height: 2.75rem;
-            padding: 0 1rem;
-            border-radius: var(--border-radius);
-            transition: all 0.1s ease-out;
+        &:hover {
+            color: var(--primary-foreground-color);
+            background-color: transparent;
+            box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color);
+        }
+    }
 
-            &.suggested {
-                color: var(--primary-background-color);
-                background-color: var(--primary-foreground-color);
-            }
+    .close {
+        position: absolute;
+        right: 0;
+        height: 4rem;
+        width: 4rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
 
-            &:hover {
-                color: var(--primary-foreground-color);
-                background-color: transparent;
-                box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color);
-            }
+        .icon {
+            height: 2.5rem;
         }
     }
 }
diff --git a/src/App/UpdaterBanner/UpdaterBanner.tsx b/src/App/UpdaterBanner/UpdaterBanner.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
+import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
 import { useBinaryState } from 'stremio/common';
 import { Button, Transition } from 'stremio/components';
 import styles from './UpdaterBanner.less';
-import classNames from 'classnames';
 
 type Props = {
     className: string,
@@ -32,14 +32,12 @@ const UpdaterBanner = ({ className }: Props) => {
                     <div className={styles['label']}>
                         A new version of Stremio is available
                     </div>
-                    <div className={styles['buttons']}>
-                        <Button className={styles['button']} onClick={hide}>
-                            Dismiss
-                        </Button>
-                        <Button className={classNames(styles['button'], styles['suggested'])} onClick={onInstallClick}>
-                            Install now
-                        </Button>
-                    </div>
+                    <Button className={styles['button']} onClick={onInstallClick}>
+                        Install now
+                    </Button>
+                    <Button className={styles['close']} onClick={hide}>
+                        <Icon className={styles['icon']} name={'close'} />
+                    </Button>
                 </div>
             </Transition>
         </div>