Improve theming and add feature flag for connection status element (#164)

Author: rsanteri

src/GlobalStyle.tsx

@@ -6,7 +6,13 @@ import './theme/theme.css';
 const globalCSS = css`
   ${normalize}
 
-  body, html, #root {
+  html {
+    font-size: var(--html-document-font-size);
+  }
+
+  body,
+  html,
+  #root {
     margin: 0;
     padding: 0;
     min-width: 100%;

src/components/AppBar/index.tsx

@@ -24,7 +24,7 @@ const AppBar: React.FC = () => {
         )}
         <Breadcrumb />
         {!FEATURE_FLAGS.HIDE_QUICK_LINKS && <HelpMenu />}
-        <ConnectionStatus />
+        {!FEATURE_FLAGS.HIDE_CONNECTION_STATUS && <ConnectionStatus />}
       </ItemRow>
       <ItemRow pad="lg">
         <PluginGroup id="header" title="Extensions" slot="header" />

src/components/LogList/LogActionBar.tsx

@@ -137,8 +137,9 @@ const Buttons = styled.div`
   flex: 0;
 
   button {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: var(--loglist-button-size);
+    height: var(--loglist-button-size);
+    padding: 0;
     margin-left: 0.5rem;
 
     i {

src/components/TaskListingHeader/TaskListingHeader.tsx

@@ -179,7 +179,7 @@ export function getMode(settings: TaskSettingsState): TaskListMode {
 //
 
 const TaskListingContainer = styled.div`
-  border-bottom: var(--border-medium-1);
+  border-bottom: var(--task-list-header-border-bottom);
   font-size: var(--font-size-primary);
   position: relative;
 `;

src/components/Timeline/Footer/index.tsx

@@ -39,7 +39,7 @@ const TimelineFooterContainer = styled.div`
 
 const TimelineFooterLeft = styled.div`
   display: inline-block;
-  width: 15.3125rem;
+  width: var(--task-list-width);
   margin: 0.5rem 0;
   padding-right: 0.5rem;
 `;

src/components/Timeline/TaskListLabel.tsx

@@ -121,8 +121,8 @@ export default TaskListLabel;
 //
 
 const RowLabel = styled.div<{ type: 'step' | 'task'; isOpen?: boolean; group?: boolean; status: string }>`
-  flex: 0 0 15.3125rem;
-  max-width: 15.3125rem;
+  flex: 0 0 var(--task-list-width);
+  max-width: var(--task-list-width);
   overflow: hidden;
   cursor: pointer;
   font-size: ${(p) =>

src/theme/theme.css

@@ -128,6 +128,8 @@
     --radius-secondary: 0.5rem; /* 8px */
 
     /* Layout */
+    --html-document-font-size: 16px;
+
     --layout-color-bg: var(--color-bg-primary);
     --layout-max-width: 160rem; /* 2560px */
     --layout-application-bar-height: 7rem; /* 112px */
@@ -423,6 +425,7 @@
     --task-view-margin: none;
     --task-view-shadow: none;
 
+    --task-list-header-border-bottom: var(--border-medium-1);
     --task-list-padding: 0;
     --task-list-width: 15.25rem;
 
@@ -433,4 +436,6 @@
     --task-content-shadow: none;
     --task-content-border-left: none;
     --task-content-border-right: none;
+
+    --loglist-button-size: 2.5rem;
 }

src/utils/FEATURE.ts

@@ -17,6 +17,7 @@ const FEATURE_FLAGS = {
   HIDE_STATUS_FILTERS: (process.env.REACT_APP_FEATURE_HIDE_STATUS_FILTERS || '0') === '1',
   HIDE_TABLE_HEADER: (process.env.REACT_APP_FEATURE_HIDE_TABLE_HEADER || '0') === '1',
   HIDE_QUICK_LINKS: (process.env.REACT_APP_FEATURE_HIDE_QUICK_LINKS || '0') === '1',
+  HIDE_CONNECTION_STATUS: (process.env.REACT_APP_FEATURE_HIDE_CONNECTION_STATUS || '0') === '1',
 
   CACHE_DISABLE: false,
   DB_LISTEN_DISABLE: false,