toolbar design changes

src/components/toolbar/ToolbarView.tsx

@@ -68,7 +68,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
             <TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
                 <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
             </TransitionAnimation>
-            <div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 border-t border-black z-toolbar bg-toolbar bg-toolbar-gradient shadow-inner1px">
+            <div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 border-t border-gray-800 z-toolbar bg-toolbar-gradient toolbar">
                 <div className="flex items-center gap-2">
                     <div className="flex items-center gap-2">
                         <div className={ classNames('flex justify-center items-center w-[50px] h-[45px] overflow-hidden cursor-pointer *:ml-[-5px] *:mt-[25px]', isMeExpanded && 'active') } onClick={ event => setMeExpanded(!isMeExpanded) }>

src/index.css

@@ -192,6 +192,34 @@ body {
         }
     }
 
+    .toolbar {
+        @apply relative;
+        background: rgb(33,33,33);
+        background: linear-gradient(0deg, rgba(33,33,33,0.9) 0%, rgba(51,51,51,0.9) 100%);
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 1px;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            bottom: 2px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+    }
+
     .avatar-image {
         @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
     }

tailwind.config.js

@@ -34,7 +34,6 @@ module.exports = {
             boxShadow,
             backgroundImage: {
                 'button-gradient-gray': 'linear-gradient(to bottom, #e2e2e2 50%, #c8c8c8 50%)',
-                'toolbar-gradient': 'linear-gradient(to bottom, #363636 50%, #2a2a2a 50%)',
             },
             spacing: {
                 'card-header': '33px',