TopBar.js refactoring done

TransformerOptimus · Jul 29, 2023 · 89ca09f · 89ca09f
1 parent e5838c0
commit 89ca09f
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 79 deletions.
diff --git a/gui/pages/Dashboard/Dashboard.module.css b/gui/pages/Dashboard/Dashboard.module.css
@@ -56,39 +56,6 @@
     margin-top: -1px;
 }
 
-.top_bar {
-    padding: 8px 10px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.top_bar_section {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 2px 9px;
-    gap: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-.top_bar_font {
-    display: flex;
-    align-items: center;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    color: white;
-    margin-left: 5px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .item_list {
     height: 100%;
     position: relative;
@@ -160,32 +127,6 @@
     text-overflow: ellipsis;
 }
 
-.top_right {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
-    order: 1;
-    height: 100%;
-}
-
-.top_left {
-    display: flex;
-    order: 0;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.top_right_icon {
-    margin-right: 10px;
-    cursor: pointer;
-    display: flex;
-    order: 1;
-    justify-content: flex-end;
-    align-items: center;
-    height: 100%;
-}
-
 .empty_state_button {
     border: none;
     border-radius: 8px;

diff --git a/gui/pages/Dashboard/TopBar.js b/gui/pages/Dashboard/TopBar.js
@@ -23,35 +23,29 @@ export default function TopBar({selectedProject, userName, env}) {
   };
 
   return (
-    <div className={styles.top_bar}>
-      <div className={styles.top_left}>
-        <div className={styles.top_bar_section}
-             style={{border: '1px solid rgba(255, 255, 255, 0.14)', width: '150px', cursor: 'default'}}>
-          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start'}}>
-            <div style={{marginTop: '-2px'}}><Image width={14} height={14} src="/images/project.svg"
-                                                    alt="project-icon"/></div>
-            <div className={styles.top_bar_font}><p>{selectedProject?.name || ''}</p></div>
+    <div className="top_bar">
+      <div className="top_left">
+        <div className="top_bar_section top_bar_input cursor_default">
+          <div className="horizontal_container">
+            <Image width={14} height={14} src="/images/project.svg" alt="project-icon"/>
+            <div className="top_bar_font">{selectedProject?.name || ''}</div>
           </div>
-          {/*<div style={{order:'1'}}><Image width={16} height={16} src="/images/dropdown_down.svg" alt="dropdown-icon"/></div>*/}
         </div>
-        <div className={styles.top_bar_section} style={{marginLeft: '7px', cursor: 'pointer'}}>
-          <div style={{marginTop: '-3px'}}><Image width={14} height={14} src="/images/widgets.svg" alt="widgets-icon"/>
-          </div>
-          <div className={styles.top_bar_font} style={{marginLeft: '-1px'}}
-               onClick={() => openNewTab(-4, "Marketplace", "Marketplace", false)}><p>Marketplace</p></div>
+        <div className="top_bar_section ml_7 cursor_pointer">
+          <Image width={14} height={14} src="/images/widgets.svg" alt="widgets-icon"/>
+          <div className="top_bar_font" onClick={() => openNewTab(-4, "Marketplace", "Marketplace", false)}>Marketplace</div>
         </div>
       </div>
-      <div className={styles.top_right}>
-        <div onClick={() => openNewTab(-3, "Settings", "Settings", false)} className={styles.top_right_icon}><Image
-          width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/></div>
-        <div className={styles.top_right_icon} onMouseEnter={() => setDropdown(true)}
+      <div className="top_right">
+        <Image onClick={() => openNewTab(-3, "Settings", "Settings", false)} className="top_right_icon" width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/>
+        <div className="top_right_icon" onMouseEnter={() => setDropdown(true)}
              onMouseLeave={() => setDropdown(false)}>
           <Image width={20} height={20} src="/images/profile_pic.png" alt="dropdown-icon"/>
         </div>
         {dropdown && env === 'PROD' &&
-          <div style={{marginTop: '3vh', marginRight: '74px'}} onMouseEnter={() => setDropdown(true)}
+          <div className="mt_30 mr_74" onMouseEnter={() => setDropdown(true)}
                onMouseLeave={() => setDropdown(false)}>
-            <ul className="dropdown_container" style={{width: '120px'}}>
+            <ul className="dropdown_container w_120p">
               <li className="dropdown_item" onClick={() => setDropdown(false)}>{userName}</li>
               <li className="dropdown_item" onClick={logoutUser}>Logout</li>
             </ul>

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
@@ -709,6 +709,7 @@ p {
 .mt_50{margin-top: 50px;}
 .mt_60{margin-top: 60px;}
 .mt_70{margin-top: 70px;}
+.mt_74{margin-top: 74px;}
 .mt_80{margin-top: 80px;}
 
 .mb_1{margin-bottom: 1px;}
@@ -751,6 +752,10 @@ p {
 .mb_38{margin-bottom: 38px;}
 .mb_39{margin-bottom: 39px;}
 .mb_40{margin-bottom: 40px;}
+.mb_50{margin-bottom: 50px;}
+.mb_60{margin-bottom: 60px;}
+.mb_70{margin-bottom: 70px;}
+.mb_74{margin-bottom: 74px;}
 
 
 .ml_1{margin-left: 1px;}
@@ -835,6 +840,9 @@ p {
 .mr_38{margin-right: 38px;}
 .mr_39{margin-right: 39px;}
 .mr_40{margin-right: 40px;}
+.mr_70{margin-right: 70px;}
+.mr_74{margin-right: 74px;}
+.mr_80{margin-right: 80px;}
 
 .text_9{
     color: #FFF;
@@ -938,8 +946,10 @@ p {
     width: 100%;
 }
 
+.w_120p{width: 120px}
 .w_100{width: 100%}
 .w_fit_content{width:fit-content}
+
 .h_100{height: 100%}
 .h_auto{height: auto}
 
@@ -960,6 +970,7 @@ p {
 .position_relative{position: relative}
 
 .cursor_pointer{cursor: pointer}
+.cursor_default{cursor: default}
 
 .overflow_auto{overflow: auto}
 .overflowY_scroll{overflow-y: scroll}
@@ -1436,3 +1447,69 @@ tr{
     word-wrap: break-word;
     max-width: 95%;
 }
+
+
+.top_bar {
+    padding: 8px 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.top_bar_section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2px 9px;
+    gap: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.top_bar_input{
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    width: 150px;
+}
+
+.top_bar_font {
+    display: flex;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    color: white;
+    margin-left: 5px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+.top_right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+    order: 1;
+    height: 100%;
+}
+
+.top_left {
+    display: flex;
+    order: 0;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.top_right_icon {
+    margin-right: 10px;
+    cursor: pointer;
+    display: flex;
+    order: 1;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+}