fix(frontend): better UI for phone device (#2160)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/studio/page.tsx

@@ -24,12 +24,14 @@ const Studio = (): JSX.Element => {
       label: "Manage my brains",
       isSelected: selectedTab === "Manage my brains",
       onClick: () => setSelectedTab("Manage my brains"),
+      iconName: "edit",
     },
     {
       label: "Analytics - Coming soon",
       isSelected: selectedTab === "Analytics",
       onClick: () => setSelectedTab("Analytics"),
       disabled: true,
+      iconName: "graph",
     },
   ];
 

frontend/app/user/page.tsx

@@ -44,16 +44,19 @@ const UserPage = (): JSX.Element => {
       label: "Settings",
       isSelected: selectedTab === "Settings",
       onClick: () => setSelectedTab("Settings"),
+      iconName: "settings",
     },
     {
       label: "Brains Usage",
       isSelected: selectedTab === "Brains Usage",
       onClick: () => setSelectedTab("Brains Usage"),
+      iconName: "graph",
     },
     {
       label: "Plan",
       isSelected: selectedTab === "Plan",
       onClick: () => setSelectedTab("Plan"),
+      iconName: "star",
     },
   ];
 

frontend/lib/components/PageHeader/PageHeader.module.scss

@@ -1,4 +1,5 @@
 @use "@/styles/Colors.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
 
@@ -21,10 +22,15 @@
       visibility: visible;
       padding-left: Spacings.$spacing07;
     }
+
+    @media (max-width: ScreenSizes.$small) {
+      display: none;
+    }
   }
 
   .buttons_wrapper {
     display: flex;
     gap: Spacings.$spacing03;
+    align-self: flex-end;
   }
 }

frontend/lib/components/ui/Icon/Icon.module.scss

@@ -33,6 +33,10 @@
   color: Colors.$dark-grey;
 }
 
+.grey {
+  color: Colors.$normal-grey;
+}
+
 .primary {
   color: Colors.$primary;
 }

frontend/lib/components/ui/Tabs/Tabs.module.scss

@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .tabs_container {
@@ -15,6 +16,7 @@
     padding-block: Spacings.$spacing03;
     cursor: pointer;
     box-sizing: border-box;
+    gap: Spacings.$spacing03;
 
     &.selected {
       border-bottom-color: Colors.$primary;
@@ -30,5 +32,11 @@
       pointer-events: none;
       color: Colors.$normal-grey;
     }
+
+    @media (max-width: ScreenSizes.$small) {
+      .label {
+        display: none;
+      }
+    }
   }
 }

frontend/lib/components/ui/Tabs/Tabs.tsx

@@ -2,6 +2,8 @@ import { Tab } from "@/lib/types/Tab";
 
 import styles from "./Tabs.module.scss";
 
+import { Icon } from "../Icon/Icon";
+
 type TabsProps = {
   tabList: Tab[];
 };
@@ -19,7 +21,12 @@ export const Tabs = ({ tabList }: TabsProps): JSX.Element => {
           key={index}
           onClick={tab.onClick}
         >
-          <span>{tab.label}</span>
+          <Icon
+            name={tab.iconName}
+            size="normal"
+            color={tab.isSelected ? "primary" : tab.disabled ? "grey" : "black"}
+          />
+          <span className={styles.label}>{tab.label}</span>
         </div>
       ))}
     </div>

frontend/lib/types/Colors.ts

@@ -1,6 +1,7 @@
 export type Color =
   | "black"
   | "dark-grey"
+  | "grey"
   | "primary"
   | "gold"
   | "accent"

frontend/lib/types/Tab.ts

@@ -1,6 +1,9 @@
+import { iconList } from "../helpers/iconList";
+
 export interface Tab {
   label: string;
   isSelected: boolean;
   disabled?: boolean;
+  iconName: keyof typeof iconList;
   onClick: () => void;
 }