feat: new app bar styling (#2642)

zer0-os · Feb 10, 2025 · 5947743 · 5947743
1 parent f643011
commit 5947743
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 58 deletions.
diff --git a/src/components/app-bar/index.tsx b/src/components/app-bar/index.tsx
@@ -34,7 +34,11 @@ export class AppBar extends React.Component<Properties, State> {
 
     return (
       <div {...cn('notification-icon-wrapper')}>
-        <IconBell1 size={24} {...cn('notification-icon', hasUnreadHighlights && 'highlight')} />
+        <IconBell1
+          {...cn('notification-icon', hasUnreadHighlights && 'highlight')}
+          isFilled={checkActive(this.props.activeApp)('notifications')}
+          size={18}
+        />
         {hasUnreadNotifications && !hasUnreadHighlights && <div {...cn('notification-dot')} />}
         {hasUnreadHighlights && <div {...cn('highlight-dot')} />}
       </div>
@@ -48,20 +52,27 @@ export class AppBar extends React.Component<Properties, State> {
     return (
       <>
         <div {...cn('')}>
-          <AppLink Icon={IconMessageSquare2} isActive={isActive('conversation')} label='Messenger' to='/conversation' />
-          {featureFlags.enableFeedApp && (
-            <AppLink Icon={IconList} isActive={isActive('feed')} label='Feed' to='/feed' />
-          )}
-          {featureFlags.enableNotificationsApp && (
+          <ul {...cn('container')}>
             <AppLink
-              Icon={this.renderNotificationIcon}
-              isActive={isActive('notifications')}
-              label='Notifications'
-              to='/notifications'
+              Icon={IconMessageSquare2}
+              isActive={isActive('conversation')}
+              label='Messenger'
+              to='/conversation'
             />
-          )}
-          <AppLink Icon={IconGlobe3} isActive={isActive('explorer')} label='Explorer' to='/explorer' />
-          <WorldPanelItem Icon={IconDotsGrid} label='More Apps' isActive={false} onClick={this.openModal} />
+            {featureFlags.enableFeedApp && (
+              <AppLink Icon={IconList} isActive={isActive('feed')} label='Feed' to='/feed' />
+            )}
+            {featureFlags.enableNotificationsApp && (
+              <AppLink
+                Icon={this.renderNotificationIcon}
+                isActive={isActive('notifications')}
+                label='Notifications'
+                to='/notifications'
+              />
+            )}
+            <AppLink Icon={IconGlobe3} isActive={isActive('explorer')} label='Explorer' to='/explorer' />
+            <WorldPanelItem Icon={IconDotsGrid} label='More Apps' isActive={false} onClick={this.openModal} />
+          </ul>
         </div>
         {this.state.isModalOpen && <MoreAppsModal onClose={this.closeModal} />}
       </>

diff --git a/src/components/app-bar/styles.scss b/src/components/app-bar/styles.scss
@@ -3,18 +3,31 @@
 @import '../../glass';
 
 .app-bar {
-  width: 88px;
   flex-shrink: 0;
   flex-grow: 0;
 
+  padding: 12px;
+
   display: flex;
-  flex-direction: column;
-  gap: 8px;
   align-items: center;
-  justify-content: center;
-  pointer-events: all;
 
-  @include main-background;
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    gap: 6px;
+    padding: 5px;
+
+    background: linear-gradient(180deg, #1e2124 0%, rgba(30, 33, 36, 0.12) 100%);
+    border: 1px solid var(--Border-border-primary, rgba(33, 36, 38, 1));
+    border-radius: 12px;
+    backdrop-filter: blur(30px);
+
+    list-style: none;
+    pointer-events: all;
+  }
 
   &__notification-icon-wrapper {
     position: relative;

diff --git a/src/components/app-bar/world-panel-item/index.test.tsx b/src/components/app-bar/world-panel-item/index.test.tsx
@@ -26,9 +26,9 @@ describe(WorldPanelItem, () => {
     expect(subject({ isActive: true })).toHaveClassName('world-panel-item--active');
   });
 
-  it('renders the label', function () {
+  it('shows a label on hover (default HTML title)', function () {
     const wrapper = subject({ label: 'my app' });
 
-    expect(wrapper.find('.world-panel-item__label')).toHaveText('my app');
+    expect(wrapper.find('.world-panel-item__icon')).toHaveProp('title', 'my app');
   });
 });
diff --git a/src/components/app-bar/world-panel-item/index.tsx b/src/components/app-bar/world-panel-item/index.tsx
@@ -20,10 +20,9 @@ export class WorldPanelItem extends React.Component<Properties> {
   render() {
     return (
       <div {...cn('', this.props.isActive && 'active')} onClick={this.publishClick}>
-        <div {...cn('icon')}>
-          <this.props.Icon size={'24px'} />
+        <div title={this.props.label} {...cn('icon')}>
+          <this.props.Icon size={'18px'} isFilled={this.props.isActive} />
         </div>
-        <span {...cn('label')}>{this.props.label}</span>
       </div>
     );
   }

diff --git a/src/components/app-bar/world-panel-item/styles.scss b/src/components/app-bar/world-panel-item/styles.scss
@@ -1,54 +1,23 @@
-@use '~@zero-tech/zui/styles/theme' as theme;
-
-@import '../../../glass';
-
 .world-panel-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-
   &__icon {
     border-radius: 9999px;
-    padding: 8px;
+    padding: 6px;
 
-    @include glass-text-secondary-color;
-    background-color: $glass-state-default-color;
+    color: var(--color-greyscale-11);
   }
 
   &--active,
   &:hover {
     .world-panel-item__icon {
-      color: $glass-highlight-color;
-      @include glass-state-hover-color;
-      @include glass-materials-raised;
-      @include glass-shadow-low;
+      color: var(--color-primary-12);
     }
   }
 
   &:hover {
     cursor: pointer;
-
-    .world-panel-item__label {
-      visibility: visible;
-    }
   }
 
   &--active:hover {
     cursor: auto;
   }
-
-  &__label {
-    visibility: hidden;
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 9.68px;
-    text-align: center;
-
-    padding: 3px 8px;
-    border-radius: 9999px;
-    background-color: $flat-thick-color;
-
-    @include glass-text-primary-color;
-  }
 }