Adjust my.so.ch top/bottombar styling

qwc-services · Jul 4, 2024 · ee987c8 · ee987c8
1 parent 7dc8011
commit ee987c8
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 11 deletions.
diff --git a/js/plugins/SoTopBar.jsx b/js/plugins/SoTopBar.jsx
@@ -65,14 +65,14 @@ class SoTopBar extends React.Component {
         if (this.props.mobile) {
             buttonContents = (
                 <span className="appmenu-button">
-                    <Icon className="appmenu-icon" icon="menu-hamburger" title={tooltip}/>
+                    <Icon className="mysoch-menu-icon" icon="mysoch-hamburger" title={tooltip}/>
                 </span>
             );
         } else {
             buttonContents = (
                 <span className="appmenu-button">
                     <span className="appmenu-label">{LocaleUtils.tr("appmenu.menulabel")}</span>
-                    <Icon className="appmenu-icon" icon="menu-hamburger" title={tooltip}/>
+                    <Icon className="mysoch-menu-icon" icon="mysoch-hamburger" title={tooltip}/>
                 </span>
             );
         }
@@ -130,7 +130,7 @@ class SoTopBar extends React.Component {
                     ) : null}
                     <button className="sotopbar-button" onClick={this.showHelp}><Icon icon="question-sign" size="large" /></button>
                     <span className="sotopbar-userinfo">
-                        <Icon icon="login" size="large" /> {userInfos?.displayname ?? ""}
+                        <Icon icon="identity" size="large" /> {userInfos?.displayname ?? ""}
                     </span>
                     <button className="sotopbar-button" onClick={this.logout}><Icon icon="poweroff" size="large" /></button>
                 </div>

diff --git a/js/plugins/style/SoBottomBar.css b/js/plugins/style/SoBottomBar.css
@@ -1,3 +1,7 @@
+#SoBottomBar {
+    font-family: 'Frutiger-Regular',sans-serif;
+}
+
 #SoBottomBar img.sobottombar-logo {
     position: absolute;
     left: 0.5em;

diff --git a/js/plugins/style/SoTopBar.css b/js/plugins/style/SoTopBar.css
@@ -6,6 +6,7 @@
     color: white;
     box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
     z-index: 102;
+    font-family: 'Frutiger-Regular',sans-serif;
 }
 
 #SoTopBar div.sotopbar-banner {
@@ -50,15 +51,17 @@
     height: 3.5em;
     flex: 0 0 auto;
     margin-right: 1em;
+    cursor: pointer;
 }
 
 #SoTopBar div.AppMenu.appmenu-visible {
     background-color: #990000;
 }
 
-#SoTopBar div.AppMenu span.appmenu-icon {
+#SoTopBar div.AppMenu span.mysoch-menu-icon {
     color: white;
-    border-color: white;
+    font-size: 250%;
+    padding: 0 0.3em;
 }
 
 #SoTopBar div.AppMenu span.appmenu-button {
@@ -90,24 +93,30 @@
 
 #SoTopBar div.SearchBox, 
 #SoTopBar div.SearchBox div.input-container {
-    height: 2.5em;
+    height: 3em;
     border-radius: 5px;
+    border-color: transparent;
+}
+
+#SoTopBar div.SearchBox div.input-container span.icon-search {
+    color: #cc0000;
 }
 
 #SoTopBar div.sotopbar-taskbar > span.sotopbar-spacer {
     flex: 1 1 auto;
 }
 
 #SoTopBar div.sotopbar-taskbar > button {
-    border-width: 0 2px;
+    border-width: 0 1px;
     border-style: solid;
     background-color: transparent;
     border-color: #990000;
-    margin-left: -2px;
+    margin-left: -1px;
     height: 100%;
-    padding: 0 1em;
+    padding: 0 1.25em;
     outline: none;
     font-weight: bold;
+    cursor: pointer;
 }
 
 #SoTopBar div.sotopbar-taskbar > button:hover {
@@ -121,9 +130,11 @@
 #SoTopBar div.sotopbar-taskbar > span.sotopbar-userinfo {
     display: flex;
     align-items: center;
-    margin: 0 1em;
+    margin: 0 0.75em;
+    font-weight: bold;
 }
 
 #SoTopBar div.sotopbar-taskbar > span.sotopbar-userinfo > span.icon {
     margin-right: 0.5em;
-}
+    font-size: 200%;
+}
diff --git a/static/assets/css/FrutigerRomanBold.ttf b/static/assets/css/FrutigerRomanBold.ttf
diff --git a/static/assets/css/FrutigerRomanBold.woff b/static/assets/css/FrutigerRomanBold.woff
diff --git a/static/assets/css/FrutigerRomanRegular.ttf b/static/assets/css/FrutigerRomanRegular.ttf
diff --git a/static/assets/css/FrutigerRomanRegular.woff b/static/assets/css/FrutigerRomanRegular.woff
diff --git a/static/assets/css/qwc2.css b/static/assets/css/qwc2.css
@@ -1,3 +1,17 @@
+@font-face {
+    font-family: "Frutiger-Bold";
+    src: url("FrutigerRomanBold.woff") format("woff"), url("FrutigerRomanBold.ttf") format("truetype");
+    font-style: normal;
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "Frutiger-Regular";
+    src: url("FrutigerRomanRegular.woff") format("woff"), url("FrutigerRomanRegular.ttf") format("truetype");
+    font-style: normal;
+    font-weight: normal;
+}
+
 div.sidebar-body,
 #TaskBar div.body {
     font-size: small;